工作中需要查看一些網(wǎng)站的JS語(yǔ)句，打心眼里對(duì)這種語(yǔ)法充滿了鄙夷，優(yōu)雅跟它沒(méi)關(guān)系，一些爛寫(xiě)法很難讀懂，簡(jiǎn)直就是反人類，太變態(tài)了。
下面舉個(gè)小例子，因?yàn)槠?，就?fù)制了一小段，看看你能看懂多少？
(window.webpackJsonp = window.webpackJsonp || [
]).push([[36],
{
1161: function (e, t) {
//some codes
},
}]);
說(shuō)實(shí)話乍一看到這種代碼我內(nèi)心是抵觸的，一眼望去就是亂糟糟的，不知道它想表達(dá)什么。不過(guò)工作需要，也只能硬著頭皮往下捋。
看懂這些代碼語(yǔ)文要學(xué)好，分段很重要，在哪斷句是重點(diǎn)；眼神也得好，標(biāo)點(diǎn)符號(hào)一個(gè)都不能少。于是乎，三個(gè)部分很快就被找出來(lái)。
第一部分：(window.webpackJsonp = window.webpackJsonp || [
])
第二部分：push([[36],
{.....}]);
第三部分：1161: function (e, t) {
(function (t) {
e.exports = t
}).call(this, {
})
},
第一部分
因?yàn)閣indow.webpackJsonp=window.webpackJsonp的返回值就是window.webpackJsonp，所以可以化簡(jiǎn)為：(window.webpackJsonp || [])，化簡(jiǎn)后的代碼也不大容易看懂，但如果了解了js的語(yǔ)法，也就好理解了，其實(shí)等同于：
if (window.webpackJsonp)
//什么都不干
else
window.webpackJsonp = [];
說(shuō)白了，第一部分的意思就是：如果window.webpackJsonp為空，就聲明window.webpackJsonp為一個(gè)數(shù)組變量；如果window.webpackJsonp不為空，那么表達(dá)式為window.webpackJsonp，執(zhí)行第二部分。
第二部分
第一部分理解了，第二部分就容易了，就是push參數(shù)。繞了一個(gè)小彎的是[[36],{.....}]，乍一看push，應(yīng)該是push(a, b)這種形式，但這里是第一層就只push了一個(gè)值，是一個(gè)二維數(shù)組；第二層才push了兩個(gè)值，第一個(gè)值是36，第二個(gè)值是一個(gè)對(duì)象。
第三部分
這里的難理解之處是1161: function，這是什么鬼？
正常的寫(xiě)法都是 function xxx() 或 xxx: function()，純數(shù)字難道也能作為函數(shù)名嗎？正常js語(yǔ)法是不支持的呢。實(shí)驗(yàn)是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，管它怎么寫(xiě)，運(yùn)行一下就見(jiàn)分曉。
于是我做了調(diào)用測(cè)試：
alert(window.webpackJsonp[0][1].1161());
alert(window.webpackJsonp[0][1].1161);
發(fā)現(xiàn)這兩種方式是錯(cuò)誤的，無(wú)法運(yùn)行。難道是這個(gè)數(shù)字是作為變量的序號(hào)嗎？于是我嘗試：
alert(window.webpackJsonp[0][1][1161]);
結(jié)果彈出了函數(shù)聲明的對(duì)話框。于是更進(jìn)一步：
alert(window.webpackJsonp[0][1][1161](null, null));
調(diào)用成功。
至此，難懂的JS代碼終于明白其含義了。
總結(jié)
或許這些代碼是前端開(kāi)發(fā)故意為之，不讓其他用戶那么容易的理解其目的，其實(shí)前端代碼再怎么混淆加密都只是時(shí)間長(zhǎng)短而已，重要的是后端，何必呢。
