最近寫了些移動端的專案，在PC端操作dom，jQuery必不可少。但是在移動端引入jQuery就顯得不合適，一是檔案太大，二是不支援一些觸控。zepto.js是移動端的jQuery，體積很小，支援觸控。在用這些庫的時候，經常會想該如何實現這樣的寫法呢？看了很多jquery原始碼的分析，又看了很多例項，終於算是明白了。
$(selector)是如何實現的？
原生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物件！！！
下面的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))就會發現length屬性
完整程式碼：簡易的jquery實現。
mTouch
增加手勢觸控
程式碼參考
你不需要jQuery
基於微積分的手勢庫
一：導言
有些WEB開發者，會引用一個JQuery類庫，然後在網頁上寫一寫("#")，("#")，(".")，寫了幾年就對別人說非常熟悉JQuery。我曾經也是這樣的人，直到有一次公司裡的技術交流，我才改變了自己對自己的看法。
二：普及JQuery知識
知識1：用JQuery寫外掛時，最核心的方法有如下兩個：
$.extend(object) 可以理解為JQuery 新增一個靜態方法。
$.fn.extend(object) 可以理解為JQuery例項新增一個方法。
基本的定義與呼叫：
/* $.extend 定義與呼叫
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("執行方法一"); } });
$.fun1();
/* $.fn.extend 定義與呼叫
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("執行方法2"); } });
$(this).fun2();
//等同於
$.fn.fun3 = function () { alert("執行方法三"); }
$(this).fun3();複製程式碼知識2:jQuery(function () { }); 與 (function ($) { })(jQuery);的區別：
jQuery(function () { });
//相當於
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相當於
var fn = function ($) { };
fn(jQuery);複製程式碼jQuery(function () { });是某個DOM元素載入完畢後執行方法裡的程式碼。
(function ($) { })(jQuery); 定義了一個匿名函式，其中jQuery代表這個匿名函式的實參。通常用在JQuery外掛開發中，起到了定義外掛的私有域的作用。
三：開發JQuery外掛標準結構
1，定義作用域：定義一個JQuery外掛，首先要把這個外掛的程式碼放在一個不受外界干擾的地方。如果用專業些的話來說就是要為這個外掛定義私有作用域。外部的程式碼不能直接訪問外掛內部的程式碼。外掛內部的程式碼不汙染全域性變數。在一定的作用上解耦了外掛與執行環境的依賴。說了這麼多，那要怎樣定義一個外掛的私有作用域？
//step01 定義JQuery的作用域
(function ($) {
})(jQuery);複製程式碼別小看了這個作用域，就像c#定義一個類的class關鍵字一樣重要。
2，為JQuery擴充套件一個外掛：當定義好了JQuery的作用域後，最核心也是最迫切的一步就是為這個JQuery的例項新增一個擴充套件方法。首先我們為這個Jqury外掛命名一個方法，叫easySlider，當在呼叫這個外掛的時候，我們可以通過options來給這個外掛傳遞一些引數。具體的定義方法看如下程式碼：
//step01 定義JQuery的作用域
(function ($) {
//step02 外掛的擴充套件方法名稱
$.fn.easySlider = function (options) {
}
})(jQuery);複製程式碼到現在為止，其實一個最簡單的JQuery外掛就已經完成了。呼叫的時候可以("#domName").easySlider({})，或者("#domName").easySlider({})，或者(".domName").easySlider({})或者更多的方式來呼叫這個外掛。
3，設定預設值：定義一個JQuery外掛，就像定義一個.net控制元件。一個完美的外掛，應該是有比較靈活的屬性。我們來看這段程式碼：<asp:TextBox ID="TextBox1" Width="20" Height="100" runat="server"></asp:TextBox>。 TextBox控制元件有Width和Height屬性，使用者在用TextBox時，可以自由的設定控制元件的Height和Width，也可以不設定值，因為控制元件自身有預設值。那準備開發一個JQuery外掛時，在使用者未指定屬性時，應該有預設值，在JQuery可以分兩步實現這樣的定義,看如下程式碼step03-a，step03-b。
//step01 定義JQuery的作用域
(function ($) {
//step03-a 外掛的預設值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 外掛的擴充套件方法名稱
$.fn.easySlider = function (options) {
//step03-b 合併使用者自定義屬性，預設屬性
var options = $.extend(defaults, options);
}
})(jQuery);複製程式碼做程式的人都喜歡創新，改改變數名呀，換一個行呀這些。當看到用var defaults = {}來表示一個預設屬性時，在自己寫JQuery外掛時就想著與眾不同，所以用var default01 ={} ，var default02 ={}來表示預設屬性了。然後預設屬性名五花八門，越來越糟。所以建議在寫JQuery外掛時，定義預設屬性時，都用defaults變數來代表預設屬性，這樣的程式碼更具有可讀性。
有人看到這行程式碼：var options = $.extend(defaults, options)，皺起眉頭，表示不解。那我們先來看如下程式碼：
var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };
var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);複製程式碼把程式碼拷貝到開發環境中，分別看一下a,b,c,d的值，就明白了var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，並把值賦給了options。
在外掛環境中，就表示使用者設定的值，覆蓋了外掛的預設值；如果使用者沒有設定預設值的屬性，還是保留外掛的預設值。
4，支援JQuery選擇器：JQuery選擇器，是JQuery的一個優秀特性，如果我們的外掛寫來不支援JQuery選擇器，確實是一個不小的遺憾。如了使自己的JQuery外掛能支援多個選擇器，我們的程式碼應該這樣定義：
//step01 定義JQuery的作用域
(function ($) {
//step03-a 外掛的預設值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 外掛的擴充套件方法名稱
$.fn.easySlider = function (options) {
//step03-b 合併使用者自定義屬性，預設屬性
var options = $.extend(defaults, options);
//step4 支援JQuery選擇器
this.each(function () {
});
}
})(jQuery);複製程式碼5，支援JQuery的連結呼叫：上邊的程式碼看似完美了，其實也不那麼完美。到目前為止還不支援連結呼叫。為了能達到連結呼叫的效果必須要把迴圈的每個元素return
//step01 定義JQuery的作用域
(function ($) {
//step03-a 外掛的預設值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 外掛的擴充套件方法名稱
$.fn.easySlider = function (options) {
//step03-b 合併使用者自定義屬性，預設屬性
var options = $.extend(defaults, options);
//step4 支援JQuery選擇器
//step5 支援鏈式呼叫
return this.each(function () {
});
}
})(jQuery);複製程式碼這樣的定義才能支援連結呼叫。比如支援這樣的呼叫：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });
6，外掛裡的方法：往往實現一個外掛的功能需要大量的程式碼，有可能上百行，上千行，甚至上萬行。我們把這程式碼結構化，還得藉助function。在第一點已經說了，在外掛裡定義的方法，外界不能直接呼叫，我在外掛裡定義的方法也沒有汙染外界環境。現在就嘗試著怎麼樣在外掛裡定義一些方法：
//step01 定義JQuery的作用域
(function ($) {
//step03-a 外掛的預設值屬性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在外掛裡定義方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 外掛的擴充套件方法名稱
$.fn.easySlider = function (options) {
//step03-b 合併使用者自定義屬性，預設屬性
var options = $.extend(defaults, options);
//step4 支援JQuery選擇器
//step5 支援鏈式呼叫
return this.each(function () {
//step06-b 在外掛裡定義方法
showLink(this);
});
}
})(jQuery);複製程式碼步驟step06-a：在外掛裡定義了一個方法叫showLink(); 這個方法在外掛外是不能直接呼叫的，有點像C#類裡的一個私有方法，只能滿足外掛內部的使用。步驟step06-b演示了怎樣呼叫外掛內部的方法。
四：總結
開發只要形成了標準，然後再去閱讀別人的程式碼就沒有那麼吃力了。感覺 贊 的就幫忙頂上去，讓更多了了解開發JQuery外掛開發的標準。