美文网首页Cordova iOS Platformios专题
Cordova webapp实战开发(十)- 开发自己的插件(c

Cordova webapp实战开发(十)- 开发自己的插件(c

作者: travin | 来源:发表于2016-09-05 18:23 被阅读1913次

    随说 :项目如期进行中,利用空闲的时间,理解了一下cordova的打包原理.

    你想要开发自己的插件,首先要理解cordova的调用插件原理。

    1. cordova.js/cordova_plugins.js文件

    ——自动生成####

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

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

    ——手动生成####

    可以直接参考, 有详细的安装指令
    github : https://github.com/apache/cordova-js

    ——cordova目录(Android和iOS的目录有所不同)####

    ;(function() {  
    var CORDOVA_JS_BUILD_LABEL = '4.1.1';  
    // file: src/scripts/require.js  
    //...  
    
    // file: src/cordova.js  
    // cordova主要实现功能实现模块
    define("cordova", function(require, exports, module) { /*...*/ }  
    
    //================下面这些是通用的方法iOS&Android============
    // file: src/common/argscheck.js  
    // 用于plugin中校验参数
    define("cordova/argscheck", function(require, exports, module) { /*...*/ }  
    
    // file: src/common/base64.js  
    // JS->Native交互时对ArrayBuffer进行uint8ToBase64
    define("cordova/base64", function(require, exports, module) { /*...*/ }  
    
    // file: src/common/builder.js  
    // 对象属性操作, 注意,它用到了utils
    define("cordova/builder", function(require, exports, module) { /*...*/ }  
    
    // file: src/common/channel.js  
    // 控制事件调用
    define("cordova/channel", function(require, exports, module) { /*...*/ }  
    
    // file: src/common/exec/proxy.js 
    //  用于Plugin中往已经有的模块上添加方法
    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  
    // 把定义的模块clobber到一个对象,在初始化的时候会赋给window
    define("cordova/modulemapper", function(require, exports, module) { /*...*/ }  
    
    
    // file: src/common/pluginloader.js  
    // 加载所有cordova_plugins.js中定义的模块,执行完成后会触发onPluginsReady
    define("cordova/pluginloader", function(require, exports, module) { /*...*/ } 
     
    // file: src/common/urlutil.js  
    // 获取绝对URL,InAppBrowser中会用到
    define("cordova/urlutil", function(require, exports, module) { /*...*/ }  
    
    // file: src/common/utils.js  
    // 提供了一些工具方法 , 检测是否数组,是否数据等
    define("cordova/utils", function(require, exports, module) { /*...*/ }  
    
    //================下面iOS 与 Android 调用不同,这里是以iOS作为例子=====
    // file: /Users/ednamorales/dev/apache_plugins/cordova-ios/cordova-js-src/exec.js
    // 执行JS->Native交互
    define("cordova/exec", function(require, exports, module) 
    
    // file: /Users/ednamorales/dev/apache_plugins/cordova-ios/cordova-js-src/platform.js
    // 模块处理
    define("cordova/platform", function(require, exports, module)
    
    // 加载cordova模块,赋给window.cordova
    // require()第一次被调用,就开始调用factory
    window.cordova = require('cordova');  
    
    // 加载Plugin代码等初期化处理  
    require('cordova/init');  
    })();  
    

    注 :

    当index.html引入<script type="text/javascript" src="cordova.js"></script>后,

    1-> 定义 require, define; 开始定义 require, define; 实现函数,
    2-> define() 注册各模块, 然后开始window.cordova = require('cordova'); 将cordova赋值给window.cordova
    3-> 第一次require()被调用,就会开始调用factory,然后因为factory里面包含其他require(), 形成循环嵌套
    4-> 至此所有factory,被执行完毕。

    (你喜欢可以修改cordova.js。 +上alert,就能调试他们的加载顺序了)

    ——cordova_plugins.js目录####

    cordova从3.0版本开始不再在cordova.js中包含plugin的代码,cls引入后,plugin采用cls生成cordova_plugins.js然后动态加载需要的plugin

    // 注册cordova/plugin_list 模块
    cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [
        {
            "file": "plugins/cordova-plugin-console/www/console-via-logger.js",
            "id": "cordova-plugin-console.console",
            "pluginId": "cordova-plugin-console",
            "clobbers": [
                "console"
            ]
        }
    ];
    
    module.exports.metadata = 
    // TOP OF METADATA
    {
        "cordova-plugin-console": "1.0.3"
    }
    // BOTTOM OF METADATA
    });
    

    这个模块是怎样添加进去的?在cordova.js中,找到源代码

    // 异步加载 onDeviceReady 受制于
    // 插件加载完毕后,会调用 onPluginsReady.
    exports.load = function(callback) {
        var pathPrefix = findCordovaPath();
        if (pathPrefix === null) {
            console.log('Could not find cordova.js script tag. Plugin loading may fail.');
            pathPrefix = '';
        }
      // 当开始加载的时候,将cordova/plugin_list的list拿出来,一个一个凭借<script>加载进去
        injectIfNecessary('cordova/plugin_list', pathPrefix + 'cordova_plugins.js', function() {
                          var moduleList = require("cordova/plugin_list");
                          handlePluginsObject(pathPrefix, moduleList, callback);
                          }, callback);
    };
    

    2. cordova自定义模块系统,require/define

    模块化系统,异步模块化加载。cordova-js最开始采用的是require.js作者写的almond.js(兼容AMD和CommonJS),但之后由于特殊需求(比如模块不存在的时候要throw异常),最终从almond.js fork过来实现了一个简易CommonJS风格的模块系统,同时提供了和nodejs之间很好的交互。在cordova.js中可以直接使用define()和require(),在其他文件可以通过cordova.define()和cordova.require()来调用。所以src/scripts/require.js中定义的就是一个精简的JavaScript模块系统。

    源码 :

    // 定义2个cordova.js内部使用的全局函数require/define  
    var require,  define;  
      
    // 通过自调用的匿名函数来实例化全局函数require/define  
    (function () {  
        // 定义一个对象,然后以ID为索引包含ID和工厂方法  ,具体看define()定义
        var modules = {},  
        // 定义一个数组,装载正在build中的模块ID
            requireStack = [],  
        // 定义一个对象,标示正在build中模块ID的Map  
            inProgressModules = {},  
            SEPARATOR = ".";  
      
        // 模块build , 当require函数执行时,才会开始build 
        function build(module) {  
            // 备份工厂方法  
            var factory = module.factory,  
            // 对require对象进行特殊处理  
                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);  
                };  
            // 给模块定义一个空的exports对象,防止工厂类方法中的空引用  
            module.exports = {};  
            // 删除工厂方法  
            delete module.factory;  
            // 调用备份的工厂方法(参数必须是require,exports,module,所以你在下面定义的方法基本都是这三个参数)  
            factory(localRequire, module.exports, module);  
            // 返回工厂方法中实现的module.exports对象  
            return module.exports;  
        }  
      
        // 加载模块  
        require = function (id) {  
            // 如果不存在该模块  ,跑出异常
            if (!modules[id]) {  
                throw "module " + id + " not found";  
            // 如果模块正在build中抛出异常  
            } else if (id in inProgressModules) {  
                var cycle = requireStack.slice(inProgressModules[id]).join('->') + '->' + id;  
                throw "Cycle in require graph: " + cycle;  
            }  
            // 如果模块存在工厂方法说明还未进行build(require嵌套)  
            if (modules[id].factory) {  
                try {  
                    // 标示该模块正在build  
                    inProgressModules[id] = requireStack.length;  
                    // 将该模块压入请求栈  
                    requireStack.push(id);  
                    // 模块build,成功后返回module.exports  
                    return build(modules[id]);  
                } finally {  
                    // build完成后删除当前请求  
                    delete inProgressModules[id];  
                    requireStack.pop();  
                }  
            }  
            // build完的模块直接返回module.exports  ,在build 方法中构造成功就会删掉原来的工厂方法
            return modules[id].exports;  
        };  
      
        // 定义模块  
        define = function (id, factory) {  
            // 如果已经存在抛出异常  
            if (modules[id]) {  
                throw "module " + id + " already defined";  
            }  
            // 模块以ID为索引包含ID和工厂方法  
            modules[id] = {  
                id: id,  
                factory: factory  
            };  
        };  
      
        // 移除模块  
        define.remove = function (id) {  
            delete modules[id];  
        };  
      
        // 返回所有模块  
        define.moduleMap = modules;  
    })();  
      
    // 如果处于nodejs环境的话,把require/define暴露给外部  
    if (typeof module === "object" && typeof require === "function") {  
        module.exports.require = require;  
        module.exports.define = define;  
    }  
    
    

    define() : 将modules和factory 包装起来, define的作用只是注册,类似声明import,实际不会调用factory

    require() : 在window.cordova = require('cordova'); 后,第一次被调用,JS开始被调用,然后嵌套调用,然后所有module的factory都会被加载一次。

    整个过程大概就是

    1. cordova.js引入,开始define()各个模块,这个时候不断生成以id,为索引的modules{id : id, factory : factory }对象

    2. 执行到最后window.cordova = require('cordova'); ,第一次开始调用require函数,
      传入id为 cordova, 找到 modules[cordova] 开始build 对应的 module.factory

    3.build成功后,直接返回module.exports,并删除原来的module.facaory。

    至此,整个自定义模块加载完毕,

    相关文章

      网友评论

      • Bury丶冬天:E:\>npm install -g cordova
        npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
        npm ERR! code EINTEGRITY
        npm ERR! sha1-Jw4Gtnsq6UvP7mWS7TnrQjA9GG8= integrity checksum failed when using sha1: wanted sha1-Jw4Gtnsq6UvP7mWS7TnrQjA9GG8= but got sha1-pZQZvb685dOz3Sl1xetS7KpflqU=. (379931 bytes)

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-08-04T02_50_46_704Z-debug.log
      • 65df8204e0d9:大神请问,cordova编译build iOS 会不会加载Xcode 的设置,比如Header search paths,我导入了一个第三方库,里面用到了libxml2这个库,Xcode报错之后,我在Header search paths加入了libxml2的路径,Xcode运行成功,但是用cordova build iOS还是报错找不到文件,怎么办???
        travin:你在编译后的项目里补上路径这是个治标的行为, 实际不影响项目上线, 如果想治本, 你得在导入的这个第三方插件的iOS配置中,先配置好依赖库,在插件配置文件中有相应的文章, 请看这里http://www.jianshu.com/p/5b268ece8bff
      • 江山此夜寒:楼主大神,请教一下,已经开发好的iOSAPP要使用插件化,进行功能模块化,怎么用Cordova实现
        travin:@江山此夜寒 你那就是native App, 我不是很明白你的问题是什么意思,如果你是nativeApp, 又想用cordova插件,这是不可能的。
        江山此夜寒:@travin 楼主,原生OC写的,没用native,也没有cordova,
        travin:请问你的iOSAPP, 是用native,还是cordova编译出来的?

      本文标题:Cordova webapp实战开发(十)- 开发自己的插件(c

      本文链接:https://www.haomeiwen.com/subject/zvbcettx.html