谈谈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
基于微积分的手势库

此代码仅供学习使用，建议不要在生产中使用