jQuery源碼探索之路(3)--extend的實現(xiàn)

  1. 自己最近在學(xué)習(xí)一些js的插件的寫法,那么當(dāng)然就繞不開jquery,于是自己就學(xué)習(xí)中遇到的一些問題做些總結(jié)和記錄
  1. 自己也是在學(xué)習(xí)過程中,有問題請各位指出,希望大伙能多多支持,給給star,點點贊唄,github地址

在JQ中,extend是個一個很強大的功能,實際的源碼中很多模塊方法都是通過extend擴(kuò)展方法加入到JQ原型對象上去的,同時extend給后續(xù)的開發(fā)者提供了很好的接口,使得層出不窮的JQ插件出現(xiàn),極大的豐富了JQ的使用場景。

先寫個最簡單的

extend其實說白了就是復(fù)制,但在js中對象作為參數(shù)的傳遞是直接傳遞而不會重新構(gòu)建一個對象再傳過去,比如

var a = {
  name:'aaa'
};
var b = a;
b.name = 'bbb';
console.log(a.name); //bbb

所以我們?yōu)榱藦?fù)制一個對象,一般需要自己創(chuàng)建一個新對象,然后通過遍歷,賦值來達(dá)到復(fù)制效果,例:

function copy(target,source){
  for(var name in source){
    target[name] = source[name];
  }
  return target;
}

簡單的JQ extend方法

Ye.extend = function(){
  //我們這里通過arguments來獲取傳進(jìn)來的參數(shù)
  var source = arguments[0];
  for(var name in souce){
    //復(fù)制到實例本身上
    this[name] = source[name];
  }
}
Ye.extend({
  add:function(){
    console.log('add');
  }
})

但是我們不僅要擴(kuò)展靜態(tài)方法,還要擴(kuò)展實例上的方法,所以

Ye.prototpye.extend = Ye.extend = function(){
   //...代碼
}

然后就可以擴(kuò)展JQ插件了

$.prototype.extend({
  test:function(){
    console.log('實例方法');
  }
})
$.extend(){
  test:function(){
    console.log('靜態(tài)方法');
  }
}
$.test();  //靜態(tài)方法
$("#id").test();//實例方法

當(dāng)做復(fù)制方法使用

有時候我們并不是想擴(kuò)展JQ對象,而是想將一個對象整合到另一個對象上去,所以我們可以對extend方法做一個判斷

Ye.prototype.extend = Ye.extend = function(){
    if(arguments.length == 1){
       var source = arguments[0];
       for(var name in souce){
          //復(fù)制到實例本身上
          this[name] = source[name];
      }
    }else {
      var target = arguments[0];
      var source = arguments[1];
      for(var name in source){
        target[name] = source[name];
      }
      return target;
    }
}

//做復(fù)制方法調(diào)用時
$.extend(target,source);

這樣我們的extend方法就完善啦!!

附:既然看都看完了,麻煩各位看官老爺點個贊,給個star唄,源碼地址:https://github.com/LY550275752/my-js-plug/blob/master/Ye.js
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,596評論 25 708
  • 自己最近在學(xué)習(xí)一些js的插件的寫法,那么當(dāng)然就繞不開jquery,于是自己就學(xué)習(xí)中遇到的一些問題做些總結(jié)和記錄 自...
    醬油_閱讀 1,085評論 3 7
  • 早上好,清醒的一天,耳邊聽著優(yōu)美的英文歌曲,很喜歡never say never。這周開始嘗試自己的學(xué)習(xí)計劃,即是...
    小馬克Wel閱讀 178評論 0 0
  • 大家好,在這里給大家推薦一部漫畫,既幽默又暖心,書名為《你今天真好看》,下面是我的臨摹~(別嫌棄哈) 求贊!
    子衿頤閱讀 304評論 1 2
  • 覺醒期:學(xué)習(xí)任何新技巧的初始階段必定是“開始覺醒”。你首先學(xué)到的一定是“哇!這里有一種更棒而且更新的溝通方法” 笨...
    從心出發(fā)_Amy閱讀 317評論 0 0