请选择 进入手机版 | 继续访问电脑版
创作

zepto源码分析-整体架构

源码解析  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-6-16

跳转到指定楼层
代码数量
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.         ;(function (){

  10.         })(Zepto)

  11.         // ajax模块
  12.         ;(function (){

  13.         })(Zepto)

  14.         // form模块
  15.         ;(function (){

  16.         })(Zepto)

  17.         // ie模块
  18.         ;(function (){

  19.         })()
  20.     })
复制代码

架构原理
  1. (function (global, factory) {
  2.         // amd,cmd的模块化检测
  3.     })(this, function(window) {
  4.         // 核心模块
  5.         var Zepto = (function () {
  6.             var $, zepto = {};

  7.             // 第四步
  8.             function Z(dom, selector) {
  9.                 // zepto对象创建,返回this
  10.             }

  11.             // 第三步
  12.             zepto.Z = function(dom, selector) {
  13.                 return new Z(dom, selector)
  14.             }

  15.             // 是否为zepto.Z实例
  16.             zepto.isZ = function(object) {
  17.                 return object instanceof zepto.Z
  18.             }
  19.             
  20.             // 第二步
  21.             zepto.init = function(selector, context) {
  22.                 // 选择器解析,获得dom元素集合
  23.                 return zepto.Z(dom, selector);
  24.             }
  25.             // 第一步
  26.             $ = function (selector, context) {
  27.                 return zepto.init(selector, context)
  28.             }

  29.             // 定义代表原型对象的fn属性
  30.             $.fn = {
  31.                 constructor: zepto.Z,
  32.                 length: 0
  33.             }

  34.             // 串通原型链
  35.             zepto.Z.prototype = Z.prototype = $.fn;

  36.             // 赋值zepto引用给$
  37.             $.zepto = zepto;
  38.         
  39.             return $
  40.         }();

  41.         // window上注册Zepto
  42.         window.Zepto = Zepto
  43.         window.$ === undefined && (window.$ = Zepto)

  44.         // 其它模块省略...
  45.     })
复制代码


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.     zepto.isZ = function(object) {
  5.         // zepto.Z改成Z
  6.         return object instanceof Z
  7.     }

  8.     // zepto.Z改成Z
  9.     $.fn = {
  10.         constructor: Z,
  11.         length: 0
  12.     }

  13.     // zepto.Z.prototype = Z.prototype去掉
  14.     Z.prototype = $.fn;

  15.     return $
  16. }();
复制代码


对比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.     // 定义fn属性指向jQuery原型
  8.     jQuery.fn = jQuery.prototype = {
  9.         constructor: jQuery
  10.     }

  11.     // 通过将init方法的原型指向jquery原型解决this问题
  12.     jQuery.fn.init.prototype = jQuery.fn;

  13.     // 通过this的力量共享extend拓展方法,实现根据调用对象进行对应拓展
  14.     jQuery.extend = jQuery.fn.extend = function() {

  15.     }
复制代码


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


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

转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部