1.背景介紹
首先看一個(gè)問題，js(或者jq)加載完畢有哪幾種寫法
HTML是有執(zhí)行順序的，默認(rèn)是自上而下執(zhí)行。所以當(dāng)我們的js代碼在html代碼下邊的時(shí)候，可以正常執(zhí)行，而當(dāng)我們的js代碼在html代碼上邊的時(shí)候，就無法正常執(zhí)行了，這時(shí)，我們需要在文檔加載完畢的時(shí)候才去執(zhí)行js代碼，所以通常我們會這樣做：
js加載完畢的寫法
window.onload = function(){
//要執(zhí)行的js代碼段
}
這種方式不僅要求頁面的DOM tree全部加載完成，而且要求所有的外部圖片和資源全部加載完成。
jq加載完畢的常見寫法
$(document).ready(function(){
//要執(zhí)行的js代碼段
});
代碼中的document可省略,這種寫法僅僅只需要加載所有的DOM結(jié)構(gòu)，在瀏覽器把所有的HTML放入DOM tree之前就執(zhí)行js效果。包括在加載外部圖片和資源之前。
還可以進(jìn)一步精簡：
$(function(){
//要執(zhí)行的js代碼段
});
2.知識剖析
什么是jQuery插件？jQuery插件如何使用？
jQuery插件就是用來擴(kuò)展jQuery原型對象的一個(gè)方法，簡單來說就是jQuery插件是jQuery對象的一個(gè)方法
jQuery插件的使用方式就是jQuery對象方法的調(diào)用
3.常見問題
如何開發(fā)jquery插件
jQuery插件開發(fā)方式主要有三種：
1.通過$.extend()來擴(kuò)展jQuery
2.通過$.fn 向jQuery添加新的方法
3.通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
4.解決方案
第一種方式很簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個(gè)靜態(tài)方法而以
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //調(diào)用
$.sayHello('Wayou'); //帶參調(diào)用
通常我們使用第二種方法來進(jìn)行簡單插件開發(fā)，說簡單是相對于第三種方式。第三種方式是用來開發(fā)更高級jQuery部件的，該模式開發(fā)出來的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)信息自動保存，各種關(guān)于插件的常用方法等，比較高級也比較復(fù)雜，就不細(xì)說了。
基本形式：
$.fn.myPlugin = function() {
//在這里面,this指的是用jQuery選中的元素
//example :$('a'),則this=$('a')
this.css('color', 'red');
}
基本上就是往$.fn上面添加一個(gè)方法，名字是我們的插件名稱。然后我們的插件代碼在這個(gè)方法里面展開。
以上例子可以將a鏈接的顏色轉(zhuǎn)換為紅色
在插件名字定義的這個(gè)函數(shù)內(nèi)部，this指代的是我們在調(diào)用該插件時(shí)，用jQuery選擇器選中的元素，一般是一個(gè)jQuery類型的集合。比如$('a')返回的是頁面上所有a標(biāo)簽的集合，且這個(gè)集合已經(jīng)是jQuery包裝類型了，也就是說，在對其進(jìn)行操作的時(shí)候可以直接調(diào)用jQuery的其他方法而不需要再用美元符號來包裝一下。
所以在上面插件代碼中，我們在this身上調(diào)用jQuery的css()方法，也就相當(dāng)于在調(diào)用 $('a').css()。
和$.extend一起使用，可實(shí)現(xiàn)讓插件接收參數(shù)：
$.fn.myPlugin = function(options) {
var defaults = {
'backgroundColor': 'red',
'fontSize': '2em'
};
var settings = $.extend(defaults, options);
//通過return 實(shí)現(xiàn)jquery的鏈?zhǔn)秸{(diào)用
return this.css({
'backgroundColor': settings.backgroundColor,
'fontSize': settings.fontSize
});
}
這樣調(diào)用：
$('#b').myPlugin({
'backgroundColor': '#2C9929'
});
上面代碼調(diào)用extend時(shí)會將defaults的值改變，一個(gè)好的做法是將一個(gè)新的空對象做為$.extend的第一個(gè)參數(shù)，defaults和用戶傳遞的參數(shù)對象緊隨其后，這樣做的好處是所有值被合并到這個(gè)空對象上，保護(hù)了插件里面的默認(rèn)值。
$.fn.myPlugin = function(options) {
var defaults = {
'backgroundColor': 'red',
'fontSize': '2em'
};
var settings = $.extend({},defaults, options);//將一個(gè)空對象做為第一個(gè)參數(shù)
return this.css({
'backgroundColor': settings.backgroundColor,
'fontSize': settings.fontSize
});
}
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
如果插件體積較大，如何使插件結(jié)構(gòu)更清晰，易維護(hù)
可使用面向?qū)ο蟮姆椒ㄈラ_發(fā)插件
7.參考文獻(xiàn)
參考一：教你開發(fā)jQuery插件
參考二： 原生JS與jQuery文檔加載完畢的寫法
