Cordova源码深入分析-第一讲

最近在研究一些新技术方向选型,正好有一些需要借鉴cordova的框架设计模式,所以研究了一下整个框架的设计思路,在此记录下来。

学习的过程中,主要学习他的一下几个方面的内容:

1.插件是如何注册的

2.Js端是如何查找到对应的插件的

3.任何从Js端调用到java端的

4.插件的命名是任何与桥的命名匹配上的。


第一部分是插件任何注册上的

插件的注册分为两部分:

先上一张时序图


这个流程按照时序图来看很简单,比较核心的点就是注解写的部分,这里稍微解释一下:

function prepareNamespace (symbolPath, context) {//context实际上就是window  symbolPath就是表示路径,
//以照相机为例,做此方法的解释:symbolPath=navigator
    if (!symbolPath) {
        return context;
    }
    var parts = symbolPath.split('.');
    var cur = context;
    for (var i = 0, part; part = parts[i]; ++i) { // eslint-disable-line no-cond-assign
        console.log('part='+part)
        cur = cur[part] = cur[part] || {};//window=window[navigator]
    }
    return cur;
}
function clobber (obj, key, value) {
//obj = window[navigator]    key=camera  value=Camera.js[插件模块]

    exports.replaceHookForTesting(obj, key);
    var needsProperty = false;
            console.log('XPC value='+value+"    key="+key+"  obj[key]="+obj[key])

    try {
        obj[key] = value;  //window.navigator.camera=Camera.js(这里需要意会一下,写法是错误的)
    } catch (e) {
        needsProperty = true;
    }
    // Getters can only be overridden by getters.
    if (needsProperty || obj[key] !== value) {
        utils.defineGetter(obj, key, function () {
            return value;
        });
    }
}

这样就就可以在函数中直接调用navigator.camera.xxx了

最后再看一下插件列表的样子:

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
  {
    "id": "cordova-plugin-camera.Camera",
    "file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
    "pluginId": "cordova-plugin-camera",
    "clobbers": [
      "Camera"
    ]
  },
  {
    "id": "cordova-plugin-camera.CameraPopoverOptions",
    "file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js",
    "pluginId": "cordova-plugin-camera",
    "clobbers": [
      "CameraPopoverOptions"
    ]
  },
  {
    "id": "cordova-plugin-camera.camera",
    "file": "plugins/cordova-plugin-camera/www/Camera.js",
    "pluginId": "cordova-plugin-camera",
    "clobbers": [
      "navigator.camera"
    ]
  },
  {
    "id": "cordova-plugin-camera.CameraPopoverHandle",
    "file": "plugins/cordova-plugin-camera/www/CameraPopoverHandle.js",
    "pluginId": "cordova-plugin-camera",
    "clobbers": [
      "CameraPopoverHandle"
    ]
  },
  {
    "id": "cordova-plugin-sms.SMS",
    "file": "plugins/cordova-plugin-sms/www/SMS.js",
    "pluginId": "cordova-plugin-sms",
    "clobbers": [
      "window.SMS"
    ]
  },
  {
    "id": "cordova-plugin-dialogs.notification",
    "file": "plugins/cordova-plugin-dialogs/www/notification.js",
    "pluginId": "cordova-plugin-dialogs",
    "merges": [
      "navigator.notification"
    ]
  },
  {
    "id": "cordova-plugin-dialogs.notification_android",
    "file": "plugins/cordova-plugin-dialogs/www/android/notification.js",
    "pluginId": "cordova-plugin-dialogs",
    "merges": [
      "navigator.notification"
    ]
  }
];
module.exports.metadata = 
// TOP OF METADATA
{
  "cordova-plugin-whitelist": "1.3.3",
  "cordova-plugin-camera": "4.0.2",
  "cordova-plugin-sms": "1.0.5",
  "cordova-plugin-dialogs": "2.0.1"
};
// BOTTOM OF METADATA
});

Cordova简介 【http://cordova.apache.org/docs/en/latest/guide/overview/】 Cordova是一个开源的移动终端开发框架,它提供使用html,css,javascript 技术进行跨平台开发能力,并且封装了一组javascript接口实现访问摄像头,地理定位,存储,网络状态等移动终端的硬件属性。 Android开发平台配置步骤 1. Jdk安装配置。 安装jdk1.7。 配置jdk的系统变量。 添加JAVA_HOME变量: C:\Program Files\Java\jdk1.7.0_79 添加CLASSPATH变量: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar Path变量 里面添加内容: %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 2.adroid sdk安装配置。 1)安装sdk, http://www.cnblogs.com/bjzhanghao/archive/2012/11/14/android-platform-sdk-download-mirror.html 2)配置变量 添加ANDROID_SDK_HOME变量: C:\Program Files (x86)\Android\android-sdk Path变量 里面添加内容: %ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\\tools; 3)下载 Android -API: 打开android sdk manager 窗口下载anroid 6 和android 5.0 api。 下载失败解决方法,在android sdk manager 界面tools菜单 ->options 窗口,进行如下设置: http proxy server :mirrors.opencas.cn; http proxy port :80; 选项框选中 force https://..sources to fetched using http://...; 3.eclipse安装配置。 1)下载eclipse工具。 2)下载安装adt插件。http://dl.google.com/android/ADT-21.0.0.zip 在eclipse界面的help菜单-》install new software,打开安装窗口,点击add按钮,弹出add repository窗口,点击archive按钮,选中 ADT-21.0.0.zip文件,完成安装。 Android开发模式 打开eclipse导入工程,在MainActivity项目里打开assets\www目录,里面就是相关就是有个WEB开发的相关文件,可以添加js,css,html完成相关业务功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值