JQ外掛程式封裝造輪子

檢視jq**，發現好多方法都是使用$.fn來封裝方法，但fn又是什麼，控制台console後發現都是jq的方法

$.prototype===$.fn,結果為true

prototype：可以為物件新增方法和屬性。

這樣就可以理解為給jq原型新增方法及屬性。

自己寫個小例子：

1.實現字串轉int方法（同parseint()）

html:

js:

//防止全域性變數汙染，影響其他外掛程式
(function($)
})(jquery)

使用

$('input').isnum('0999');//999
$('input').isnum('99s');//nan

2.求最大div高度

html:

js:

// 求最寬的div

(function($))
return max;
}})(jquery)
alert($('div').max_w())

如上面如果封裝方法過多，看起來會非常亂，這時可以使用jq的extend。

jquery.extend( target [, object1 ] [, objectn... ] )

jquery.extend( [ deep ], target , object1 [, objectn... ] )

引數描述

deep 可選/boolean型別指示是否深度合併物件，預設為false。如果該值為true，且多個物件的某個同名屬性也都是物件，則該"屬性物件"的屬性也將進行合併。

target object型別目標物件，其他物件的成員屬性將被複製到該物件上。 object1 可選/object型別第乙個被合併的物件。

objectn 可選/object型別第n個被合併的物件。

個人理解extend的作用就是把好多物件合併到乙個物件裡面，目前有三個以上引數，第乙個是否深度合併，第二個合併到的目標，第三個被合併的物件，三個以後同第三個以此類推，通常只寫一種引數即可：合併的object

下面做個測試：

var a = function()
var b = function()
var c = function()
var f = new object;
//把a，b，c放到乙個物件合集然後合併到f物件裡
$.extend(f,)
console.log(f);

結果：

如果要合併到jquery物件中上面的$.extend(f,)需要把f改為$或者jquery,也可以直接省略該引數$.extend()，開發中就可以直接使用$.extend(),這樣就可以對jq全域性物件進行新增方法了.

一般開發中都是對某個例項進行新增方法，再看下第一天的test**

(function($)

})(jquery)

都是基於fn例項上新增方法，所以使用$.fn.extend（外掛程式開發經常使用）

對上面的方法進行改寫：

(function($),
isnan:function()
})})(jquery)
$('input').isnum('test')

總結：

在封裝外掛程式時常用$.fn.extend（對dom操作時）.在封裝像parsint這樣的方法時候適用於$.extend

上面差不多就滿足了外掛程式復用的基本需求了，但是，當你想在原來基礎上新增內容，或者修改變數時，就需要傳參來解決了。

寫個測試：給文件div設定高度，寬度，背景及自定義css

html:123

4js:

(function($),options);
this.each(function());}})
})(jquery)
$('div').e_width()

宣告乙個變數settins來初始化預設資料（即沒有傳參的預設狀態），然後將opions形參合併到settins，最後作用到css中，所以在例項中新增引數就可以合併到settings中，完成自定義css，而且繼續傳引數會代替前面初始設定的值。

(function()}},
unrepeat(arr)}}
return arr;
},isnum(str)
})})();

JQ外掛程式封裝造輪子

封裝基於jq彈窗外掛程式

jq 外掛程式寫法

JQ 日期聯動外掛程式

JQ外掛程式封裝造輪子

封裝基於jq彈窗外掛程式

jq 外掛程式寫法

JQ 日期聯動外掛程式

相關推薦