談談jquery的實現

最近寫了些移動端的項目，在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有點不同，但也是實現了。首先要考慮如下兩個問題

1. jQuery(selector)要保存dom元素，當元素是個ID選擇器時很容易理解，當selector不是id選擇器時，或者就是一個dom標籤

2. 如何儲存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

此代碼僅供學習使用，建議不要在生產中使用