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
});
}
5.编码实战
6.扩展思考
如果插件体积较大，如何使插件结构更清晰，易维护
可使用面向对象的方法去开发插件
7.参考文献
参考一：教你开发jQuery插件
参考二： 原生JS与jQuery文档加载完毕的写法
网友评论