频道栏目
首页 > 资讯 > HTML/CSS > 正文

zepto源码研究之$如何实现?

18-04-24        来源:[db:作者]  
收藏   我要投稿

在zepto中,$作为一个选择器而存在,它接收一个字符串,返回一个选择器的数组,并且这个数组有一个属性,叫selector。

这里写图片描述

通过研究源码,zepto的实现步骤有这么几步:

第一步,定义了一个 $ 的变量,这个变量属于window,并且这个变量的值是Zepto。

"$" in window || window.$ = Zepto;

那么,Zepto到底是什么?其实本质上,它是使用模块模式实现的一个函数。内部核心源码如下:

var Zepto = (function(){
    var $ = function(selector, context){
        return document.querySelectorAll(selector);
    }
    return $;
})();

这就是zepto选择器$实现的核心源码!!

在这里,仅仅是使用 querySelectorAll 方法实现了一个简单的选择器。但是在zepto源码中,实现的方式要比这个复杂的多,它是通过return 一个zepto.init()的方法来实现的。

var Zepto = (function(){
    var zepto = {};
    zepto.init = function(selector, context){
        //code
    }
    var $ = function(selector, context){
        return zepto.init(selector, context);
    }
    return $;
})();

它的实现就是通过这样的方式来进行的。

然后在zepto.init的方法来实现选择器。但是,此外zepto.init()还实现了其他的一些东西。

相关TAG标签
上一篇:Spring入门教程之注解方式管理Bean
下一篇:ETF市场发展到了好的时机,准备从5个方面来推动ETF市场的发展
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站