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"

Zepto中包含部分CSS黑科技。

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

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

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

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

!!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]

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"

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

function dasherize(str) {
  return str.replace(/::/g, "/")
         .replace(/([A-Z]+)([A-Z][a-z])/g, "$1_$2")
         .replace(/([a-zd])([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}

这个表述可能不够严谨。在这里是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).*OSs([d_]+)/),
ipod = ua.match(/(iPod)(.*OSs([d_]+))?/),
iphone = !ipad && ua.match(/(iPhonesOS)s([d_]+)/),
webos = ua.match(/(webOS|hpwOS)[s/]([d.]+)/),
win = /Wind{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(/(RIMsTabletsOS)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(/MSIEs([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，欢迎一起交流。