Zepto.js源码学习之一

hlcc 发布于2019-08-21 11:28 / 1224人阅读

摘要：元旦假期转眼即过，终于在最后一天想起最初那个宏伟的计划，然后默默捡起源码的第一行。在具体深入之前，我希望能对库结构有一个整体的了解。最外层为一个匿名的立即执行函数，因为只需要执行一次。

元旦假期转眼即过，终于在最后一天想起最初那个“宏伟”的计划，然后默默捡起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处理。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86753.html

Zepto这样操作元素属性

摘要：还有一点需要注意的是方法设置或者获取都是在操作元素的属性，那它和，的区别在哪呢可以查看设置设置与的设置部分比较类似，既支持直接传入普通的字符串也支持传入回调函数。前言使用Zepto的时候，我们经常会要去操作一些DOM的属性，或元素本身的固有属性或自定义属性等。比如常见的有attr(),removeAttr(),prop(),removeProp(),data()等。接下来我们挨个整...

付伦 2019-08-21 17:59 评论0 收藏0
一步步搭建物联网系统——无处不在的三剑客

摘要：无处不在的三剑客这时我们终于了解了我们的三剑客，他们也就这么可以结合到一起了，是这一切的基础。无处不在的三剑客就这样到了这里，写得似乎很多也很少，但是还是没有做出来一个东西，于是我们朝着这样一个方向前进。无处不在的三剑客这时我们终于了解了我们的三剑客，他们也就这么可以结合到一起了，HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、R...

dreamans 2019-08-22 10:55 评论0 收藏0
Zepto.js源码学习之二

摘要：本次主要分享关于上一篇区域的学习。区域为的核心部分，它的结构如下为了便于梳理思路，以上代码省略了细节，只保留了轮廓脉络。最终暴露给开发者的如下图所示这里只分析了区域的结构，下一次会深入到函数语句粒度。本次主要分享关于上一篇区域2的学习。区域2为Zepto的核心部分，它的结构如下 var Zepto = (function() { var $, zepto = {}; fu...

kel 2019-08-20 13:31 评论0 收藏0
向zepto.js学习如何手动(trigger)触发DOM事件

摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。前言前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...

spacewander 2019-08-20 17:04 评论0 收藏0