jQuery插件開發(fā)的流程分析

需求：為了在jquery對象的原型上添加一個方法，該方法能實(shí)現(xiàn)jquery源碼沒有實(shí)現(xiàn)的功能。這樣，用jquery選擇器選擇的dom對象就可以直接調(diào)用該方法，實(shí)現(xiàn)相應(yīng)的業(yè)務(wù)邏輯 。

一、外部包裹自運(yùn)行函數(shù)

1、首先所有的代碼應(yīng)該用一個自執(zhí)行函數(shù)包裹 （為了避免全局變量的污染）。

2、在自執(zhí)行函數(shù)前最好加一個; ( ! )? ? (為了和前面加載的js進(jìn)行分隔，避免出錯)。

3、把window, document , jQuery 這些全局變量傳入自運(yùn)行函數(shù)中，使其成為局部變量，從而提高執(zhí)行速度。

二、構(gòu)建自定義對象

要把插件擴(kuò)展的方法要完成的業(yè)務(wù)邏輯以構(gòu)造函數(shù)+原型的方式封裝到一個自定義對象中。

1、把對象需要的屬性構(gòu)建在構(gòu)造函數(shù)中。

2、把對象需要的方法構(gòu)建在原型上。

3、對象要預(yù)留接口，允許用戶傳入自定義的設(shè)置

（1）this.defauts :? 默認(rèn)設(shè)置

（2）構(gòu)造函數(shù)允許從外部傳入配置? opt

（3）用$.extend()方法把默認(rèn)設(shè)置和用戶自定義設(shè)置進(jìn)行合并 （如果用戶沒有傳入相應(yīng)的配置，則使用默認(rèn)值，如果傳入，則使用用戶自定義的值）。

三、基本自定義對象，實(shí)現(xiàn)在jquery的原型上添加新方法

1、通過 $.fn.myPlugin ,在jquery的原型上添加新方法，這樣jquery的所有實(shí)例化對象都可以調(diào)用該方法，實(shí)現(xiàn)自定義對象所構(gòu)建的功能。

2、在方法內(nèi)部 ：

(1)new 出來一個對象的實(shí)例化對象,并執(zhí)行所需的方法 (在new的時(shí)候,把相應(yīng)的參數(shù)傳給構(gòu)造函數(shù))。

(2)最后用return? 把this返回，從而實(shí)現(xiàn)jquery方法的鏈?zhǔn)秸{(diào)用。

四、封裝后插件的使用

（1）先引入jquery.js。

（2）再引入封裝好的jquery插件。

（3）根據(jù)需要，用jquery選擇器選擇需要實(shí)現(xiàn)功能的dom，直接調(diào)用插件中的方法。