代码数量

1.2.0版本代码量为1650行，去掉注释大概1500左右

代码模块

默认版本只包括核心模块，事件模块，ajax模块，form模块和ie模块，其它模块需要自行拓展加入，其中form模块只包含序列化操作和submit提交事件实现，ie模块只包括一点兼容性处理，两者码量极少，因此不做分析

执行结构

典型的即时函数，保证封装性

1. (function (global, factory) {
   
2.         // amd,cmd的模块化检测
   
3.     })(this, function(window) {
   
4.         // zepto初始化代码
   
5.     })

复制代码

模块结构

1. (function (global, factory) {
   
2.         // amd,cmd的模块化检测
   
3.     })(this, function(window) {
   
4.         // 核心模块
   
5.         var Zepto = (function () {
   
6. 
   
7.         }();
   
8.         
   
9.         // 事件模块
   
10.         ;(function (){
    
11. 
    
12.         })(Zepto)
    
13. 
    
14.         // ajax模块
    
15.         ;(function (){
    
16. 
    
17.         })(Zepto)
    
18. 
    
19.         // form模块
    
20.         ;(function (){
    
21. 
    
22.         })(Zepto)
    
23. 
    
24.         // ie模块
    
25.         ;(function (){
    
26. 
    
27.         })()
    
28.     })

复制代码

架构原理

1. (function (global, factory) {
   
2.         // amd,cmd的模块化检测
   
3.     })(this, function(window) {
   
4.         // 核心模块
   
5.         var Zepto = (function () {
   
6.             var $, zepto = {};
   
7. 
   
8.             // 第四步
   
9.             function Z(dom, selector) {
   
10.                 // zepto对象创建，返回this
    
11.             }
    
12. 
    
13.             // 第三步
    
14.             zepto.Z = function(dom, selector) {
    
15.                 return new Z(dom, selector)
    
16.             }
    
17. 
    
18.             // 是否为zepto.Z实例
    
19.             zepto.isZ = function(object) {
    
20.                 return object instanceof zepto.Z
    
21.             }
    
22.             
    
23.             // 第二步
    
24.             zepto.init = function(selector, context) {
    
25.                 // 选择器解析，获得dom元素集合
    
26.                 return zepto.Z(dom, selector);
    
27.             }
    
28.             // 第一步
    
29.             $ = function (selector, context) {
    
30.                 return zepto.init(selector, context)
    
31.             }
    
32. 
    
33.             // 定义代表原型对象的fn属性
    
34.             $.fn = {
    
35.                 constructor: zepto.Z,
    
36.                 length: 0
    
37.             }
    
38. 
    
39.             // 串通原型链
    
40.             zepto.Z.prototype = Z.prototype = $.fn;
    
41. 
    
42.             // 赋值zepto引用给$
    
43.             $.zepto = zepto;
    
44.         
    
45.             return $
    
46.         }();
    
47. 
    
48.         // window上注册Zepto
    
49.         window.Zepto = Zepto
    
50.         window.$ === undefined && (window.$ = Zepto)
    
51. 
    
52.         // 其它模块省略...
    
53.     })

复制代码

1.库的架构方面，先是定义了2个变量，未声明的$和zepto对象；将$赋值为函数，定义fn属性来作为库本身的原型对象，对zepto对象定义一些操作方法

2.通过$方法实现选择器初始化操作，通过zepto.init实现dom集合生成，通过zepto.Z和Z函数生成一个Zepto对象，也就是如上注释的1,2,3,4步

3.其中Z.prototype = $.fn是为new Z实例定义原型，zepto.Z.prototype = Z.prototype则只是用于zepto.isZ函数操作，以便判断是否传入的内容为zepto.Z实例

4.个人感觉zepto.isZ函数实现略微麻烦，改成如下形式会更简洁

1. // 核心模块
   
2. var Zepto = (function () {
   
3.     var $, zepto = {};
   
4. 
   
5.     zepto.isZ = function(object) {
   
6.         // zepto.Z改成Z
   
7.         return object instanceof Z
   
8.     }
   
9. 
   
10.     // zepto.Z改成Z
    
11.     $.fn = {
    
12.         constructor: Z,
    
13.         length: 0
    
14.     }
    
15. 
    
16.     // zepto.Z.prototype = Z.prototype去掉
    
17.     Z.prototype = $.fn;
    
18. 
    
19.     return $
    
20. }();

复制代码

对比jquery架构

1. var jQuery = function( selector, context ) {
   
2.         // 避免this instanceof jQuery判断
   
3.         // 避免new jQuery的死循环
   
4.         // 初始化方法采用原型上的init方法
   
5.         return new jQuery.fn.init( selector, context );
   
6.     }
   
7. 
   
8.     // 定义fn属性指向jQuery原型
   
9.     jQuery.fn = jQuery.prototype = {
   
10.         constructor: jQuery
    
11.     }
    
12. 
    
13.     // 通过将init方法的原型指向jquery原型解决this问题
    
14.     jQuery.fn.init.prototype = jQuery.fn;
    
15. 
    
16.     // 通过this的力量共享extend拓展方法，实现根据调用对象进行对应拓展
    
17.     jQuery.extend = jQuery.fn.extend = function() {
    
18. 
    
19.     }

复制代码

jQuery的原型链构建和extend实现真是精妙绝伦，jQuer的架构实现比Zepto更简洁，作用上更清晰，Zepto的实现相对繁琐。


更多前端JavaScript、css及前端架构师所需干货，尽在WEB明教光明顶

代码数量

1.2.0版本代码量为1650行，去掉注释大概1500左右

代码模块

默认版本只包括核心模块，事件模块，ajax模块，form模块和ie模块，其它模块需要自行拓展加入，其中form模块只包含序列化操作和submit提交事件实现，ie模块只包括一点兼容性处理，两者码量极少，因此不做分析

执行结构

典型的即时函数，保证封装性

1. (function (global, factory) {
   
2.         // amd,cmd的模块化检测
   
3.     })(this, function(window) {
   
4.         // zepto初始化代码
   
5.     })

复制代码

模块结构

1. (function (global, factory) {
   
2.         // amd,cmd的模块化检测
   
3.     })(this, function(window) {
   
4.         // 核心模块
   
5.         var Zepto = (function () {
   
6. 
   
7.         }();
   
8.         
   
9.         // 事件模块
   
10.         ;(function (){
    
11. 
    
12.         })(Zepto)
    
13. 
    
14.         // ajax模块
    
15.         ;(function (){
    
16. 
    
17.         })(Zepto)
    
18. 
    
19.         // form模块
    
20.         ;(function (){
    
21. 
    
22.         })(Zepto)
    
23. 
    
24.         // ie模块
    
25.         ;(function (){
    
26. 
    
27.         })()
    
28.     })

复制代码

架构原理

1. (function (global, factory) {
   
2.         // amd,cmd的模块化检测
   
3.     })(this, function(window) {
   
4.         // 核心模块
   
5.         var Zepto = (function () {
   
6.             var $, zepto = {};
   
7. 
   
8.             // 第四步
   
9.             function Z(dom, selector) {
   
10.                 // zepto对象创建，返回this
    
11.             }
    
12. 
    
13.             // 第三步
    
14.             zepto.Z = function(dom, selector) {
    
15.                 return new Z(dom, selector)
    
16.             }
    
17. 
    
18.             // 是否为zepto.Z实例
    
19.             zepto.isZ = function(object) {
    
20.                 return object instanceof zepto.Z
    
21.             }
    
22.             
    
23.             // 第二步
    
24.             zepto.init = function(selector, context) {
    
25.                 // 选择器解析，获得dom元素集合
    
26.                 return zepto.Z(dom, selector);
    
27.             }
    
28.             // 第一步
    
29.             $ = function (selector, context) {
    
30.                 return zepto.init(selector, context)
    
31.             }
    
32. 
    
33.             // 定义代表原型对象的fn属性
    
34.             $.fn = {
    
35.                 constructor: zepto.Z,
    
36.                 length: 0
    
37.             }
    
38. 
    
39.             // 串通原型链
    
40.             zepto.Z.prototype = Z.prototype = $.fn;
    
41. 
    
42.             // 赋值zepto引用给$
    
43.             $.zepto = zepto;
    
44.         
    
45.             return $
    
46.         }();
    
47. 
    
48.         // window上注册Zepto
    
49.         window.Zepto = Zepto
    
50.         window.$ === undefined && (window.$ = Zepto)
    
51. 
    
52.         // 其它模块省略...
    
53.     })

复制代码

1.库的架构方面，先是定义了2个变量，未声明的$和zepto对象；将$赋值为函数，定义fn属性来作为库本身的原型对象，对zepto对象定义一些操作方法

2.通过$方法实现选择器初始化操作，通过zepto.init实现dom集合生成，通过zepto.Z和Z函数生成一个Zepto对象，也就是如上注释的1,2,3,4步

3.其中Z.prototype = $.fn是为new Z实例定义原型，zepto.Z.prototype = Z.prototype则只是用于zepto.isZ函数操作，以便判断是否传入的内容为zepto.Z实例

4.个人感觉zepto.isZ函数实现略微麻烦，改成如下形式会更简洁

1. // 核心模块
   
2. var Zepto = (function () {
   
3.     var $, zepto = {};
   
4. 
   
5.     zepto.isZ = function(object) {
   
6.         // zepto.Z改成Z
   
7.         return object instanceof Z
   
8.     }
   
9. 
   
10.     // zepto.Z改成Z
    
11.     $.fn = {
    
12.         constructor: Z,
    
13.         length: 0
    
14.     }
    
15. 
    
16.     // zepto.Z.prototype = Z.prototype去掉
    
17.     Z.prototype = $.fn;
    
18. 
    
19.     return $
    
20. }();

复制代码

对比jquery架构

1. var jQuery = function( selector, context ) {
   
2.         // 避免this instanceof jQuery判断
   
3.         // 避免new jQuery的死循环
   
4.         // 初始化方法采用原型上的init方法
   
5.         return new jQuery.fn.init( selector, context );
   
6.     }
   
7. 
   
8.     // 定义fn属性指向jQuery原型
   
9.     jQuery.fn = jQuery.prototype = {
   
10.         constructor: jQuery
    
11.     }
    
12. 
    
13.     // 通过将init方法的原型指向jquery原型解决this问题
    
14.     jQuery.fn.init.prototype = jQuery.fn;
    
15. 
    
16.     // 通过this的力量共享extend拓展方法，实现根据调用对象进行对应拓展
    
17.     jQuery.extend = jQuery.fn.extend = function() {
    
18. 
    
19.     }

复制代码

jQuery的原型链构建和extend实现真是精妙绝伦，jQuer的架构实现比Zepto更简洁，作用上更清晰，Zepto的实现相对繁琐。


更多前端JavaScript、css及前端架构师所需干货，尽在WEB明教光明顶