zepto 源码分析2
来源:互联网 发布:动物精神 知乎 编辑:程序博客网 时间:2024/05/18 01:43
编码技巧
全局对象属性转换成临时变量,提高读取效率
document = window.document
采用 call 保证类型与方法一致
// zeptovar emptyArray = []$.inArray = function(elem, array, i){return emptyArray.indexOf.call(array, elem, i)}// 原生$.inArray = function(elem, array, i){// 此时如果 array 不是 数组类型,则会报错:// array.indexOf is not a functionreturn 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] = 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]())) }) }})
阅读全文
0 0
- zepto 源码分析2
- Zepto.js源码分析
- zepto源码分析
- zepto:源码分析
- zepto 源码分析1
- Zepto源码分析一~核心方法
- Zepto源码分析之二~三个API
- Zepto源码解读-zepto.js
- 一个普通的 Zepto 源码分析(三)
- Zepto.js 源码解读
- zepto源码注释
- Zepto源码解读
- zepto 源码阅读记录
- 一步一步DIY zepto库,研究zepto源码2 -- selector选择符
- zepto源码之form.js
- zepto源码之event.js
- zepto源码之data.js
- zepto源码之ajax.js
- 关于“暗网”的问题
- Qt5.9.1 QDoubleValidator 直接构建失效的解决办法
- 记录一次cpu 100%线上问题排查
- spring 4.2.4 与 Jackson 2.7 所引出的问题
- click点击事件触发两次ajax请求
- zepto 源码分析2
- Tensorflow -1-hello world! MNIST
- kkt
- interleaving-string Java code
- Sublime Text3常用插件以及安装方法(实用)
- HTML5 canvas绘图基本使用方法
- Surface Shaders 内置灯光模型(Build in lighting models)Lighting.cginc 和如何自定义灯光类型
- 【RSA】openssl 非对称加密算法RSA命令详解
- 用户密码管理、随机密码生成工具