Zepto.js源码学习之一

最新推荐文章于 2024-05-09 09:42:13 发布

转载最新推荐文章于 2024-05-09 09:42:13 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000007989480

本文对Zepto.js库的结构进行了初步分析，介绍了其最外层的匿名立即执行函数的作用，以及主要函数如何定义和组织Zepto对象及其相关方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元旦假期转眼即过，终于在最后一天想起最初那个“宏伟”的计划，然后默默捡起Zepto源码的第一行。在具体深入之前，我希望能对Zepto库结构有一个整体的了解。看的时间比较短，以下如果有不正确的地方，欢迎指出。

最外层

(function(global, factory) {
  if (typeof define === 'function' && define.amd)
    define(function() {
      return factory(global);
    })
  else
    factory(global)
}(this, function(window) {
   blablabla......                               区域1
}))

区域1为略去的细节，后面会介绍，此处只集中注意力于最外层。
最外层为一个匿名的立即执行函数，因为只需要执行一次。该函数接受两个参数，第一个参数表示zepto将挂载的这个对象，第二个参数为一个函数，主要的内容都由该函数完成（这里暂且称之为‘主要函数’，即区域1），至于‘主要函数’具体做了哪些工作，下面介绍。

主要函数

‘主要函数’的缩略代码如下

function (window) {
   var Zepto = (function() {
      blablablabla......                         区域2
   })();
   window.Zepto = Zepto;                         区域3
   window.$ === undefined && (window.$ = Zepto); 区域4
   (function($) {
      blablablabla......                         区域5
   })(Zepto);
   (function($) {
      blablablabla......                         区域6
   })(Zepto);
   (function($) {
      blablablabla......                         区域7
   })();
   return Zepto;                                 
}

该函数分为6个部分，分别对应上面代码段的区域2-7，主要完成Zepto对象的定义以及Zepto对象上相关方法的定义。
区域2为定义Zepto对象；区域3将Zepto对象绑定为window对象的Zepto属性和$属性，$即成为Zepto的一个别名，这在使用中会牵涉到别名的冲突及处理，此处不详细展开；区域4完成事件相关方法的定义；区域5主要定义网络请求的相关方法；区域6主要是封装表单数据处理的相关方法；区域7对getComputedStyle的参数进行兼容undefined处理。

下一次会更详细的学习和分享，大概会按照上面的区域加以展开。