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

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

在JQ中,extend是個一個很強(qiáng)大的功能漓概,實際的源碼中很多模塊方法都是通過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方法就完善啦6敛稹擅憔!

附:既然看都看完了,麻煩各位看官老爺點個贊檐晕,給個star唄暑诸,源碼地址:https://github.com/LY550275752/my-js-plug/blob/master/Ye.js
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市辟灰,隨后出現(xiàn)的幾起案子个榕,更是在濱河造成了極大的恐慌,老刑警劉巖芥喇,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件西采,死亡現(xiàn)場離奇詭異,居然都是意外死亡继控,警方通過查閱死者的電腦和手機(jī)械馆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來湿诊,“玉大人狱杰,你說我怎么就攤上這事√耄” “怎么了仿畸?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我错沽,道長簿晓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任千埃,我火速辦了婚禮憔儿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘放可。我一直安慰自己谒臼,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布耀里。 她就那樣靜靜地躺著蜈缤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪冯挎。 梳的紋絲不亂的頭發(fā)上底哥,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機(jī)與錄音房官,去河邊找鬼趾徽。 笑死,一個胖子當(dāng)著我的面吹牛翰守,可吹牛的內(nèi)容都是我干的孵奶。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蜡峰,長吁一口氣:“原來是場噩夢啊……” “哼拒课!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起事示,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎僻肖,沒想到半個月后肖爵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡臀脏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年劝堪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揉稚。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡秒啦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出搀玖,到底是詐尸還是另有隱情余境,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站芳来,受9級特大地震影響含末,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜即舌,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一佣盒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧顽聂,春花似錦肥惭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嗦明,卻和暖如春笼沥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背娶牌。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工奔浅, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人诗良。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓汹桦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鉴裹。 傳聞我的和親對象是個殘疾皇子舞骆,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,037評論 2 355

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

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