zepto 源码分析2 - 编码技巧 & 函数实现

编码技巧

全局对象属性转换成临时变量，提高读取效率

document = window.document

采用 call 保证类型与方法一致

// zepto
var emptyArray = []
$.inArray = function(elem, array, i){
return emptyArray.indexOf.call(array, elem, i)
}

// 原生
$.inArray = function(elem, array, i){
// 此时如果 array 不是 数组类型，则会报错：
// array.indexOf is not a function
return array.indexOf(elem, i)
}

判断变量可能的值

/complete|loaded|interactive/.test(document.readyState) // 简洁高效

// 常规写法
document.readyState=='complete' || document.readyState=='loaded' || document.readyState=='interactive'

函数实现

$.map

&

$.each

对原生 map & forEach 的拓展，使支持对象

$.map 会过滤 null 值

$.map 支持类数组对象，如函数中的 arguments

$.each 在返回值为 false 时，能中止数组遍历

数组去重

var uniq = function (array){
return filter.call(array, function (item, idx) {
return array.indexOf(item) == idx
})
}

深拷贝

递归实现

按需初始化类型

function extend(target, source, deep) {
for (key in source)
if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
if (isPlainObject(source[key]) && !isPlainObject(target[key]))
target[key] = {}
if (isArray(source[key]) && !isArray(target[key]))
target[key] = []
extend(target[key], source[key], deep)
}
else if (source[key] !== undefined) target[key
4000
] = source[key]
}

获取元素的宽高

计算 window 宽高用 innerWidth / innerHeight

计算 document 宽高用 scrollWidth / scrollHeight

其他元素：getBoundingClientRect，返回数值对象包含left、top、right和bottom，单位为 px

['width', 'height'].forEach(function(dimension){
var dimensionProperty =
dimension.replace(/./, function(m){ return m[0].toUpperCase() })

$.fn[dimension] = function(value){
var offset, el = this[0]
if (value === undefined) return isWindow(el) ? el['inner' + dimensionProperty] :
isDocument(el) ? el.documentElement['scroll' + dimensionProperty] :
(offset = this.offset()) && offset[dimension]
else return this.each(function(idx){
el = $(this)
el.css(dimension, funcArg(this, value, idx, el[dimension]()))
})
}
})