首页 > 代码库 > zepto源码学习-01-整体感知
zepto源码学习-01-整体感知
在公司一直做移动端的项目，偶尔会做点PC端的东西，但基本上都是和移动端打交道，移动端嘛必须上zepto。
简单介绍下Zepto，它是一个面向高级浏览器的JavaScript框架的，实现JQuery的大部分API，尤其针对手机上web开发(流量金贵，JQ又太重了，体积太大，考虑太多性能不好)，因此选择Zepto.js一个非常不错的选择！纵观各大网站选用zepto的特别多。
做移动端为了让页面更轻巧，大多都是自己写原生代码，遇到难题，我一般都是去看zepto的实现，把其中的一些搬到自己代码中，久而久之、对zepto就熟悉了。
进入正题：zepto官网 地址
再上一张图，一个大神画的，不是我画的。
这张图基本上包含了zepto的api，并且进行了分类。
在该github上下载zepto的源码也是进行模块划分的
在官网上下载的zepto默认导入了其中五个个模块
从github上下载下来的代码可以看到有很多个文件，其中的核心文件就是zepto
先从这个文件入手，看下这个文件903行，声明了一个全局变量Zepto,照理说Zepto已经挂载到window上了，这里为什么还window.Zepto = Zepto再次进行赋值，不解！
window.$ === undefined && (window.$ = Zepto)
windwo上的$对象没有被占用就直接赋值为Zepto，我们平时使用$(XXX)的时候也可以替换成Zepto(XXX)，但是没有必要，多写四个字符不累啊！
var Zepto=(function(){XXXX})();
Zepto后面是一个立即执行函数，内部肯定返回了某个对象然后赋值给Zepto
所以我展开立即执行函数，反倒最下面看到以下代码
//把$.fn赋值给Z.prototype、zepto.Z.prototype zepto.Z.prototype = Z.prototype = $.fn // Export internal API functions in the `$.zepto` namespace zepto.uniq = uniq zepto.deserializeValue = deserializeValue $.zepto = zepto //返回内部的$对象 return $
其他的代码先不管什么意思，反正这里返回了$对象，那么我们平时使用的全局$其实就是内部的$,最后看下内部哪里声明的$这个东西
$ = function(selector, context) { return zepto.init(selector, context) }
发现内部的$其实就是一个函数，内部是return zepto.init(selector, context)
我们平时写的$(XXX) 其实就是调用的zepto.init(XX)
再次回到原点，平时我们都是怎么使用$ 都有哪些用法，JQuery的$好像有八九用法
1. jQuery([selector,[context]])2. jQuery(element)3. jQuery(elementArray)4. jQuery(object)5. jQuery(jQuery object)6. jQuery(html,[ownerDocument])7. jQuery(html,[attributes])8. jQuery()9. jQuery(callback)
zepto总结下也就三种
1、$(selector,context?) 传入一个选择器返回一个zepto对象
2、$(function(){}) 传入一个函数，dom ready时执行
3、$(html，attrs?) 传入一个html字符串，构建元素，返回一个或zepto对象
4、$(dom obj)传入dom对象返回zepto对象
以上操作最后都是调用zepto.init(selector, context)，我们的重点就是分析zepto.init这个函数
zepto.init = function(selector, context) { var dom // If nothing given, return an empty Zepto collection // 如果啥都没传直接返回一个空的Zepto集合 if (!selector) return zepto.Z() // Optimize for string selectors // 如果第一个参数是string else if (typeof selector == ‘string‘) { //去掉空格 selector = selector.trim() // If it‘s a html fragment, create nodes from it // Note: In both Chrome 21 and Firefox 15, DOM error 12 // is thrown if the fragment doesn‘t begin with < // 如果是一个HTML片段，创建节点注意，在chrome21和FF15版本， // DOM错误12不是以<被抛出 if (selector[0] == ‘<‘ && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null // If there‘s a context, create a collection on that context first, and select // nodes from there //如果存在一个上下文环境，在这个上下文对象中去选择节点 else if (context !== undefined) return $(context).find(selector) // If it‘s a CSS selector, use it to select nodes. // 如果是一个css选择器，用它来选择节点 else dom = zepto.qsa(document, selector) } // If a function is given, call it when the DOM is ready // 如果一个函数存在，在domready就绪后触发 else if (isFunction(selector)) return $(document).ready(selector) // If a Zepto collection is given, just return it // 如果zepto已经收集给出，直接返回 else if (zepto.isZ(selector)) return selector else { // normalize array if an array of nodes is given // 如果节点已经为数组，进行聚合 if (isArray(selector)) dom = compact(selector) // Wrap DOM nodes. // 包装DOM节点 else if (isObject(selector)) dom = [selector], selector = null // If it‘s a html fragment, create nodes from it // 如果是一个HTML片段，对该片段创建节点 else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null // If there‘s a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // And last but no least, if it‘s a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } // create a new Zepto collection from the nodes found // 对发现的节点创建一个新的Zepto集合，这里把查询到dom 对象和selector 传递给了zepto.Z return zepto.Z(dom, selector) }
最后返回的是zepto.Z(dom, selector)，最终我们还得看zepto.Z的实现
zepto.Z = function(dom, selector) { return new Z(dom, selector) }
其实相当于一个工厂方法，在这里new了一个Z，外面每次我们调用$ 最后拿到的都是新的实例对象，但是我们并没有new，其实就是这里帮我们new了，JQuery也这样，这种思想到处都有用到。
最后我们还得参看Z的实现
function Z(dom, selector) { var i, len = dom ? dom.length : 0 //把dom对象数组放到this上，所以我们外部可以XX[0]得到一个原生的dom对象，关键就在这里，this是一个伪数组 for (i = 0; i < len; i++) this[i] = dom[i] //把长度赋给this.length this.length = len //这个就不说了 this.selector = selector || ‘‘ }
直接返回了一个Z的实例对象。先看一个demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test zepto</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-cacle=1.0,maximum-scale=1.0"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style></head><body> <h1 id=‘test‘>test</h1> <ul id=‘items‘> <li>List item 1 <span class=‘delete‘>DELETE</span></li> <li>List item 2 <span class=‘delete‘>DELETE</span></li> </ul> <div id=‘block‘></div> <script type="text/javascript" src="../zepto-full-1.1.6.js"></script> <script> var s=$(‘#items‘); console.log(s) </script></body></html>
这个demo 我们得到的test1对象如下
按之前的分析Z对象有length ;;Z[0]、Z[1]…… 伪数组;还有selector
但是现在Z的原型指向了zepto.z[0];所以返回的对象我们可以test1.attr()、test1.addClass()、test1.after()我们可以访问这些方法，是因为这个实力对象的原型能够访问到这些方法。那么问题来了，Z的原型什么时候指向zepto.z[0]
带着这个疑问，继续查看源码，发下如下代码
//把$.fn赋值给Z.prototype、zepto.Z.prototype zepto.Z.prototype = Z.prototype = $.fn // Export internal API functions in the `$.zepto` namespace zepto.uniq = uniq zepto.deserializeValue = deserializeValue $.zepto = zepto //返回内部的$对象 return $
$.fn下的所有方法都挂在了zepto.Z的prototype和Z.prototype下，也就是说上面的test1已经拥有了$.fn的所有方法。$.fn上的方法也就是$的实例方法，$上还有一大堆静态方法，不用创建一个$对象也可以调用。
我使用的版本是1.1.6，以前的版本 在这里实现略有不同，但是大同小异，搞懂了原型、原型链、继承这些都不是问题。
细心的话会发现一个问题，test的__proto__ 指向的是zepto.z[0]， 试问问为什么会是zepto.z[0]这个东西，感觉怪怪的。
为什么会是zepto.z[0]、zepto.z[0]是什么东西，下回分解！！
zepto源码学习-01-整体感知