- jQuery方法的調(diào)用方式：
//一般是這兩種
$('div').html();
$.ajax();
從jQuery的使用方法來(lái)猜測(cè)它的編寫方式彻磁。
jQuery插件方式如何編寫奔誓？
-
第一步：搭Query插件框架，找到我們的目的键痛。
思路：通過(guò)立即執(zhí)行函數(shù)內(nèi)生成Query的構(gòu)造函數(shù)然后賦值給我們的全局對(duì)象內(nèi)货矮，然后在全局對(duì)象下使用$或yQuery綁定原生dom對(duì)象羊精，這樣我們通過(guò)yQuery綁定的原生dom對(duì)象都能使用yQuery.prototype下的方法。
注：不直接在全局對(duì)象下創(chuàng)建yQuery對(duì)象是為了防止壓縮代碼時(shí)重命名window導(dǎo)致錯(cuò)誤囚玫。
現(xiàn)象：現(xiàn)在我們?cè)跒g覽器下驗(yàn)證真有$這個(gè)函數(shù)喧锦，并且可以通過(guò)構(gòu)造函數(shù)傳遞原生對(duì)象。但寫法不是$('div')抓督。 -
第二步： 試試return燃少，我們需要在全局下直接返回一個(gè)對(duì)象
思路：我們需要直接返回一個(gè)對(duì)象，試著在yQuery里return一下看看結(jié)果铃在。
現(xiàn)象：真的在全局下返回了一個(gè)對(duì)象,還調(diào)用到了我們想要的方法阵具，但是我們只是返回了yQuery.prototype。
yQuery.prototype是一個(gè)公共區(qū)域定铜，綁定任何元素dom對(duì)象返回的都是同樣一個(gè)東西阳液，離結(jié)果很遠(yuǎn)。
-
第三步：這次我們不返回公共區(qū)域揣炕，返回公共區(qū)域下的對(duì)象
思路：得到了個(gè)對(duì)象帘皿，但沒(méi)返回值，試試this畸陡。
-
第四步：加上this看看
思路：試一下this看看返回了什么鹰溜，this返回的是函數(shù)的調(diào)用者。
現(xiàn)象：結(jié)果很眼熟丁恭，好像就是yQuery.prototype曹动，和第二步的結(jié)果一樣。牲览。但我們好像更接近了目標(biāo)墓陈。 -
第五步：this返回的是函數(shù)的調(diào)用者，但this在構(gòu)造函數(shù)里返回的是一個(gè)實(shí)例
思路：我們想做的應(yīng)該是后者,這樣我們每次綁定原生dom的時(shí)候返回的都是一個(gè)實(shí)例第献，他們相互獨(dú)立但又使用prototype下的公共區(qū)域跛蛋。
現(xiàn)象：這一步不僅加了new，還加了紅框里的兩句話痊硕，我們需要一張圖來(lái)解釋
看上圖前我們先了解下我們的目的有兩個(gè)：1創(chuàng)建各不相同的實(shí)例對(duì)象（完成）2使用我們yQuery.prototype下的公共方法。
解釋：通過(guò)原型鏈和繼承的知識(shí)我們知道我們新創(chuàng)建的這個(gè)實(shí)例對(duì)象的__prto__指向的是他的構(gòu)造函數(shù)下的prototype押框，也就是yQuery.prototype.init.prototype,是一個(gè)null的空對(duì)象岔绸。而我們需要的方法在yQuery.prototype，那么我們通過(guò)yQuery.prototype.init.prototype = yQuery.prototype使我們新創(chuàng)建的實(shí)例對(duì)象可以擁有yQuery.prototype下的方法。并且為了內(nèi)部正確我們constructor: yQuery讓它指向正確盒揉。
constructor: yQuery
yQuery.prototype.init.prototype = yQuery.prototype; -
jQuery插件的方法是如何實(shí)現(xiàn)的晋被？
通過(guò)上面的步驟我們完成了jQuery插件核心的構(gòu)成，但jQuery有兩種使用方法$('div').addClass()和$.ajax()刚盈，這兩類方法分布的位置是不一樣的
$('div').addClass()類型方法處于的位置
$.ajax()類型方法處于的位置
實(shí)現(xiàn)： 在內(nèi)部定義一個(gè)extend方法羡洛，作用是確定對(duì)象是否存在，如果不存在就存入extend方法的調(diào)用者藕漱。這樣我們就只需要在yQuery.prototype里留下初始的構(gòu)造函數(shù)欲侮，公共方法都放在yQuery.prototype.extend里面
函數(shù)里的this表示調(diào)用者，不要想不通- -
- jQuery如何與其他插件防止沖突肋联？
方法一：jQuery.noConflict();然后就不用$
方法二：把jQuery傳遞到函數(shù)內(nèi)使用$
方法二
noConflict()的原理：這里的_$是個(gè)臨時(shí)變量并且為undefined威蕉，當(dāng)執(zhí)行時(shí)window下的$就被賦值為undefined了，window下就jQuery的$就失效了
noConflict()源碼
- jQuery鏈?zhǔn)秸{(diào)用是什么橄仍？是如何實(shí)現(xiàn)的韧涨？
- 鏈?zhǔn)秸{(diào)用：$('div').addClass().html()，原理很簡(jiǎn)單侮繁，就是在我們的方法的最后return this虑粥。這里的this是調(diào)用此方法的對(duì)象$('div').addClass()，addClass()里return this出了$('div')對(duì)象宪哩，然后繼續(xù)調(diào)用html()方法娩贷。
return this 返回了調(diào)用此方法的對(duì)象
本博客版權(quán)歸 本人和饑人谷所有，轉(zhuǎn)載需說(shuō)明來(lái)源
