谈谈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

此代码仅供进修运用,发起不要在生产中运用

    原文作者:nicezhu
    原文地址: https://segmentfault.com/a/1190000009195482
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞