zepto 源码分析2

jsdt 发布于2019-08-21 17:21 / 1850人阅读

摘要：优化技巧全局对象属性转换成临时变量，提高读取效率采用保证类型与方法一致原生此时如果不是数组类型，则会报错判断变量可能的值简洁高效常规写法函数实现对原生的拓展，使支持对象会过滤值支持类数组对象，如函数中的在返回值为时，能中止数组遍历数组去重深

优化技巧

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

</>复制代码 
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] = 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]()))
    })
  }
})

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89410.html

zepto源码分析-代码结构

摘要：本来想学习一下的源码，但由于的源码有多行，设计相当复杂，所以决定从开始，分析一个成熟的框架的代码结构及执行步骤。同时发表在我的博客源码分析代码结构本来想学习一下jQuery的源码，但由于jQuery的源码有10000多行，设计相当复杂，所以决定从zepto开始，分析一个成熟的框架的代码结构及执行步骤。网上也有很多zepto的源码分析，有的给源码添加注释，有的谈与jQuery的不同，...

sherlock221 2019-08-20 12:20 评论0 收藏0
读Zepto源码之代码结构

摘要：源码结构整体结构如果在编辑器中将的源码折叠起来，看到的就跟上面的代码一样。参考源码分析代码结构对象思想与源码分析设计和源码分析源码中关于的问题最后，所有文章都会同步发送到微信公众号上，欢迎关注欢迎提意见虽然最近工作中没有怎么用 zepto ，但是据说 zepto 的源码比较简单，而且网上的资料也比较多，所以我就挑了 zepto 下手，希望能为以后阅读其他框架的源码打下基础吧。源码版...

warkiz 2019-08-20 15:35 评论0 收藏0
读 Zepto 源码之操作 DOM

摘要：辅助方法这个方法递归遍历的子节点，将节点交由回调函数处理。对集合进行遍历，调用方法，如果为函数，则将回调函数返回的结果作为参数传给否则，如果为，则将也即包裹元素的副本传给，否则直接将传给。这篇依然是跟 dom 相关的方法，侧重点是操作 dom 的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto...

beita 2019-08-20 17:00 评论0 收藏0
Zepto 源码分析 1 - 进入 Zepto

摘要：选择的理由是一个用于现代浏览器的与大体兼容的库。环境搭建分析环境的搭建仅需要一个常规页面和原始代码一个常规页面打开的首页即可，在开发人员工具中即可使用原始代码本篇分析的代码参照，进入该代码分支中即可。选择 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

Aklman 2019-08-26 13:21 评论0 收藏0
Zepto 源码分析 4 - 核心模块入口

摘要：对象构造函数读入的两个参数与在中也有明确的规范，用以保证构造函数的简单性。承接第三篇末尾内容，本篇结合官方 API 进入对 Zepto 核心的分析，开始难度会比较大，需要重点理解几个核心对象的关系，方能找到线索。 $() 与 Z 对象创建 Zepto Core API 的首个方法 $() 按照其官方解释： Create a Zepto collection object by pe...

xzavier 2019-08-26 13:24 评论0 收藏0
Zepto源码分析（一）核心代码分析

摘要：源码分析一核心代码分析源码分析二奇淫技巧总结本文只分析核心的部分代码，并且在这部分代码有删减，但是不影响代码的正常运行。当长度为则不添加内容，否则逐个将逐个到当前实例新增直接返回一个新的构造函数添加初始化方法。 Zepto源码分析（一）核心代码分析Zepto源码分析（二）奇淫技巧总结本文只分析核心的部分代码，并且在这部分代码有删减，但是不影响代码的正常运行。目录 * 用闭包封装Z...

BicycleWarrior 2019-08-20 18:57 评论0 收藏0