当前位置： 移动技术网 > IT编程>网页制作>CSS > zepto源码研究之$如何实现？

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

2018年04月25日  | 移动技术网IT编程  | 我要评论

天津彭宇案,旅游咨询,大荔教育网

在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()还实现了其他的一些东西。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网