成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

理解jquery的$.extend

CarterLi / 3215人閱讀

摘要：當(dāng)目標(biāo)對(duì)象為空時(shí)，對(duì)象將會(huì)被默認(rèn)為目標(biāo)對(duì)象，這時(shí)相當(dāng)于我們?cè)诘拿臻g下添加新的功能，這是常見(jiàn)的插件開(kāi)發(fā)模式。以上皆個(gè)人愚見(jiàn)，請(qǐng)笑納

理解jquery的$.extend

今日在寫(xiě)js插件過(guò)程中需要使用擴(kuò)展對(duì)象的方法，便想到了jQuery.extend這個(gè)方法，但又不甚了解，故去查了下官方API文檔，自己也進(jìn)行了相應(yīng)嘗試，現(xiàn)將所得總結(jié)如下：

$.extend和$.fn.extend的相關(guān)用法

jQuery.fn

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};

由上述代碼可以看出$.fn是相當(dāng)于$.prototype的，而jQuery是一個(gè)封裝很好的類(lèi)，因此當(dāng)我們使用$.fn時(shí)相當(dāng)于給jQuery這個(gè)類(lèi)添加成員函數(shù)，添加后jQuery類(lèi)的實(shí)例即可以使用這個(gè)“成員函數(shù)”，例如當(dāng)我們使用$("#input-demo")時(shí)相當(dāng)于創(chuàng)建了一個(gè)jQuery實(shí)例，當(dāng)我們要開(kāi)發(fā)一個(gè)插件時(shí)，例如做一個(gè)特殊的編輯框，當(dāng)它獲取焦點(diǎn)時(shí)彈框顯示當(dāng)前輸入框的內(nèi)容，我們可以做如下操作：

$.fn.extend({
  alertContentWhenFocus: function() {
    $(this).on("focus", function() {
      alert($(this).val());
    )
  }
})
$("#input-demo").alertContentWhenFocus();

$.extend(object)

當(dāng)想給jQuery類(lèi)添加靜態(tài)方法時(shí)，我們可以做如下操作：

$.extend({
  min: function(x, y) {return x < y ? x : y;},
  max: function(x, y) {return x > y ? x : y;}
})

jQuery.extend([deep], target , object1 , objectN );

該方法可用于一個(gè)或其它多個(gè)對(duì)象來(lái)擴(kuò)展其中一個(gè)對(duì)象，并返回被擴(kuò)展的對(duì)象，當(dāng)我們提供兩個(gè)或兩個(gè)以上的對(duì)象給$.extend時(shí)，對(duì)象所有的屬性將會(huì)添加到目標(biāo)對(duì)象,因此目標(biāo)對(duì)象的參數(shù)將會(huì)被修改，若我們想保留原對(duì)象，我們可以傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象。當(dāng)目標(biāo)對(duì)象為空時(shí)，jQuery對(duì)象將會(huì)被默認(rèn)為目標(biāo)對(duì)象，這時(shí)相當(dāng)于我們?cè)趈Query的命名空間下添加新的功能，這是常見(jiàn)的插件開(kāi)發(fā)模式。

deep:
可選屬性,當(dāng)其值為true時(shí)，遞歸合并（又叫做深拷貝），當(dāng)缺省時(shí)默認(rèn)為false，是不會(huì)進(jìn)行遞歸的合并操作的，但不可第一個(gè)參數(shù)傳遞false

target:
目標(biāo)對(duì)象，將附加對(duì)象所包含的額外屬性傳遞給目標(biāo)對(duì)象作為新的參數(shù)，如果它是唯一的參數(shù)，這也為著目標(biāo)參數(shù)被省略，此時(shí)，jQuery對(duì)象本身將被默認(rèn)為目標(biāo)對(duì)象，將擴(kuò)展jQuery的命名空間，當(dāng)我們想向jQuery中添加新函數(shù)時(shí)需要用到

object1:一個(gè)對(duì)象，它包含額外的屬性合并到第一個(gè)參數(shù) objectN:包含額外的屬性合并到第一個(gè)參數(shù)

實(shí)例

var object = $.extend({}, object1, object2);

合并object1和object2對(duì)象，并在不修改object1對(duì)象的情況，合并后結(jié)果將會(huì)賦值給object

var settings = {first:"hello", second: "world"};
var options = {first:"hello", second: "JavaScript",third: "nodeJs"};
var results = $.extend({}, settings, options);

輸出：results 為 {first: "hello", second: "JavaScript", third: "nodeJs"}

$.extend(obj1,obj2)

合并兩個(gè)對(duì)象，并修改第一個(gè)對(duì)象

var obj1 = {first: 1, second: {height: 178, weight: 70,length:100}};
var obj2 = {second: {height:180, weight:65, width: 90}, third: 90};
$.extend(obj1, obj2);

輸出結(jié)果為：{first: 1, second: {height:180,weight:65, width: 90}, third: 90}

細(xì)心的讀者可能會(huì)發(fā)現(xiàn)，輸出的結(jié)果和我們預(yù)想的結(jié)果好像有點(diǎn)不同，輸出結(jié)果的second屬性與目標(biāo)對(duì)象的second屬性相比少了length這個(gè)屬性，原因是在這種情況下，$.extend()的合并操作不是遞歸的，這意味著當(dāng)如果目標(biāo)對(duì)象的屬性本身是一個(gè)對(duì)象或者數(shù)組，那么第二個(gè)對(duì)象相同的key屬性的value值將會(huì)覆蓋第一個(gè)對(duì)象的value值，說(shuō)明兩個(gè)對(duì)象相同key的value值不是合并的關(guān)系，而是覆蓋與被覆蓋的關(guān)系。

$.extend(true,obj1,obj2)

當(dāng)?shù)谝粋€(gè)值為true時(shí)，那么在對(duì)象上將會(huì)進(jìn)行遞歸的合并，而不是簡(jiǎn)單的替換關(guān)系了，這樣說(shuō)可能有點(diǎn)深?yuàn)W，下面看個(gè)例子就明白了。

var obj1 = {first: 1, second: {height: 178, weight: 70}};
var obj2 = {second: {height:180, weight: 65, width: 90}, third: 90};
$.extend(true,obj1,obj2)

輸出結(jié)果為:{first: 1, second: Object, third: 90}

有注意的讀者應(yīng)該會(huì)發(fā)現(xiàn)，這個(gè)例子和上述的例子基本是相同的，但結(jié)果卻是我們預(yù)想的結(jié)果了，當(dāng)$.extend()的第一個(gè)參數(shù)為true時(shí)，在對(duì)象執(zhí)行的合并將會(huì)是遞歸的合并，是比較合并的，而不是簡(jiǎn)單的替換與覆蓋。

[后記](méi)：這篇博文同樣花費(fèi)了挺久的時(shí)間，是自己在工作閑暇之余抽空搜尋資料創(chuàng)作的。在撰寫(xiě)的過(guò)程中，我發(fā)現(xiàn)一個(gè)現(xiàn)象，一個(gè)并不難的知識(shí)點(diǎn)，若自己在網(wǎng)上搜尋資料看懂理解并不需要花費(fèi)多少時(shí)間，但若是要將自己所理解撰寫(xiě)成博文卻要難上數(shù)倍，首先要理清自己表達(dá)的思路，要將自己理解的過(guò)程梳理清楚，由淺至深結(jié)合例子將這個(gè)知識(shí)點(diǎn)分析透徹，以求讀者在閱讀這篇文章的過(guò)程中能花費(fèi)更短的時(shí)間讀懂。我不是一個(gè)聰明的人，所以我看明白一個(gè)知識(shí)點(diǎn)需要花費(fèi)的功夫可能會(huì)比其他人更長(zhǎng)些，因此寫(xiě)出來(lái)的東西往往啰嗦些，希望這篇博文對(duì)大家有所幫助。以上皆個(gè)人愚見(jiàn)，請(qǐng)笑納！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88150.html

相關(guān)文章

  • 淺談jQuery.extend()和jQuery.fn.extend()

    摘要：在中并沒(méi)有類(lèi)的概念，不過(guò)為了好解釋或者是思想上的統(tǒng)一。這樣的話(huà)，不論是男人，女人，人等能繼承這個(gè)技能方法了。這樣就可以將進(jìn)行合并，然后將合并結(jié)果返回給了。 最近在看一些jQuery的插件源碼，發(fā)現(xiàn)了jQuery.extend()和jQuery.fn.extend()兩個(gè)方法在插件中用到的頻率非常高，在網(wǎng)上查詢(xún)了下，說(shuō)的要么是不清楚，要么就是不好理解。基于此，我寫(xiě)下自己的一些看些，希望大...

    EasonTyler 評(píng)論0 收藏0

  • jQuery擴(kuò)展

    摘要：傳遞一個(gè)可拓展的默認(rèn)對(duì)象參數(shù)而不是大量的參數(shù)給插件。始終命名空間的方法，事件和數(shù)據(jù)。 jq--CDN jQ -- jQuery源碼解析 1、jQuery.extend() 與 jQuery.fn.extend()把jQuery看成一個(gè)封裝js類(lèi) 這樣好理解$.extend是擴(kuò)展的jQuery這個(gè)類(lèi) 為jQuery類(lèi)添加類(lèi)方法 可以理解為靜態(tài)方法 只跟這個(gè)類(lèi)本身有關(guān) 跟具體的實(shí)例化對(duì)象是...

    hss01248 評(píng)論0 收藏0

  • jQuery結(jié)構(gòu)簡(jiǎn)析

    摘要：構(gòu)成類(lèi)數(shù)組對(duì)象，引入，并使其自增版本信息模擬數(shù)組，即這里構(gòu)成一個(gè)類(lèi)數(shù)組對(duì)象由于這里把作為構(gòu)造函數(shù)調(diào)用，得到一個(gè)對(duì)象，所以我們把作為的原型。 本文簡(jiǎn)單實(shí)現(xiàn)jQuery框架，深入理解javascript對(duì)象。本文的對(duì)照版本是jQuery-1.2.6.js 本文注重jquery結(jié)構(gòu)設(shè)計(jì)思路，并不側(cè)重具體功能的實(shí)現(xiàn)以及兼容性和安全性的部分。 首先建立基本框架如下： (function(wind...

    xiaokai 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十一）：詳細(xì)圖解jQuery對(duì)象，以及如何擴(kuò)展jQuery插件

    摘要：而在構(gòu)造函數(shù)中，返回了的實(shí)例對(duì)象。在中直接返回過(guò)的實(shí)例，這里的是的真正構(gòu)造函數(shù)最后對(duì)外暴露入口時(shí)，將字符與對(duì)等起來(lái)。因此當(dāng)我們直接使用創(chuàng)建一個(gè)對(duì)象時(shí)，實(shí)際上是創(chuàng)建了一個(gè)的實(shí)例，這里的正真構(gòu)造函數(shù)是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早幾年學(xué)習(xí)前端，大家都非常熱衷于研究jQuery源...

    RebeccaZhong 評(píng)論0 收藏0

  • jQuery插件開(kāi)發(fā)

    摘要：所以要先了解一下插件的三種開(kāi)發(fā)方式通過(guò)來(lái)擴(kuò)展通過(guò)向添加新的方法通過(guò)應(yīng)用的部件工廠(chǎng)方式創(chuàng)建第三種方法是用來(lái)開(kāi)發(fā)更高級(jí)的部件的。 jQuery插件開(kāi)發(fā)模式 說(shuō)到j(luò)Query插件的編寫(xiě)，起初我把它當(dāng)做封裝一個(gè)方法那樣簡(jiǎn)單，這顯然是錯(cuò)的，因?yàn)檫@讓我一開(kāi)始完全不知道如何下手去編寫(xiě)一個(gè)插件。所以要先了解一下jQuery插件的三種開(kāi)發(fā)方式： 通過(guò)$.extend()來(lái)擴(kuò)展jQuery 通過(guò)$.fn...

    wall2flower 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<