开始分析cordova-2.0.0.js的源码结构,使用UE打开这个文件,按Ctrl+Add键将代码全部折叠,可以看到结构如下:
/* * 版权申明及注释部分 */ ;(function(){ // 这里是cordova的内部代码 })();
1、一开始就是一个分号";",我们知道,分号在javascript中主要作用就是结束一个语句以及构成for循环的语法结构,那么在这里是什么作用呢?个人理解,由于javascript中语句结束的分号并不是强制使用的,在这里主要是为了规范,以间隔于程序中编写或导入的其它js脚本,也就是给其它js脚本一个明确的语句结束符。这里强烈建议,每一个js语句,都使用分号结尾,主要好处有两点,一是阅读维护方便,逻辑更清晰,更重要的是保证使用工具压缩js文件时不出错。
2、接下来的是一个(function(){})()结构,这里首先是定义了一个匿名函数function(){},紧接着调用这个匿名函数,这样一来可以有效的将代码封装在这个匿名函数中,防止污染全局环境(当然,在匿名函数内部,所有的内部变量都使用var定义)。
3、阅读过jQuery源码的人大概都知道,jQuery的也是相同的结构,只是jQuery定义的匿名函数多了两个参数window和undefined,然后调用的时候只传入window,这样,window可以在jQuery内部安全使用,而undefined也的确表示未定义(有些浏览器实现允许重定义undefined)。
4、事实上,为了更好的通用性,我们在这里还可以将全局环境的this作为参数,如下:
;(function(window, undefined){ // 在内部可以安全使用window和undefined了 })(this);
接下来,展开源码中的第一层,可以看到如下结构:
;(function(){ var require,//cordova内部的工具函数,用来导入相关的模块 define;//在cordova注册相关的模块 //通过一个立即调用的匿名函数,来给require和define赋上实际的函数 (function(){ })(); //针对可能的外围环境处理 if(typeof module === "object" && typeof require === "function"){ } //注册cordova模块 define("cordova", function(require, exports, module){ }); //注册cordova/builder模块 define("cordova/builder", function(require, exports, module){ }); //注册cordova/channel模块 define("cordova/channel", function(require, exports, module){ }); //注册cordova/common模块 define("cordova/common", function(require, exports, module{ }); //注册cordova/exec模块 define("cordova/exec", function(require, exports, module){ }); //注册cordova/platform模块 define("cordova/platform", function(require, exports, module){ }); //注册cordova/plugin/Acceleration模块 define("cordova/plugin/Acceleration", function(require, exports, module){ }); // 这里省略了其它插件的注册 //注册cordova/utils模块 define("cordova/utils", function(require, exports, module){ }); //所有模块注册完之后,再导入cordova至全局环境中 window.cordova = require('cordova'); // 自调用函数初始化启动 (function(context){ }(window)); })();
从上可以清晰的看出,在cordova内部,首先是定义了两个公共的require和define函数,然后是使用define注册所有模块,再通过window.cordova=require('cordova')导入库文件至全局执行环境中。
下一篇将对关键的require和define进行源码级别的分析。