JQuery 原始碼解析 extend 詳解

2022-07-31 19:36:11 字數 1956 閱讀 1473

前言:最近想重寫乙個dropdown外掛程式,於是想到了使用jquey實現外掛程式,於是重溫了一波$.extend()的知識,然後總結了這篇筆記

正文:

$.extend(src)

該方法將src合併到jquery的例項物件中去 

下面是乙個例子:

var newsrc=$.extend({},src1,src2,src3...)//

也就是將"{}"作為dtarget 目標引數

這樣就可以將src1,src2,src3...進行合併,然後將合併結果返回給newsrc了。如下例:

var result=$.extend({},,)

那麼合併後的結果,同名屬性會被後面的物件所覆蓋

1

console.log(result)

2 >>

在es6中,實現這種方法有一種更為簡單的方法,利用點擴充套件運算子

1

var person1=

2var person2=)

34 person1=

第乙個引數boolean代表是否進行深度拷貝,其餘引數和前面介紹的一致,看下面這個例子

1

var object1 =,

4 cherry: 975};

6var object2 =,

8 durian: 1009};

1011

//merge object2 into object1

12$.extend( object1, object2 );

1314

console.log(json.stringify( object1 );

經過淺拷貝後,banana屬性是物件型別,屬於引用型別,指向object2的banana物件,所以沒有了weight屬性

我們再看一下,如果是深度拷貝,則輸出結果為:

1 $.extend( true

, object1, object2 );

2console.log(json.stringify( object1 );

2. $.fn.extend(src)

該方法就是將src合併到jquery的全域性物件中去

1jquery.fn.extend();6},

7 uncheck: function

() );11}

12});

1314

//use the newly created .check() method

15 $( "input[type='checkbox']" ).check();

擴充套件,高階

利用這個函式,我們可以來寫jquery外掛程式

1

var dropdown= function

(element) );

9 self.$element.on('mouseenter',function

());12}

13//

定義haorooms的方法

14 dropdown.prototype =,

18 close:function

($target)

21 }

$.fn.myplugin = function

()

外掛程式的使用

$(function

() )

然後用乙個即使匿名函式,將我們的**包裹起來,防止汙染全域性環境、防止其他地方使用到了 我們自定義外掛程式的物件。

;(function

($,window,document,undefined))(jquery,window,document);

jquery原始碼解析

jquery 原始碼解析,參看 是jquery 3.0版本 入口jquery.js包含core.js,以及jquery的各類功能的組合,包括selector,ajax等等 然後將jquery物件匯出到全域性的jquery符號,以及 符號 確定jquery物件是個函式,這個函式生成出來的資料是物件 建...

jquery原始碼解析1

學了很久的js也寫了很長時間的jquery了,這裡來以學習的態度來看大牛的思想和架構。使用的是當前最新版本 3.1.1 就不考慮煩人的ie 6 7 8了,輕鬆愉快。其實一上來不知所措,這都是啥?function global,factory return factory w else typeof ...

JQuery原始碼解析(一)

寫在前面 本 第一眼看jq的源 或許會感到混亂和沒頭緒,特別是會卡在36行的 那裡遲遲找不到 function window,noglobal typeof window undefined window this,function window,noglobal return factory w ...