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