資訊專欄INFORMATION COLUMN
摘要：最近寫了些移動端的項目，在端操作，必不可少。在用這些庫的時候，經(jīng)常會想該如何實現(xiàn)這樣的寫法呢看了很多源碼的分析，又看了很多實例，終于算是明白了。打開控制臺打印一個就會發(fā)現(xiàn)屬性完整代碼簡易的實現(xiàn)。
$(selector)是如何實現(xiàn)的？最近寫了些移動端的項目，在PC端操作dom，jQuery必不可少。但是在移動端引入jQuery就顯得不合適，一是文件太大，二是不支持一些觸摸。zepto.js是移動端的jQuery，體積很小，支持觸摸。在用這些庫的時候，經(jīng)常會想該如何實現(xiàn)這樣的寫法呢？看了很多jquery源碼的分析，又看了很多實例，終于算是明白了。
原生JS查找dom元素一般會用到這些
var dom = document.getElementById("#dom")
dom.style.color="";//設(shè)置css
//移動端完全可以拋棄jquery，querySelectorAll是一個很強(qiáng)大的選擇器
var d=document.querySelectorAll(".dom")
我們仔細(xì)的想一下，jQuery的這種寫法，$(selector),到底是什么？由原生的js操作dom我們肯定會想到，$(selector)返回的對象中一定是有dom元素？那么如何實現(xiàn)？我們現(xiàn)在看下jQuery的源碼。
??var jQuery = function(selector, context) {
????????// The jQuery object is actually just the init constructor "enhanced"
????????// 看這里，實例化方法 jQuery() 實際上是調(diào)用了其拓展的原型方法 jQuery.fn.init
????????return new jQuery.fn.init(selector, context, rootjQuery);
????}
我們再往下看代碼：
jQuery.prototype.init.prototype = jQuery.prototype;
在一步步找jQuery.prototype.init
jQuery.prototype = {
constructor: jQuery,
length: 0,
selector: "",
init: function (selector) {
}
原來return new jQuery.fn.init(selector, context, rootjQuery);jQuery.fn.init的prototype指向了jquery,這樣也就返回了jQuery對象！！！
下面的init方法和jquery有點不一樣，但也是實現(xiàn)了。首先要考慮以下兩個問題
jQuery(selector)要保存dom元素，當(dāng)元素是個ID選擇器時很容易理解，當(dāng)selector不是id選擇器時，或者就是一個dom標(biāo)簽
如何儲存jQuery(selector)里的dom對象
init方法 init: function (selector) {
var elm;
//當(dāng)沒有選擇的dom元素時，返回對象本身 mTouch(),mTouch(null)
if (!selector) {
return this;
}
if (typeof selector == "object") {
var selector = [selector];
for (var i = 0; i < selector.length; i++) {
this[i] = selector[i];
}
this.length = selector.length;
return this;
} else if (typeof selector == "function") {
mTouch.ready(selector);
return;
}
if (selector.charAt(0) == "#" && !selector.match("s")) {
this.selector = selector;
selector = selector.substring(1);
elm = doc.getElementById(selector);
this[0] = elm;
this.length = 1;
return this;
} else {
elm = doc.querySelectorAll(selector);
var len = elm.length;
for (var i = 0; i < len; i++) {
//保存dom元素
this[i] = elm[i];
}
this.selector = selector;
this.length = len;
return this;
}
}
從上面的代碼，我們可以看到this[i]=ele[i]
jQuery.prototype = {
constructor: mTouch,
//dom元素的個數(shù)
length: 0,
selector: "",
init: function (selector) {
}
}
關(guān)鍵點就是用length標(biāo)記$(selector)中有多少個selector！這樣才可以進(jìn)行dom操作，總之一句話，還是要操作每個選擇的dom。
打開控制臺打印一個console.log($(selector))就會發(fā)現(xiàn)length屬性
完整代碼：簡易的jquery實現(xiàn)。mTouch
代碼參考
你不需要jQuery
此代碼僅供學(xué)習(xí)使用，建議不要在生產(chǎn)中使用
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82701.html
摘要：當(dāng)年的加載在沒有前端工程化之前，基本上是我們是代碼一把梭，把所需要的庫和自己的代碼堆砌在一起，然后自上往下的引用就可以了。而且對于前后端的技術(shù)要求較高，所以對于項目未必是最有效的方案。 當(dāng)年的 js 加載 在沒有 前端工程化之前，基本上是我們是代碼一把梭，把所需要的庫和自己的代碼堆砌在一起，然后自上往下的引用就可以了。 那個時代我們沒有公用的cdn，也沒有什么特別好的方法來優(yōu)化加載j...
摘要：回調(diào)函數(shù)這是異步編程最基本的方法。對象對象是工作組提出的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口。誕生后，出現(xiàn)了函數(shù)，它將異步編程帶入了一個全新的階段。 更多詳情點擊http://blog.zhangbing.club/Ja... Javascript 語言的執(zhí)行環(huán)境是單線程的，如果沒有異步編程，根本沒法用，非卡死不可。 為了解決這個問題，Javascript語言將任務(wù)的執(zhí)行模式分成兩種...
摘要：自我學(xué)習(xí)目前有成千上萬的年輕人在學(xué)習(xí)和開發(fā)，希望獲得一份工作。知道的綁定規(guī)則。知道和原型屬性是什么以及它們的作用。高階函數(shù)了解函數(shù)是中的一級對象，這意味著什么知道從另一個函數(shù)返回函數(shù)是完全合法的。了解閉包和高階函數(shù)允許我們使用的情況。 翻譯原文出處：10 JavaScript concepts you need to know for interviews 之前不是鬧得沸沸揚(yáng)揚(yáng)的大漠窮...
閱讀 3583·2023-04-26 02:10
閱讀 1349·2021-11-22 15:25
閱讀 1687·2021-09-22 10:02
閱讀 924·2021-09-06 15:02
閱讀 3484·2019-08-30 15:55
閱讀 616·2019-08-30 13:58
閱讀 2792·2019-08-30 12:53
閱讀 3072·2019-08-29 12:38
