工作中需要查看一些网站的JS语句,打心眼里对这种语法充满了鄙夷,优雅跟它没关系,一些烂写法很难读懂,简直就是反人类,太变态了 。
下面举个小例子,因为篇幅原因,就复制了一小段,看看你能看懂多少?
(window.webpackJsonp = window.webpackJsonp || [说实话乍一看到这种代码我内心是抵触的,一眼望去就是乱糟糟的,不知道它想表达什么 。不过工作需要,也只能硬着头皮往下捋 。
]).push([[36],
{
1161: function (e, t) {
//some codes
},
}]);
看懂这些代码语文要学好,分段很重要,在哪断句是重点;眼神也得好,标点符号一个都不能少 。于是乎,三个部分很快就被找出来 。
第一部分:(window.webpackJsonp = window.webpackJsonp || [第一部分因为window.webpackJsonp=window.webpackJsonp的返回值就是window.webpackJsonp,所以可以化简为:(window.webpackJsonp || []),化简后的代码也不大容易看懂,但如果了解了js的语法,也就好理解了,其实等同于:
])
第二部分:push([[36],
{.....}]);
第三部分:1161: function (e, t) {
(function (t) {
e.exports = t
}).call(this, {
})
},
if (window.webpackJsonp)说白了,第一部分的意思就是:如果window.webpackJsonp为空,就声明window.webpackJsonp为一个数组变量;如果window.webpackJsonp不为空,那么表达式为window.webpackJsonp,执行第二部分 。
//什么都不干
else
window.webpackJsonp = [];
第二部分第一部分理解了,第二部分就容易了,就是push参数 。绕了一个小弯的是[[36],{.....}],乍一看push,应该是push(a, b)这种形式,但这里是第一层就只push了一个值,是一个二维数组;第二层才push了两个值,第一个值是36,第二个值是一个对象 。
第三部分这里的难理解之处是1161: function,这是什么鬼?
正常的写法都是 function xxx() 或 xxx: function(),纯数字难道也能作为函数名吗?正常js语法是不支持的呢 。实验是检验真理的唯一标准,管它怎么写,运行一下就见分晓 。
于是我做了调用测试:
alert(window.webpackJsonp[0][1].1161());发现这两种方式是错误的,无法运行 。难道是这个数字是作为变量的序号吗?于是我尝试:
alert(window.webpackJsonp[0][1].1161);
alert(window.webpackJsonp[0][1][1161]);结果弹出了函数声明的对话框 。于是更进一步:
alert(window.webpackJsonp[0][1][1161](null, null));调用成功 。
至此,难懂的JS代码终于明白其含义了 。
总结或许这些代码是前端开发故意为之,不让其他用户那么容易的理解其目的,其实前端代码再怎么混淆加密都只是时间长短而已,重要的是后端,何必呢 。
【某网站JS的变态写法】
推荐阅读
- 如何监视Python程序的内存使用情况
- 通过一个算法来简化你的 css
- 加装内存前先要了解的
- 程序员 在亚马逊的新员工都被推荐要读一读这本书
- 直通车点击转化率的优化思路 直通车点击率高转化率低咋办
- 茶回甘中蕴藏的小秘密,祁门红茶茶叶品鉴及挑选蕴藏
- 吃什么补气血 补气养血的8款药膳
- 茶香酱油炒饭的做法,茶香排骨的做法
- 滋阴补肾的食物 7款药膳方助你滋阴养血
- 茶浴给身体多点健康,百香果蜂蜜茶的做法