Zepto源码分析（二）奇淫技巧总结

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，欢迎一起交流。