zepto.js 源码解读 -- 工厂方法和Zepto核心变量解析

这里写图片描述
zepto的源码只有1000多行,用很简洁的方式,实现了jquery中的常用内容

1. 工厂方法

(function(global, factory) { 
    if (typeof define === 'function' && define.amd) // 如果存在require.js,则调用require中的define
        define(function() { return factory(global) })
    else
        factory(global)
}(this, function(window) { // 将this 传给 global, function(window){...} 作为匿名函数传给factory
    // 代码
    var Zepto = ...

    window.Zepto = Zepto // 将Zepto挂载到window下
    window.$ === undefined && (window.$ = Zepto) // 将Zepto挂在到 window.$下
    ......
    return Zepto
}))

2. Zepto核心

# 定义变量
var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice,
// 【定义undefined】变量但不赋值,是为了让变量undefined 等于 js中的变量默认值,方便判断某个变量是否等于undefined
// 【定义key】 预定义变量        【定义$】用来挂在zepto对象       【定义classList】操作类名时,所用的临时变量 【定义emptyArray】挂在工具函数
// 【filter】过滤   【slice】裁剪
document = window.document, // 【document】获取dom文档
elementDisplay = {}, classCache = {}, // 【elementDisplay】节点是否展示 【classCache】类缓存区
cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 },//【cssNumber】基准样式
fragmentRE = /^\s*<(\w+|!)[^>]*>/, // 【fragmentRE】匹配html 双标签 比如 <div></div>
singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/, // 【singleTagRE】匹配 html 单标签 比如<img />
tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, //【tagExpanderRE】匹配特殊标签
rootNodeRE = /^(?:body|html)$/i, //【rootNodeRE 】 匹配body或者html节点
capitalRE = /([A-Z])/g, // 【capitalRE】匹配字符A~Z

// special attributes that should be get/set via method calls
methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'], //【methodAttributes】提供了函数修改的属性

adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ],
// 【adjacencyOperators】定义dom操作基准方法 after外部后 prepend内部前  before外部前       append内部后
table = document.createElement('table'), // 【table】创建一个table节点
tableRow = document.createElement('tr'), // 【tableRow 】创建一个节点
containers = {
    'tr': document.createElement('tbody'),
    'tbody': table, 'thead': table, 'tfoot': table,
    'td': tableRow, 'th': tableRow,
    '*': document.createElement('div')
},//【containers 】定义table容器
readyRE = /complete|loaded|interactive/, 
//【readyRE】 定义ready函数可选的参数  uninitialized(未初始化):对象存在但尚未初始化。
// loading(正在加载):对象正在加载数据。
// loaded(加载完毕):对象加载数据完成。
// interactive(交互):可以操作对象了,但还没有完全加载。
// complete(完成):对象已经加载完毕。
simpleSelectorRE = /^[\w-]*$/, // 【simpleSelectorRE 】是否符合一个简单的选择器
class2type = {},【class2type】显示对象的类型
toString = class2type.toString,【toString 】对象类型的打印函数
zepto = {}, 【zepto】定义全局zepto对象
camelize, uniq,【camelize】转换驼峰 【uniq】 用于数组去重。
tempParent = document.createElement('div'), 【tempParent 】临时父div
propMap = {
    'tabindex': 'tabIndex',
    'readonly': 'readOnly',
    'for': 'htmlFor',
    'class': 'className',
    'maxlength': 'maxLength',
    'cellspacing': 'cellSpacing',
    'cellpadding': 'cellPadding',
    'rowspan': 'rowSpan',
    'colspan': 'colSpan',
    'usemap': 'useMap',
    'frameborder': 'frameBorder',
    'contenteditable': 'contentEditable'
},
【propMap 】给html一些属性取别名
isArray = Array.isArray ||
    function(object){ return object instanceof Array } 【isArray 】如果未定义isArray则定义一个

猜你喜欢

转载自blog.csdn.net/u013214292/article/details/80444660