元旦假期转眼即过,终于在最后一天想起最初那个“宏伟”的计划,而后默默捡起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处理。this
下一次会更详细的学习和分享,大概会按照上面的区域加以展开。code