理解jquery的$.extend

CarterLi 發布于2019-08-21 15:18 / 3196人閱讀

摘要：當目標對象為空時，對象將會被默認為目標對象，這時相當于我們在的命名空間下添加新的功能，這是常見的插件開發模式。以上皆個人愚見，請笑納

理解jquery的$.extend

今日在寫js插件過程中需要使用擴展對象的方法，便想到了jQuery.extend這個方法，但又不甚了解，故去查了下官方API文檔，自己也進行了相應嘗試，現將所得總結如下：

$.extend和$.fn.extend的相關用法

jQuery.fn

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

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

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

$.extend(object)

當想給jQuery類添加靜態方法時，我們可以做如下操作：

$.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 );

該方法可用于一個或其它多個對象來擴展其中一個對象，并返回被擴展的對象，當我們提供兩個或兩個以上的對象給$.extend時，對象所有的屬性將會添加到目標對象,因此目標對象的參數將會被修改，若我們想保留原對象，我們可以傳遞一個空對象作為目標對象。當目標對象為空時，jQuery對象將會被默認為目標對象，這時相當于我們在jQuery的命名空間下添加新的功能，這是常見的插件開發模式。

deep:
可選屬性,當其值為true時，遞歸合并（又叫做深拷貝），當缺省時默認為false，是不會進行遞歸的合并操作的，但不可第一個參數傳遞false

target:
目標對象，將附加對象所包含的額外屬性傳遞給目標對象作為新的參數，如果它是唯一的參數，這也為著目標參數被省略，此時，jQuery對象本身將被默認為目標對象，將擴展jQuery的命名空間，當我們想向jQuery中添加新函數時需要用到

object1:一個對象，它包含額外的屬性合并到第一個參數 objectN:包含額外的屬性合并到第一個參數

實例

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

合并object1和object2對象，并在不修改object1對象的情況，合并后結果將會賦值給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)

合并兩個對象，并修改第一個對象

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);

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

細心的讀者可能會發現，輸出的結果和我們預想的結果好像有點不同，輸出結果的second屬性與目標對象的second屬性相比少了length這個屬性，原因是在這種情況下，$.extend()的合并操作不是遞歸的，這意味著當如果目標對象的屬性本身是一個對象或者數組，那么第二個對象相同的key屬性的value值將會覆蓋第一個對象的value值，說明兩個對象相同key的value值不是合并的關系，而是覆蓋與被覆蓋的關系。

$.extend(true,obj1,obj2)

當第一個值為true時，那么在對象上將會進行遞歸的合并，而不是簡單的替換關系了，這樣說可能有點深奧，下面看個例子就明白了。

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

輸出結果為:{first: 1, second: Object, third: 90}

有注意的讀者應該會發現，這個例子和上述的例子基本是相同的，但結果卻是我們預想的結果了，當$.extend()的第一個參數為true時，在對象執行的合并將會是遞歸的合并，是比較合并的，而不是簡單的替換與覆蓋。

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

云服務器 GPU云服務器 jquery_extend jquery_extend函數云計算的理解 cdn的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88150.html

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

摘要：在中并沒有類的概念，不過為了好解釋或者是思想上的統一。這樣的話，不論是男人，女人，人等能繼承這個技能方法了。這樣就可以將進行合并，然后將合并結果返回給了。最近在看一些jQuery的插件源碼，發現了jQuery.extend()和jQuery.fn.extend()兩個方法在插件中用到的頻率非常高，在網上查詢了下，說的要么是不清楚，要么就是不好理解。基于此，我寫下自己的一些看些，希望大...

EasonTyler 2019-08-20 10:28 評論0 收藏0
jQuery擴展

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

hss01248 2019-08-26 13:35 評論0 收藏0
jQuery結構簡析

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

xiaokai 2019-08-23 11:53 評論0 收藏0
前端基礎進階（十一）：詳細圖解jQuery對象，以及如何擴展jQuery插件

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

RebeccaZhong 2019-08-21 18:31 評論0 收藏0
jQuery插件開發

摘要：所以要先了解一下插件的三種開發方式通過來擴展通過向添加新的方法通過應用的部件工廠方式創建第三種方法是用來開發更高級的部件的。 jQuery插件開發模式說到jQuery插件的編寫，起初我把它當做封裝一個方法那樣簡單，這顯然是錯的，因為這讓我一開始完全不知道如何下手去編寫一個插件。所以要先了解一下jQuery插件的三種開發方式：通過$.extend()來擴展jQuery 通過$.fn...

wall2flower 2019-08-20 11:29 評論0 收藏0