摘要：三目運(yùn)算符寫法如果是結(jié)構(gòu)，會這樣寫。參數(shù)重載個(gè)數(shù)重載當(dāng)?shù)诙€(gè)參數(shù)下標(biāo)是在中，則返回，否則返回。三目運(yùn)算符寫法我們再來看看的版本參數(shù)重載類型重載通過來判斷是否存在第二個(gè)參數(shù)，以及通過判斷參數(shù)的類型執(zhí)行不同的內(nèi)容。寫法操作中包含部分黑科技。

Zepto源碼分析（一）核心代碼分析
Zepto源碼分析（二）奇淫技巧總結(jié)

* 前言
    * 短路操作符
    * 參數(shù)重載（參數(shù)個(gè)數(shù)重載）
    * 參數(shù)重載（參數(shù)類型重載）
* CSS操作
    * 獲取屬性值的方法
    * 獲取屬性值的方法
* Boolean操作
    * 快速轉(zhuǎn)換成Boolean
* 日期操作
    * 快速獲取時(shí)間戳
* 數(shù)組操作
    * 數(shù)組去重
    * 數(shù)組清洗（去除null和undefined）
* 字符串操作
    * 快速轉(zhuǎn)換成字符串
    * CSS命名方式轉(zhuǎn)駝峰命名方式
    * 駝峰轉(zhuǎn)CSS命名方式
* 對象操作
    * 在閉包中修改引用會修改原對象
    * 對象中的this指向當(dāng)前的上一個(gè)位置
* 判斷
    * 瀏覽器類型判斷

在Zepto源碼中大量使用了三目運(yùn)算符、短路操作符以及參數(shù)重載。要去完整的閱讀Zepto源碼，理解這幾種操作很有必要。

當(dāng)state為"ready"的時(shí)候，把"ok"返回給start。否則返回false給start。

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

三目運(yùn)算符寫法

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

如果是if...else...結(jié)構(gòu)，會這樣寫。

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

當(dāng)?shù)诙€(gè)參數(shù)（下標(biāo)是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"

三目運(yùn)算符寫法

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來判斷是否存在第二個(gè)參數(shù)，以及通過判斷參數(shù)的類型執(zhí)行不同的內(nèi)容。

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黑科技。

非內(nèi)聯(lián)CSS我們沒法獲取到值的，這是可以使用getComputedStyle來獲取計(jì)算后的樣式。

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

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

使用!!操作可以快速將數(shù)據(jù)類型轉(zhuǎn)為布爾值。

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

使用+new Date()可以快速將日期轉(zhuǎn)為時(shí)間戳

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"

對象是引用類型，實(shí)際上是修改的被引用的對象。

var x = {};

(function(y){
  y.test = 66
})(x)

console.log(x)  // {test: 66}

這個(gè)表述可能不夠嚴(yán)謹(jǐn)。在這里是z屬性中的this指向了上一層的y，所以this輸出了y里面的對象。

var x = {}
x.y = {}

x.y.z = function(){
  console.log(this)
}

x.y.z()  // {z: ?}

用正則表達(dá)式匹配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))/)

歡迎關(guān)注前端進(jìn)階指南微信公眾號：

另外我也創(chuàng)了一個(gè)對應(yīng)的QQ群：660112451，歡迎一起交流。