Zepto源码分析(一)核心代码分析

Zepto源码分析(二)奇淫技巧总结

本文只分析核心的部分代码,并且在这部分代码有删减,但是不影响代码的正常运行。

目录


* 用闭包封装Zepto
* 开始处理细节
* 正式处理数据(获取选择器选择的DOM)
* 正式处理数据(添加DOM到当前实例)
* 在实例的原型链上添加方法
* 支持插件扩展
* 验收

用闭包封装Zepto


// 对全局暴露Zepto变量
var Zepto = (function() { // 定义$变量,并将具体细节交给zepto.init处理
$ = function(selector, context){
return zepto.init(selector, context)
} // 返回变量
return $
})() // 把Zepto变量挂载在window
window.Zepto = Zepto
// 当$变量没有被占用的时候,为Zepto设置别名为$
window.$ === undefined && (window.$ = Zepto)

开始处理细节


// 对全局暴露Zepto变量
var Zepto = (function() { // [新增] 初始化zepto变量为对象
var zepto = {} // [新增] 添加初始化方法。当selector参数为空时,则交给zepto.Z()处理
// 当selector为字符串时则把zepto.qsa(document, selector)的值存到dom变量
// 并且交给zepto.Z(dom, selector)处理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == 'string') {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
} // 定义$变量,并将具体细节交给zepto.init处理
$ = function(selector, context){
return zepto.init(selector, context)
} // 返回变量
return $
})() // 把Zepto变量挂载在window
window.Zepto = Zepto
// 当$变量没有被占用的时候,为Zepto设置别名为$
window.$ === undefined && (window.$ = Zepto)

正式处理数据(获取选择器选择的DOM)


// 对全局暴露Zepto变量
var Zepto = (function() { // 初始化zepto变量为对象
var zepto = {} // 添加初始化方法。当selector参数为空时,则交给zepto.Z()处理
// 当selector为字符串时则把zepto.qsa(document, selector)的值存到dom变量
// 并且交给zepto.Z(dom, selector)处理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == 'string') {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
} // 定义$变量,并将具体细节交给zepto.init处理
$ = function(selector, context){
return zepto.init(selector, context)
} // [新增] 使用querySelectorAll(selector)查询DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
} // 返回变量
return $
})() // 把Zepto变量挂载在window
window.Zepto = Zepto
// 当$变量没有被占用的时候,为Zepto设置别名为$
window.$ === undefined && (window.$ = Zepto)

正式处理数据(添加DOM到当前实例)


// 对全局暴露Zepto变量
var Zepto = (function() { // 初始化zepto变量为对象
var zepto = {} // [新增] 开始正式处理数据。当dom长度为0则不添加内容,
// 否则逐个将dom逐个到当前实例
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)
} // 添加初始化方法。当selector参数为空时,则交给zepto.Z()处理
// 当selector为字符串时则把zepto.qsa(document, selector)的值存到dom变量
// 并且交给zepto.Z(dom, selector)处理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == 'string') {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
} // 定义$变量,并将具体细节交给zepto.init处理
$ = function(selector, context){
return zepto.init(selector, context)
} // 使用querySelectorAll(selector)查询DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
} // 返回变量
return $
})() // 把Zepto变量挂载在window
window.Zepto = Zepto
// 当$变量没有被占用的时候,为Zepto设置别名为$
window.$ === undefined && (window.$ = Zepto)

在实例的原型链上添加方法


// 对全局暴露Zepto变量
var Zepto = (function() { // 初始化zepto变量为对象
var zepto = {}, emptyArray = [] // 开始正式处理数据。当dom长度为0则不添加内容,
// 否则逐个将dom逐个到当前实例
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)
} // 添加初始化方法。当selector参数为空时,则交给zepto.Z()处理
// 当selector为字符串时则把zepto.qsa(document, selector)的值存到dom变量
// 并且交给zepto.Z(dom, selector)处理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == 'string') {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
} // 定义$变量,并将具体细节交给zepto.init处理
$ = function(selector, context){
return zepto.init(selector, context)
} // 使用querySelectorAll(selector)查询DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
} // [新增] 定义each方法
$.each = function(elements, callback){
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++)
if (callback.call(elements[i], i, elements[i]) === false) return elements
} else {
for (key in elements)
if (callback.call(elements[key], key, elements[key]) === false) return elements
} return elements
} // [新增] 定义用于扩展在原型链上的方法
$.fn = {
constructor: zepto.Z,
length: 0,
each: function(callback){
emptyArray.every.call(this, function(el, idx){
return callback.call(el, idx, el) !== false
})
return this
},
empty: function(){
return this.each(function(){ this.innerHTML = '' })
},
html: function(html){
return 0 in arguments ?
this.each(function(idx){
var originHtml = this.innerHTML
$(this).empty().append( funcArg(this, html, idx, originHtml) )
}) :
(0 in this ? this[0].innerHTML : null)
},
test : function(){
return this.each(function(){
console.log('测试链式调用')
return this
})
}
} // [新增] 原型链指向$.fn
zepto.Z.prototype = Z.prototype = $.fn
// $.zepto指向zepto
$.zepto = zepto // 返回变量
return $
})() // 把Zepto变量挂载在window
window.Zepto = Zepto
// 当$变量没有被占用的时候,为Zepto设置别名为$
window.$ === undefined && (window.$ = Zepto)

支持插件扩展


// 对全局暴露Zepto变量
var Zepto = (function() { // 初始化zepto变量为对象
var zepto = {}, emptyArray = [] // 开始正式处理数据。当dom长度为0则不添加内容,
// 否则逐个将dom逐个到当前实例
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)
} // 添加初始化方法。当selector参数为空时,则交给zepto.Z()处理
// 当selector为字符串时则把zepto.qsa(document, selector)的值存到dom变量
// 并且交给zepto.Z(dom, selector)处理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == 'string') {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
} // 定义$变量,并将具体细节交给zepto.init处理
$ = function(selector, context){
return zepto.init(selector, context)
} // [新增] 插件扩展函数
function extend(target, source, deep) {
for (key in source)
if (source[key] !== undefined) target[key] = source[key]
} // [新增] 插件扩展函数
$.extend = function(target){
var deep, args = emptyArray.slice.call(arguments, 1)
if (typeof target == 'boolean') {
deep = target
target = args.shift()
}
args.forEach(function(arg){ extend(target, arg, deep) })
return target
} // 使用querySelectorAll(selector)查询DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
} // 定义each方法
$.each = function(elements, callback){
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++)
if (callback.call(elements[i], i, elements[i]) === false) return elements
} else {
for (key in elements)
if (callback.call(elements[key], key, elements[key]) === false) return elements
} return elements
} // 定义用于扩展在原型链上的方法
$.fn = {
constructor: zepto.Z,
length: 0,
each: function(callback){
emptyArray.every.call(this, function(el, idx){
return callback.call(el, idx, el) !== false
})
return this
},
empty: function(){
return this.each(function(){ this.innerHTML = '' })
},
html: function(html){
return 0 in arguments ?
this.each(function(idx){
var originHtml = this.innerHTML
$(this).empty().append( funcArg(this, html, idx, originHtml) )
}) :
(0 in this ? this[0].innerHTML : null)
},
test : function(){
return this.each(function(){
console.log('测试链式调用')
return this
})
}
} // 原型链指向$.fn
zepto.Z.prototype = Z.prototype = $.fn
// $.zepto指向zepto
$.zepto = zepto // 返回变量
return $
})() // 把Zepto变量挂载在window
window.Zepto = Zepto
// 当$变量没有被占用的时候,为Zepto设置别名为$
window.$ === undefined && (window.$ = Zepto)

验收


// 链式调用测试
$('head').test().test() // 测试链式调用\n测试链式调用\n{0: head, length: 1, selector: "head"}
$('head').html() // <meta charset="utf-8"><link rel="dns-prefetch" href... // 编写插件测试
;(function($){
$.extend($.fn, {
bw2: function() {
return this.html()
}
})
})(Zepto)
$('head').bw2() // <meta charset="utf-8"><link rel="dns-prefetch" href...

欢迎关注前端进阶指南微信公众号:

另外我也创了一个对应的QQ群:660112451,欢迎一起交流。

Zepto源码分析(一)核心代码分析的更多相关文章

  1. Mybatis源码学习第六天(核心流程分析)之Executor分析

    今Executor这个类,Mybatis虽然表面是SqlSession做的增删改查,其实底层统一调用的是Executor这个接口 在这里贴一下Mybatis查询体系结构图 Executor组件分析 E ...

  2. Spring源码解析 - springMVC核心代码

    一.首先来讲解下springMVC的底层工作流程 1.首先我们重点放在前端控制器(DispatcherServlet) 其类图: 因为从流程图看,用户的请求最先到达就是DispatcherServle ...

  3. 学习Redux之分析Redux核心代码分析

    1. React,Flux简单介绍 学习React我们知道,React自带View和Controller库,因此,实现过程中不需要其他任何库,也可以独立开发应用.但是,随着应用程序规模的增大,其需要控 ...

  4. Mybatis源码学习第六天(核心流程分析)之Executor分析(补充)

    补充上一章没有讲解的三个Executor执行器; 还是贴一下之前的代码吧;我发现其实有些分析注释还是写在代码里面比较好,方便大家理解,之前是我的疏忽,不好意思 @Override public < ...

  5. 读 Zepto 源码之集合元素查找

    这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zept ...

  6. 一个普通的 Zepto 源码分析(二) - ajax 模块

    一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...

  7. 一个普通的 Zepto 源码分析(三) - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  8. 一个普通的 Zepto 源码分析(一) - ie 与 form 模块

    一个普通的 Zepto 源码分析(一) - ie 与 form 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核 ...

  9. Zepto源码分析(二)奇淫技巧总结

    Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...

随机推荐

  1. 如何生成Azure SAS Token

    在Azure PaaS服务密钥的安全性文章中,提到过客户端实际上发送的是Token,而不是密钥.那么Token是该如何生成呢? Azure相应服务的SDK其实都提供了或者内置了生成Token的方法,可 ...

  2. Android之IPC(aidl)

    IPC(Inter-Process Conmunication) 进程间通讯 在同一进程中,各个组件进行通信是十分方便的,普通的函数调用就可以解决:但是,对于处于不同进程中的组件来说,要进行通信,就需 ...

  3. MyEclipse安装SVN插件

    MyEclipse安装svn插件有两种方式,一种是从MyEclipse里面下载,但是下载速度巨慢:第二种是将插件先下载好,再进行配置,这种方式会快一些,本文讲的是第二种方式. 1.下载SVN插件sub ...

  4. 函数响应式编程及ReactiveObjC学习笔记 (二)

    之前我们初步认识了RAC的设计思路跟实现方式, 现在我们再来看看如果使用它以及它能帮我们做什么 One of the major advantages of RAC is that it provid ...

  5. php 删除指定文件夹

    php 删除指定文件夹 1.前言 目标:php删除一个指定目录 所使用的的php函数:is_dir,opendir,readdir,scandir,rmdir,closedir,等等(注:其他文件操作 ...

  6. 【JAVASCRIPT】React 学习 - 登录实战

    摘要 实现一个登录的react 组件, 包含组件更新.ajax 交互.渲染新组建. 代码 <head> <meta charset="utf-8"> < ...

  7. 【js】操作checkbox radio 的操作总结

    摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...

  8. linux的文件权限与目录配置<----->第二章

    1.Linux文件属性    [   1  ]                  [   2  ] [    3    ]  [    4    ]  [ 5 ]             [ 6 ] ...

  9. 9.Spark Streaming

    Spark Streaming 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性 ...

  10. 简单设置android启动画面

    1.新建Activity,以及layout文件夹里的xml文件2.将新建Activity在AndroidManifest中设为默认Activity,并且添加:android:theme="@ ...