jQuery从入门到精通 浅谈 jQuery 的实现
沉沙 2018-06-08 来源 : 阅读 1118 评论 0

摘要:在PC端操作dom,jQuery必不可少。但是在移动端引入jQuery就显得不合适,一是文件太大,二是不支持一些触摸。zepto.js是移动端的jQuery,体积很小,支持触摸。该如何实现这样的写法呢?

在PC端操作dom,jQuery必不可少。但是在移动端引入jQuery就显得不合适,一是文件太大,二是不支持一些触摸。zepto.js是移动端的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。


本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程