Zepto源码设计结构剖析
程序员文章站
2022-05-03 22:08:38
...
Zepto 可以说是一个精简版的jQuery,主要针对移动端,使用方法没有太大差别,源码更易读。
基本结构
var Zepto = (function(){
var $,
zepto = {}
// ...省略N行代码...
zepto.init = function(selector, context) {
// 函数内容
}
$ = function(selector, context){
return zepto.init(selector, context)
}
// ...省略N行代码...
return $
})()
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)
所以我们在执行$(‘p’)时,实际上调用了 zepto.init(‘p’)
init函数
拆解一下init函数可得以下结构
zepto.init = function(selector, context) {
var dom
// ...此处省略N行...
// 分情况对dom赋值:
// 1. selector 为空
// 2. selector 是字符串,其中又分好几种情况
// 3. selector 是函数
// 4. 其他情况,例如 selector 是数组、对象等
return zepto.Z(dom, selector)
}
老版Z函数
zepto.Z = function(dom, selector) {
dom = dom || []
dom.__proto__ = $.fn
dom.selector = selector || ''
return dom
}
以上代码中,dom是一个数组,并且把它的隐式原型赋值$
.fn,而这里的$
.fn其实就是一个普通的js对象,其中存放着各种工具函数。
比如我们使用$
(‘p’).html() 这个函数实际上就定义在$.fn中。
新版Z函数
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
$.fn = {
// ...很多属性...
}
zepto.Z.prototype = Z.prototype = $.fn
直接将构造函数的原型修改了,即 Z.prototype = $
.fn,经过这样一改,构造函数再new出来的对象的隐式原型 _ _ proto _ _自然就指向了$
.fn。
新版Z函数区别于旧版的地方在于他返回的是一个对象数组即可以模拟进行数组操作的对象。
var objArray = {
0: 'abc',
1: 'bcd',
2: 'cde',
length: 3
};
console.log( objArray[1] )
console.log( objArray.length )
那为何不用数组,而用对象数组?——对象本质上更加灵活、直观
通过以下方式可以将对象数组转换成一个纯数组
var arr = Array.prototype.slice.call(objArray);
console.log(arr);
总结
综合以上,我们总结出以下的代码结构
var Zepto = (function(){
var $,zepto = {}
// ...省略N行代码...
$ = function(selector, context){
return zepto.init(selector, context)
}
zepto.init = function(selector, context) {
var dom
// 针对参数情况,分别对dom赋值
// 最终调用 zepto.Z 返回的数据
return zepto.Z(dom, selector)
}
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
$.fn = {
// 里面有若干个工具函数
}
zepto.Z.prototype = Z.prototype = $.fn
// ...省略N行代码...
return $
})()
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)
上一篇: 「从模板消息改版订阅消息」小程序推送
推荐阅读
-
Java开源生鲜电商平台-商品的spu和sku数据结构设计与架构(源码可下载)
-
荐 BAT高频面试系列:设计模式+Spring源码+MyBatis+SpringMVC多线程+MySQL+Redis+框架使用+数据结构算法答案和总结
-
Vue-Router 源码分析(二) 设计思想及代码结构
-
【java高级进阶笔记4】之约定优于配置设计范式及Spring Boot源码剖析
-
《Redis设计与实现》[第一部分]数据结构与对象-C源码阅读(二)
-
React 框架的设计思想及源码结构
-
rocketmq源码分析、整体结构与类关系设计的思考
-
rocketmq源码分析、整体结构与类关系设计的思考
-
【Redis源码剖析】 - Redis内置数据结构之字典dict
-
Vue-Router 源码分析(二) 设计思想及代码结构