摘要：三目運算符寫法如果是結構，會這樣寫。參數重載個數重載當第二個參數下標是在中，則返回，否則返回。三目運算符寫法我們再來看看的版本參數重載類型重載通過來判斷是否存在第二個參數，以及通過判斷參數的類型執行不同的內容。寫法操作中包含部分黑科技。

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