您的位置:首页 > 其它

2 (phonegap源码分析)整体结构

2013-08-09 17:38 309 查看
打开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(),就能调用这个方法了。






                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: