去验证码文件对javascript模块化编程的完美诠释

       通过学习Taobao的UA算法文件6x.js和去验证码文件nc.js来理解javascript的模块化编程,胜过读N本关于javascript模块化编程的书籍。去验证码文件nc.js与Ua算法文件6x.js的模块化编程方式类似,但不完全相同,本文以nc.js文件中的STABLE_ACTION为例来记录其对javascript的模块化编程的完美诠释。       

       本系列文章将以taobao的去验证码文件nc.js为主要学习对象,同时会涉及淘宝的login.html, 6x.js等相关文件,这些文件与64.js是同一时期抓取的,与目前最新的相关文件可能会略有差异,请各位看官知悉,nc.js的下载链接去验证码文件nc.js功能框架与模块化结构的简陋分析请参阅tb去验证码文件nc.js功能框架与模块化结构浅析

      STABLE_ACTION的结构概述

      下图是函数STABLE_ACTION的结构示意图,STABLE_ACTION包含主体函数function e(t,n,o)和该主体函数的三个参数。第一个参数为obejct,有24个函数模块,这24个模块均是由两个对象组成的数组,第一个元素是当前模块的主要功能函数,第二个元素是当前模块需引用的外部模块,当前模块不需要引用外部模块时,其值为空;第二个参数为空的object;第三个参数为Array,该Array中有一个元素,值为2。

       当函数STABLE_ACTION被执行时,首先会执行主体函数中的for循环,其中o.length=1, o[0]=2,所以会调用 i(2),接下来我们来关注主体函数中的子函数funtcion i(c,r)。

the structure of stable action

       STABLE_ACTION的主函数体浅析

       浅析STABLE_ACTION的主函数体时,需要两张图来辅助说明,这里将”!function e(t,n,o)”所在图称为图1,该图包含STABLE_ACTION的主函数体;将“2 : [function (e, t, n) {”称为图2,该图包含主函数体参数中的元素2。

       在图1中,我们可以看到主体函数中的子函数funtcion i(c,r)最重要的代码就是t[c][0].call这一句。当STABLE_ACTION的for循环调用i(2)时,t[c][0].call的效果为l.exports.t[2][0](function(e){/*省略函数体*/}, l, l.exports, e, t, n, o);这里的l.exports.t[2][0]即指向24个模块中的模块2,即图2中的函数function (e, t, n) {}。

main function in stableaction

       而图2中的函数function (e, t, n) {}的三个参数则分别对应图1中”t[c][0].call(l.exports, function (e) {“语句中的匿名函数function (e){}, l , l.exports。

       图2是模块2的缩略图,模块2需要调用外部模块,因此其第2个元素是有值的,它调用外部模块的方式是通过t[c][0].call(l.exports, function (e) {“语句中的function (e){}。例如语句e(“./_styl/nc”)的效果等同于执行匿名函数function(e){},如图1中的注释所示。其他模块的调用也是用相同的方式,满满的都是技巧。

module2 in stable action

       图1的主体函数!function e(t,n,o)中的n初始是空的obejct,在每个模块第一次被调用(初始化)时,该模块会被存储在对象n中。每次调用函数i(c)时,都会先判断当前模块是否已被初始化,若已初始化,则可以直接通过n[c].exports调用。1~24的参数模块中,若对第一个元素function (e, t, n)中的n直接赋值,即相当于对n[c].exports赋值,例如模块3中有如下代码,因此模块3初始化完成之后,在n[3].exports就会有相应的函数出现,如下图所示。

nc module in chrome

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Fork me on GitHub