打開cordova-android-2.4.0.js這個文件,會看到6000多行的代碼,隨着版本的更新,相信代碼量會更多。但是等你基本看懂了整個源碼,理清楚了phonegap的結構,就發現其實軟件本身的結構比它的源碼清晰得太多了。其它的語言有人能把一個很複雜的框架的代碼寫得不需要文檔也能輕易看懂,JS的話估計很難。
下面言歸正傳,開始分析源碼。
;(function(){
var require,//myphonegap內部的工具函數,用來導入相關的模塊
define;//在myphonegap註冊相關的模塊
//通過一個立即調用的匿名函數,來給require和define賦上實際的函數
(function(){
})();
//註冊myphonegap模塊
define("myphonegap", function(require, exports, module){
});
//註冊myphonegap/builder模塊
define("myphonegap/builder", function(require, exports, module){
});
//註冊myphonegap/channel模塊
define("myphonegap/channel", function(require, exports, module){
});
//註冊myphonegap/common模塊
define("myphonegap/common", function(require, exports, module{
});
//註冊myphonegap/exec模塊
define("myphonegap/exec", function(require, exports, module){
});
//註冊myphonegap/platform模塊
define("myphonegap/platform", function(require, exports, module){
});
// 這裏省略了其它插件的註冊
//註冊myphonegap/utils模塊
define("myphonegap/utils", function(require, exports, module){
});
//所有模塊註冊完之後,再導入cordova至全局環境中
window.myphonegap = require('myphonegap');
// 自調用函數初始化啓動
(function(context){
}(window));
})();
上面是整個phonegap框架js部分的整體架構,這裏用myphonegap替代了原文中的cordova,因爲我們將對這個JS文件實現的功能實現一個模擬。整個JS的代碼都封裝在一個匿名函數裏面,並即時調用,這個函數寫法是(function(){ })( ) ,這種寫法不是phonegap的獨創。
在jquery中也是如此封裝的,據說這種寫法正是通過jquery得以發揚光大。
;(function(window, undefined){
// 在內部可以安全使用window和undefined了
})(this);
這個匿名函數內有兩個最重要的變量,require的define。 根據上面使用這兩個變量的情況來看,這兩個變量指向的都是函數對象。他們的功能:一個是定義模塊對象,一個是請求模塊對象。
模塊對象可以理解爲phonegap要實現的功能模塊,通過這個模塊可以調用這個模塊定義的相應功能,比如最上層的myphonegap模塊。
window.myphonegap = require('myphonegap');
上面這句代碼就是請求phonegap模塊,並將這個對象作爲一個屬性添加到window中,這樣在加載了這個js文件之後,就能通過phonegap這個對象來調用這個模塊實現的功能了。比如這個模塊有個一個Hello方法,在加載文件後,用phonegap.Hello(),就能調用這個方法了。