Cordova 3.x 源码分析（2） -- cordova.js概要

前提环境：

引用

Platform: android
Version: 3.4.0

（1）cordova.js/cordova_plugins.js文件

cordova.js在创建Android工程的时候，是从cordova的lib目录下Copy到platforms\android\assets\www\cordova.js的。同时备份到platforms\android\platform_www\cordova.js

引用

C:\Documents and Settings\RenSanNing\.cordova\lib\android\cordova\3.4.0\framework\assets\www\cordova.js

而platforms\android\assets\www\cordova_plugins.js是根据plugins文件夹的内容生成的。

（2）自己亲手生成cordova.js
Cordova是OSS的，所以可以通过源代码来生成cordova.js

a)下载源码
目前稳定版是3.4.0，master是3.5.0-dev。
从https://github.com/apache/cordova-js/tree/3.4.x下载cordova-js-3.4.x.zip解压到E:\cordova-js-3.4.x

b)构建工具使用的是Grunt，所以要先安装grunt-cli

引用

npm install -g grunt-cli

c)手动生成

引用

cd E:\cordova-js-3.4.x
npm install  --安装package.json中devDependencies定义的依赖包
grunt        --运行 grunt

d)执行后多了2个文件夹
node_modules 依赖包
pkg
  cordova.android.js
  cordova.ios.js
  ...
其中cordova.android.js就是我们Android工程要用到的cordova.js了。

（3）cordova.js的整体结构
从E:\cordova-js-3.4.x\tasks\lib\bundle.js可以看出cordova.js的整体结构是：

// Platform:  <platform>
// <commitId>
/* <license> */
;(function() {
var CORDOVA_JS_BUILD_LABEL = '<commitId>';
// src\scripts\require.js文件内容
// 各Module文件内容
window.cordova = require('cordova');
// src\scripts\bootstrap.js文件内容
})();

其中Module来自以下文件：

• src\common\**.js
• src\android\**.js
• src\cordova.js

各文件输出形式：

引用

// file: <fileName>
<fileContents>

最终的cordova.js：

// Platform: android
// 3.4.0
/*
 License 省略
*/
;(function() {
var CORDOVA_JS_BUILD_LABEL = '3.4.0';
// file: src/scripts/require.js
//...
// file: src/cordova.js
define("cordova", function(require, exports, module) { /*...*/ }
// file: src/android/android/nativeapiprovider.js
define("cordova/android/nativeapiprovider", function(require, exports, module) { /*...*/ }
// file: src/android/android/promptbasednativeapi.js
define("cordova/android/promptbasednativeapi", function(require, exports, module) { /*...*/ }
// file: src/common/argscheck.js
define("cordova/argscheck", function(require, exports, module) { /*...*/ }
// file: src/common/base64.js
define("cordova/base64", function(require, exports, module) { /*...*/ }
// file: src/common/builder.js
define("cordova/builder", function(require, exports, module) { /*...*/ }
// file: src/common/channel.js
define("cordova/channel", function(require, exports, module) { /*...*/ }
// file: src/android/exec.js
define("cordova/exec", function(require, exports, module) { /*...*/ }
// file: src/common/exec/proxy.js
define("cordova/exec/proxy", function(require, exports, module) { /*...*/ }
// file: src/common/init.js
define("cordova/init", function(require, exports, module) { /*...*/ }
// file: src/common/modulemapper.js
define("cordova/modulemapper", function(require, exports, module) { /*...*/ }
// file: src/android/platform.js
define("cordova/platform", function(require, exports, module) { /*...*/ }
// file: src/android/plugin/android/app.js
define("cordova/plugin/android/app", function(require, exports, module) { /*...*/ }
// file: src/common/pluginloader.js
define("cordova/pluginloader", function(require, exports, module) { /*...*/ }
// file: src/common/urlutil.js
define("cordova/urlutil", function(require, exports, module) { /*...*/ }
// file: src/common/utils.js
define("cordova/utils", function(require, exports, module) { /*...*/ }
window.cordova = require('cordova');
// file: src/scripts/bootstrap.js
require('cordova/init');
})();

***define()的顺序是在Grunt的时候简单的按模块ID名升序排的，先后无所谓。
***define只是注册模块，不会调用其factory。
***在index.html通过<script type="text/javascript" src="cordova.js"></script>引入cordova.js后：

// 加载cordova模块，赋给window.cordova
// require()第一次被调用，就开始调用其factory。
// factory中又包含了其他的require()，就形成了嵌套，直到最后所有module的factory被执行完。
window.cordova = require('cordova');  
// 加载Plugin代码等初期化处理
require('cordova/init');

（4）cordova.js中个模块的说明

平台相关的：

• src/android/android/nativeapiprovider.js JS->Native的具体交互形式
• src/android/android/promptbasednativeapi.js 通过prompt()和Native交互（Android2.3 simulator的Bug）
• src/android/exec.js ****执行JS->Native交互
• src/android/platform.js ***bootstrap处理
• src/android/plugin/android/app.js 清缓存、loadUrl、退出程序等

通用的：

• src/common/argscheck.js 用于plugin中校验参数，比如argscheck.checkArgs('fFO', 'Camera.getPicture', arguments); 参数应该是2个函数1个对象
• src/common/base64.js JS->Native交互时对ArrayBuffer进行uint8ToBase64（WebSockets二进制流）
• src/common/builder.js 对象属性操作，比如把一个对象的属性Merge到另外一个对象
• src/common/channel.js ****控制事件调用
• src/common/exec/proxy.js 用于Plugin中往已经有的模块上添加方法
• src/common/init.js ****初期处理
• src/common/modulemapper.js ***把定义的模块clobber到一个对象，在初期化的时候会赋给window
• src/common/pluginloader.js ***加载所有cordova_plugins.js中定义的模块，执行完成后会触发onPluginsReady
• src/common/urlutil.js 获取绝对URL，InAppBrowser中会用到
• src/common/utils.js 工具类

核心：

• src/cordova.js ****事件的处理和回调，外部访问cordova.js的入口
• src/scripts/require.js  *****模块化系统
• src/scripts/bootstrap.js 启动处理（只调用了初期处理require('cordova/init');），注意和platform的bootstrap处理不一样

（5）cordova_plugins.js的整体结构
Cordova从3.0版本开始不再在cordova.js中包含各plugin的代码，而是采用plugman通过CLI生成cordova_plugins.js然后动态加载需要的plugin。3.0之前的代码结构可以参考：https://github.com/apache/cordova-js/tree/2.8.x lib-<platform>/plugin/<platform>

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/org.apache.cordova.vibration/www/vibration.js",
        "id": "org.apache.cordova.vibration.notification",
        "merges": [
            "navigator.notification"
        ]
    },
    //.......
];
module.exports.metadata = 
// TOP OF METADATA
{
    "org.apache.cordova.vibration": "0.3.7",
    // ....
}
// BOTTOM OF METADATA
});

其实也是define了一个ID为“cordova/plugin_list”的模块，在初期化的时候动态加载到head里的。Cordova提供的Native API的js也是一样的，可以启动浏览器调试看HTML的Head部分：


后续从四个方面继续分析cordova.js中一些核心代码：
（1）cordova.js模块系统require/define

• src/scripts/require.js 自定义的模块系统

（2）cordova.js事件通道pub/sub

• src/common/channel.js 发布/订阅模式的事件通道

（3）cordova.js导入、初始化、启动、加载插件

• src/cordova.js 事件的处理和回调，外部访问cordova.js的入口
• src/common/init.js 初始化处理
• src/android/platform.js 平台启动处理
• src/common/pluginloader.js 加载所有cordova_plugins.js中定义的模块，执行完成后会触发onPluginsReady

（4）cordova.js本地交互JS<->Native

• src/android/android/nativeapiprovider.js JS->Native的具体交互形式
• src/android/android/promptbasednativeapi.js 通过prompt()和Native交互（Android2.3 simulator的Bug）
• src/android/exec.js 执行JS->Native交互

剩下的代码就不分析了：

引用

src/android/plugin/android/app.js
src/common/argscheck.js
src/common/base64.js
src/common/builder.js
src/common/exec/proxy.js
src/common/modulemapper.js
src/common/urlutil.js
src/common/utils.js

下载带注释的cordova.js：这里

参考：
http://www.cnblogs.com/linjisong/tag/PhoneGap/