jQuery是一個(gè)很豐富的javascript庫撇簿,說到庫聂渊,自然就想到了框架差购,那么庫和框架有什么區(qū)別呢?
1汉嗽,庫是對各種方法的封裝欲逃,我們直接調(diào)用方法即可使用;
2饼暑,框架提供了代碼的書寫規(guī)則稳析,我們按照這些規(guī)則去書寫代碼,框架就會幫我們實(shí)現(xiàn)相應(yīng)的功能弓叛,所以框架要更加強(qiáng)大彰居。
雖然jQuery提供了很多的方法,但是不可能滿足我們所有的需求撰筷;下面來說一下jQuery擴(kuò)展方法的實(shí)現(xiàn):
首先說$.extend() : 它是對 jQuery本身 的方法拓展
(1) $.extend( obj , obj1 ,obj2...) ------- 此處是將obj1 ,obj2 ..... 合并到obj中陈惰,合并后返回obj ;也即obj將會擁有obj1,obj2...對象的屬性和方法
(2) $.extend(obj) ----- 是將obj合并到 jQuery 的全局對象中 ,所以 jQuery 的實(shí)例對象是不能繼承obj的屬性和方法的毕籽;
再說$.fn.extend(obj)? ----- 是將obj合并到j(luò)Query的實(shí)例對象中抬闯,但是jQuery本身不能使用obj的屬性和方法。
上面的說法還是有點(diǎn)不太容易理解关筒,我用了一個(gè)比較淺顯易懂的例子來說明溶握,如果有錯(cuò)誤,還請大神指教:
Person 構(gòu)造函數(shù) : function? Person() {? ? ? this.name = "zs" ; this.age = 18 ;? ?}?
實(shí)例化對象 :var p = new Person() ;
i : 給構(gòu)造函數(shù)添加屬性和方法 :Person.say = function() {? alert(1)? ?};
? ? 然后讓 p 調(diào)用此方法 : p.say() ------? 最終的結(jié)果會報(bào)錯(cuò)蒸播,所以p無法繼承Person的擴(kuò)展方法say;
此處相當(dāng)于 $.extend() 擴(kuò)展方法
ii : 給實(shí)例化對象添加屬性和方法: p.eat = function() {? alert(2)? ?};
? ?然后讓 Person 調(diào)用此方法: Person.eat()? ----- 同樣會報(bào)錯(cuò)睡榆,Person構(gòu)造函數(shù)無法使用實(shí)例化對象p 擴(kuò)展的方法eat ,此處相當(dāng)于$.fn.extend()擴(kuò)展方法
在實(shí)際的工作中袍榆,我們使用$.fn.extend()方法較多肉微,因?yàn)檫@是給 $的原型拓展的方法,$實(shí)例對象可以繼承原型中所有的屬性和方法蜡塌。
下面講一個(gè)用$.fn.extend()方法實(shí)現(xiàn) 頁面中調(diào)用 $(dom).fn.color ( { "color" : "blue" } )即可實(shí)現(xiàn)給dom元素添加顏色:
$.fn.color = function( option ) {
var styleObj = $.extend({ },{ "color" : "red" } , option ) -----// 將option(我們調(diào)用時(shí)傳遞的樣式對象) 和默認(rèn)樣式{ "color" : "red" }合并到一個(gè)空對象中并返回給到styleObj碉纳;如果沒有傳參,采用默認(rèn)樣式馏艾。
$(this).css ( styleObj );
}
$(dom).fn.color( { "color" : "blue" } )