zepto源码研究之$如何实现?
程序员文章站
2022-04-19 18:45:00
在zepto中,$作为一个选择器而存在,它接收一个字符串,返回一个选择器的数组,并且这个数组有一个属性,叫selector。
通过研究源码,zepto的实现步骤有这么几步:...
在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()还实现了其他的一些东西。
推荐阅读
-
Android应用程序四大组件之使用AIDL如何实现跨进程调用Service
-
Vue源码解读之Component组件注册的实现
-
vue如何实现observer和watcher源码解析
-
jQuery源码二之extend的实现
-
Java 源码剖析如何实现动态代理
-
SpringBoot 源码解析 (七)----- Spring Boot的核心能力 - SpringBoot如何实现SpringMvc的?
-
Vue源码解析之Template转化为AST的实现方法
-
.Net语言Smobiler开发之如何在手机上实现表单设计
-
ThinkPHP6源码:从Http类的实例化看依赖注入是如何实现的
-
微信小程序之侧边栏滑动实现过程解析(附完整源码)