代码数量 1.2.0版本代码量为1650行,去掉注释大概1500左右
代码模块默认版本只包括核心模块,事件模块,ajax模块,form模块和ie模块,其它模块需要自行拓展加入,其中form模块只包含序列化操作和submit提交事件实现,ie模块只包括一点兼容性处理,两者码量极少,因此不做分析
执行结构典型的即时函数,保证封装性
- (function (global, factory) {
- // amd,cmd的模块化检测
- })(this, function(window) {
- // zepto初始化代码
- })
复制代码
模块结构- (function (global, factory) {
- // amd,cmd的模块化检测
- })(this, function(window) {
- // 核心模块
- var Zepto = (function () {
- }();
-
- // 事件模块
- ;(function (){
- })(Zepto)
- // ajax模块
- ;(function (){
- })(Zepto)
- // form模块
- ;(function (){
- })(Zepto)
- // ie模块
- ;(function (){
- })()
- })
复制代码
架构原理- (function (global, factory) {
- // amd,cmd的模块化检测
- })(this, function(window) {
- // 核心模块
- var Zepto = (function () {
- var $, zepto = {};
- // 第四步
- function Z(dom, selector) {
- // zepto对象创建,返回this
- }
- // 第三步
- zepto.Z = function(dom, selector) {
- return new Z(dom, selector)
- }
- // 是否为zepto.Z实例
- zepto.isZ = function(object) {
- return object instanceof zepto.Z
- }
-
- // 第二步
- zepto.init = function(selector, context) {
- // 选择器解析,获得dom元素集合
- return zepto.Z(dom, selector);
- }
- // 第一步
- $ = function (selector, context) {
- return zepto.init(selector, context)
- }
- // 定义代表原型对象的fn属性
- $.fn = {
- constructor: zepto.Z,
- length: 0
- }
- // 串通原型链
- zepto.Z.prototype = Z.prototype = $.fn;
- // 赋值zepto引用给$
- $.zepto = zepto;
-
- return $
- }();
- // window上注册Zepto
- window.Zepto = Zepto
- window.$ === undefined && (window.$ = Zepto)
- // 其它模块省略...
- })
复制代码
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函数实现略微麻烦,改成如下形式会更简洁
- // 核心模块
- var Zepto = (function () {
- var $, zepto = {};
- zepto.isZ = function(object) {
- // zepto.Z改成Z
- return object instanceof Z
- }
- // zepto.Z改成Z
- $.fn = {
- constructor: Z,
- length: 0
- }
- // zepto.Z.prototype = Z.prototype去掉
- Z.prototype = $.fn;
- return $
- }();
复制代码
对比jquery架构
- var jQuery = function( selector, context ) {
- // 避免this instanceof jQuery判断
- // 避免new jQuery的死循环
- // 初始化方法采用原型上的init方法
- return new jQuery.fn.init( selector, context );
- }
- // 定义fn属性指向jQuery原型
- jQuery.fn = jQuery.prototype = {
- constructor: jQuery
- }
- // 通过将init方法的原型指向jquery原型解决this问题
- jQuery.fn.init.prototype = jQuery.fn;
- // 通过this的力量共享extend拓展方法,实现根据调用对象进行对应拓展
- jQuery.extend = jQuery.fn.extend = function() {
- }
复制代码
jQuery的原型链构建和extend实现真是精妙绝伦,jQuer的架构实现比Zepto更简洁,作用上更清晰,Zepto的实现相对繁琐。
更多前端JavaScript、css及前端架构师所需干货,尽在WEB明教光明顶
|