js文档加载完毕有哪些写法？如何开发jq插件？

这里是修真院前端小课堂，本篇分析的主题是

【 js文档加载完毕有哪些写法？如何开发jq插件？】

1.背景介绍

首先看一个问题，js(或者jq)加载完毕有哪几种写法

HTML是有执行顺序的，默认是自上而下执行。所以当我们的js代码在html代码下边的时候，可以正常执行，而当我们的js代码在html代码上边的时候，就无法正常执行了，这时，我们需要在文档加载完毕的时候才去执行js代码，所以通常我们会这样做：

js加载完毕的写法

window.onload = function(){
//要执行的js代码段
}

这种方式不仅要求页面的DOM tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。

jq加载完毕的常见写法

$(document).ready(function(){
//要执行的js代码段
});

代码中的document可省略,这种写法仅仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

还可以进一步精简：

$(function(){
//要执行的js代码段
});

2.知识剖析

什么是jQuery插件？jQuery插件如何使用？

jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法

jQuery插件的使用方式就是jQuery对象方法的调用

3.常见问题

如何开发jquery插件

jQuery插件开发方式主要有三种：

1.通过$.extend()来扩展jQuery
2.通过$.fn 向jQuery添加新的方法
3.通过$.widget()应用jQuery UI的部件工厂方式创建

4.解决方案

第一种方式很简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以

$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，比较高级也比较复杂，就不细说了。

基本形式：

$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}

基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
以上例子可以将a链接的颜色转换为红色
在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。
所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用 $('a').css()。

和$.extend一起使用，可实现让插件接收参数：

$.fn.myPlugin = function(options) {
var defaults = {
'backgroundColor': 'red',
'fontSize': '2em'
};
var settings = $.extend(defaults, options);
//通过return 实现jquery的链式调用
return this.css({
'backgroundColor': settings.backgroundColor,
'fontSize': settings.fontSize
});
}

这样调用：

$('#b').myPlugin({
'backgroundColor': '#2C9929'
});

上面代码调用extend时会将defaults的值改变，一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。

$.fn.myPlugin = function(options) {
var defaults = {
'backgroundColor': 'red',
'fontSize': '2em'
};
var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
return this.css({
'backgroundColor': settings.backgroundColor,
'fontSize': settings.fontSize
});
}