Cordova 3.x 源码分析(2) -- cordova.js概要
程序员文章站
2022-03-02 18:41:25
...
前提环境:
(1)cordova.js/cordova_plugins.js文件
cordova.js在创建Android工程的时候,是从cordova的lib目录下Copy到platforms\android\assets\www\cordova.js的。同时备份到platforms\android\platform_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
c)手动生成
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的整体结构是:
其中Module来自以下文件:
各文件输出形式:
最终的cordova.js:
***define()的顺序是在Grunt的时候简单的按模块ID名升序排的,先后无所谓。
***define只是注册模块,不会调用其factory。
***在index.html通过<script type="text/javascript" src="cordova.js"></script>引入cordova.js后:
(4)cordova.js中个模块的说明
平台相关的:
通用的:
核心:
(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>
其实也是define了一个ID为“cordova/plugin_list”的模块,在初期化的时候动态加载到head里的。Cordova提供的Native API的js也是一样的,可以启动浏览器调试看HTML的Head部分:
后续从四个方面继续分析cordova.js中一些核心代码:
(1)cordova.js模块系统require/define
(2)cordova.js事件通道pub/sub
(3)cordova.js导入、初始化、启动、加载插件
(4)cordova.js本地交互JS<->Native
剩下的代码就不分析了:
下载带注释的cordova.js:这里
参考:
http://www.cnblogs.com/linjisong/tag/PhoneGap/
引用
Platform: android
Version: 3.4.0
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
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>
<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
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/
推荐阅读
-
Cordova 3.x 源码分析(7) -- CordovaLib概要
-
Cordova 3.x 源码分析(1) -- Cordova CLI
-
Cordova 3.x 源码分析(5) -- cordova.js导入、初始化、启动、加载插件
-
Cordova 3.x 源码分析(6) -- cordova.js本地交互JS<->Native
-
Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define
-
Cordova 3.x 源码分析(4) -- cordova.js事件通道pub/sub
-
Cordova 3.x 源码分析(2) -- cordova.js概要
-
Cordova 3.x 源码分析(5) -- cordova.js导入、初始化、启动、加载插件
-
Cordova 3.x 源码分析(4) -- cordova.js事件通道pub/sub
-
Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define