Zepto源码分析(一)核心代码分析

Zepto源码分析(二)奇淫技巧总结

目录


* 前言
* 短路操作符
* 参数重载(参数个数重载)
* 参数重载(参数类型重载)
* CSS操作
* 获取属性值的方法
* 获取属性值的方法
* Boolean操作
* 快速转换成Boolean
* 日期操作
* 快速获取时间戳
* 数组操作
* 数组去重
* 数组清洗(去除null和undefined)
* 字符串操作
* 快速转换成字符串
* CSS命名方式转驼峰命名方式
* 驼峰转CSS命名方式
* 对象操作
* 在闭包中修改引用会修改原对象
* 对象中的this指向当前的上一个位置
* 判断
* 浏览器类型判断

前言

在Zepto源码中大量使用了三目运算符、短路操作符以及参数重载。要去完整的阅读Zepto源码,理解这几种操作很有必要。

短路操作符

当state为'ready'的时候,把'ok'返回给start。否则返回false给start。


var state = 'ready'
var start = state === 'ready' && 'ok' // 'ok'

三目运算符写法


var state = 'ready'
var start = state === 'ready' ? 'ok' : false // 'ok'

如果是if...else...结构,会这样写。


var state = 'ready'
var start = ''
if (state === 'ready') start === 'ok' // 'ok'

参数重载(个数重载)

当第二个参数(下标是1)在arguments中,则返回'two params',否则返回'one params'。


var paramsFun = function(a, b) {
return (1 in arguments && 'two params') || 'one params'
} paramsFun(2, 4) // 'two params'
paramsFun(2) // 'one params'

三目运算符写法


var paramsFun = function(a, b) {
return 1 in arguments ? 'two params' : 'one params'
} paramsFun(2, 4) // 'two params'
paramsFun(2) // 'one params'

我们再来看看if...else的版本


var paramsFun = function(a, b) {
if(1 in arguments) return 'two params'
else return 'one params'
} paramsFun(2, 4) // 'two params'
paramsFun(2) // 'one params'

参数重载(类型重载)

通过1 in arguments来判断是否存在第二个参数,以及通过判断参数的类型执行不同的内容。


var paramsFun = function(a, b) {
return (1 in arguments && (typeof a ==='string' ? 'two / a is string' : 'two / a is not string')) || 'one params'
} paramsFun(2, 4) // "two / a is not string"
paramsFun('', 4) // "two / a is string"

if...else写法


var paramsFun = function(a, b) {
if(1 in arguments) {
if(typeof a ==='string') return 'two / a is string'
return 'two / a is not string'
}
return 'one params'
} paramsFun(2, 4) // "two / a is not string"
paramsFun('', 4) // "two / a is string"

CSS操作

Zepto中包含部分CSS黑科技。

获取属性值的方法

非内联CSS我们没法获取到值的,这是可以使用getComputedStyle来获取计算后的样式。


document.body.style.display // ''
getComputedStyle(document.body, '').getPropertyValue('display') // 'block'

添加Style的方法


element = document.createElement('P')
element.style.cssText += ';color:red;'
element.style.color // 'red'

Boolean操作

快速转换成Boolean

使用!!操作可以快速将数据类型转为布尔值。


!!null // false
Boolean(null) // false

日期操作

快速获取时间戳

使用+new Date()可以快速将日期转为时间戳


var now = new Date();
console.log(+now) // 1502506825489
console.log(now.getTime()) // 1502506825489

数组操作

数组去重


var uniq = function(array){ return [].filter.call(array, function(item, idx){ return array.indexOf(item) == idx }) }
uniq([1,2,3,3]) // (3) [1, 2, 3]

数组清洗(去除null和undefined和空字符串)


function compact(array) { return [].filter.call(array, function(item){ return item != null && item != '' }) }
compact([1,2,3,3,undefined,null,'']) // [1, 2, 3, 3]

字符串操作

快速转换成字符串


var x = 555
console.log('' + x) // "555"

CSS命名方式转驼峰命名方式


var camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }
camelize('font-size') // "fontSize"

驼峰转CSS命名方式


function dasherize(str) {
return str.replace(/::/g, '/')
.replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
.replace(/([a-z\d])([A-Z])/g, '$1_$2')
.replace(/_/g, '-')
.toLowerCase()
}
dasherize('fontSize') // "font-size"

对象操作

在闭包中修改引用会修改原对象

对象是引用类型,实际上是修改的被引用的对象。


var x = {}; (function(y){
y.test = 66
})(x) console.log(x) // {test: 66}

对象中的this指向当前的上一个位置

这个表述可能不够严谨。在这里是z属性中的this指向了上一层的y,所以this输出了y里面的对象。


var x = {}
x.y = {} x.y.z = function(){
console.log(this)
} x.y.z() // {z: ƒ}

判断

浏览器类型判断

用正则表达式匹配navigator.userAgent中的信息来判断浏览器类型。


var ua = navigator.userAgent // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36"
var platform = navigator.platform
var webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/),
android = ua.match(/(Android);?[\s\/]+([\d.]+)?/),
osx = !!ua.match(/\(Macintosh\; Intel /),
ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/),
iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),
win = /Win\d{2}|Windows/.test(platform),
wp = ua.match(/Windows Phone ([\d.]+)/),
touchpad = webos && ua.match(/TouchPad/),
kindle = ua.match(/Kindle\/([\d.]+)/),
silk = ua.match(/Silk\/([\d._]+)/),
blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/),
bb10 = ua.match(/(BB10).*Version\/([\d.]+)/),
rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/),
playbook = ua.match(/PlayBook/),
chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/),
firefox = ua.match(/Firefox\/([\d.]+)/),
firefoxos = ua.match(/\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/),
ie = ua.match(/MSIE\s([\d.]+)/) || ua.match(/Trident\/[\d](?=[^\?]+).*rv:([0-9.].)/),
webview = !chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/),
safari = webview || ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/)

欢迎关注前端进阶指南微信公众号:

另外我也创了一个对应的QQ群:660112451,欢迎一起交流。

Zepto源码分析(二)奇淫技巧总结的更多相关文章

  1. 一个普通的 Zepto 源码分析(二) - ajax 模块

    一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...

  2. Zepto源码分析(一)核心代码分析

    本文只分析核心的部分代码,并且在这部分代码有删减,但是不影响代码的正常运行. 目录 * 用闭包封装Zepto * 开始处理细节 * 正式处理数据(获取选择器选择的DOM) * 正式处理数据(添加DOM ...

  3. 一个普通的 Zepto 源码分析(三) - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  4. 一个普通的 Zepto 源码分析(一) - ie 与 form 模块

    一个普通的 Zepto 源码分析(一) - ie 与 form 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核 ...

  5. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  6. Fresco 源码分析(二) Fresco客户端与服务端交互(1) 解决遗留的Q1问题

    4.2 Fresco客户端与服务端的交互(一) 解决Q1问题 从这篇博客开始,我们开始讨论客户端与服务端是如何交互的,这个交互的入口,我们从Q1问题入手(博客按照这样的问题入手,是因为当时我也是从这里 ...

  7. zepto源码分析系列

    如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...

  8. 框架-springmvc源码分析(二)

    框架-springmvc源码分析(二) 参考: http://www.cnblogs.com/leftthen/p/5207787.html http://www.cnblogs.com/leftth ...

  9. Tomcat源码分析二:先看看Tomcat的整体架构

    Tomcat源码分析二:先看看Tomcat的整体架构 Tomcat架构图 我们先来看一张比较经典的Tomcat架构图: 从这张图中,我们可以看出Tomcat中含有Server.Service.Conn ...

随机推荐

  1. POJ 3279 枚举(思维)

    Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10931   Accepted: 4029 Descrip ...

  2. VerilogHDL常用的仿真知识

    在描述完电路之后,我们需要进行对代码进行验证,主要是进行功能验证.现在验证大多是基于UVM平台写的systemverilog,然而我并不会sv,不过我会使用verilog进行简单的验证,其实也就是所谓 ...

  3. 流畅python学习笔记:第十五章:上下文管理器

    在开始本章之前,我们首先来谈谈try-excep..final模块.在Python中,进行异常保护的最多就是用try..except..final.首先来看下下面的代码.进行一个简单的除法运算.为了防 ...

  4. CentOS IP DNS设置

    1.CentOS 修改DNS 修改对应网卡的DNS的配置文件 # vi /etc/resolv.conf 修改以下内容 nameserver 8.8.8.8 #google域名服务器 nameserv ...

  5. 53. leetcode557. Reverse Words in a String III

    557. Reverse Words in a String III Given a string, you need to reverse the order of characters in ea ...

  6. 设置双击直接打开.ipynb文件

    本文环境:win10(64)+anaconda3(64) anaconda3安装好后,可在开始菜单下查看 背景:jupyter notebook打开后无法更改路径,只能在默认路径下upload文件(如 ...

  7. JavaScript中正则表达式判断匹配规则以及常用的方法

    JavaScript中正则表达式判断匹配规则以及常用的方法: 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想 ...

  8. ABAP中Collect的用法

    vaule:collect在非数值字段相同的情况下,起到了数值字段汇总作用. 非数值字段不同的情况下,效果和append相同执行插入内表操作,当非数值字段相同的时候,则相当于modify的效果,只不过 ...

  9. canvas的学习

    canvas的学习 一. //获取画布 var mycanvasEle = document.getElementById("mycanvas");二. //内容 var ctx ...

  10. Linux Command Line(II): Intermediate

    Prerequisite: Linux Command Line(I): Beginner ================================ File I/O $ cat > a ...