菜鳥學習cordova－android的js源碼(1)

　　使用phonegap快兩年了，最近纔有衝動去看源碼，真是太慚愧了，也只能怪本身仍是個js菜鳥。因此準備一邊學習一邊寫點東西記錄一下。

　　我如今用的是Cordova3.5版本（如今已經3.6了），js代碼大概分爲兩塊：cordova.js對應着cordova的基本框架，android原生代碼是單獨的一個工程，做爲library被引用，也能夠導出jar使用；cordova_plugin.js和plugins下的插件模塊，對應着工程org.apache.cordova下的java代碼，經過這部分能夠和android原生代碼交互，固然也能夠本身定義插件。

　　先看cordova.js，一開始定義了兩個方法：

　　

var require, define;

    (function() {
        //各個模塊的map對象
        var modules = {},
        //模塊請求棧
        requireStack = [],
        //模快在requireStack的索引的map對象
        inProgressModules = {},
        SEPARATOR = ".";

        function build(module) {
            var factory = module.factory,

            localRequire = function(id) {
                var resultantId = id;
                //模塊id使用了相對路徑
                if (id.charAt(0) === ".") {
                    resultantId = module.id.slice(0, module.id.lastIndexOf(SEPARATOR)) + SEPARATOR + id.slice(2);
                }
                return require(resultantId);
            };

            module.exports = {};
            delete module.factory;
            factory(localRequire, module.exports, module);
            return module.exports;
        }

        require = function(id) {
            if (!modules[id]) {
                throw "module " + id + " not found";
            } else if (id in inProgressModules) {
                //在使用模塊的時候，出現了循環require的狀況，這時候應該檢查你的模塊劃分了。
                var cycle = requireStack.slice(inProgressModules[id]).join('->') + '->' + id;
                throw "Cycle in require graph: " + cycle;
            }
            if (modules[id].factory) {
                try {
                    inProgressModules[id] = requireStack.length;
                    requireStack.push(id);
                    return build(modules[id]);
                } finally {
                    delete inProgressModules[id];
                    requireStack.pop();
                }
            }
            //當模塊被請求事後，就不用再去執行factory方法了。
            return modules[id].exports;
        };

        define = function(id, factory) {
            if (modules[id]) {
                throw "module " + id + " already defined";
            }

            modules[id] = {
                id: id,
                factory: factory
            };
        };

        define.remove = function(id) {
            delete modules[id];
        };

        define.moduleMap = modules;
    })();

 

　　沒錯就是require和define，前端小夥伴們確定很熟悉了，也確定比我瞭解。不過cordova這裏的這兩個方法實現不了模塊化加載，你還得一次把js所有引用進來。

　　define是定義模塊，

　　

define("cordova", function(require, exports, module) {
});

　　require是使用模塊，

　　

var cordova = require('cordova');

　　看代碼的時候先看define的實現，再看require的實現，最後再看build方法。

　　cordova一開始部分就這些了，仍是不難的。