模块式所有模块中比较核心的一个模块,它定义一个通道,在这个通道上有一个事件,你可以订阅这个事件,当这个事件被激发的时候,所有注册在这个通道上的订阅者都能收到。这里的订阅者其实就是一个函数,当事件激发,函数就会被调用。

channel的工厂函数的主体代码:


function(require, exports, module) {
  var utils = require('myphonegap/utils');
  
  var Channel = function(type, opts) {
  },
      channel = {
       };
  
  function forceFunction(f) {
  }
  
  Channel.prototype.subscribe = function(f, c, g) {
  };
  Channel.prototype.subscribeOnce = function(f, c) {
   };
  Channel.prototype.unsubscribe = function(g) {
   };
  Channel.prototype.fire = function(e) {
  };
  
  channel.create('onDOMContentLoaded');
  channel.create('onNativeReady');
  channel.create('onMyphonegapReady');
  channel.create('onMyphonegapInfoReady');
  channel.create('onMyphonegapConnectionReady');
  channel.create('onDeviceReady');
  channel.create('onResume');
  channel.create('onPause');
  channel.create('onDestroy');
  
  channel.waitForInitialization('onMyphonegapReady');
  channel.waitForInitialization('onMyphoneConnectionReady');
  module.exports = channel;
}

JS中比较经典的实现的面向对象的方法:将成员变量定义在构造函数中,将成员函数定义在构造函数的原型对象中。这样通过new方法实例出来的对象,成员变量是相互独立的,而成员函数通过原型对象共享。

这个函数对象可以看做是一个通道类的构造函数,最重要的两个成员变量type存储事件类型,handlers存储事件订阅者(函数)。


var Channel = function(type,sticky){
	this.type = type;
	//map of guid -> function
	this.handlers = {};
	// 0 = Non-sticky, 1 = Sticky non-fired, 2 = Sticky fired.
	this.state = sticky?1:0;
	// Used in sticky mode to remember args passed to fire().
	this.fireArgs = null;
	// Used by onHasSubscribersChange to know if there are any listeners.
	this.numHandlers = 0;
	// Function that is called when the first listener is subscribed, or when
	// the last listener is unsubscribed.
	this.onHasSubscribersChange = null;
}



指针指向的是当前执行环境,所以通过new构造新的对象的时候,this指向的就是这个新生成的对象,而之后函数原型对象中的函数执行的时候,函数中的this指针执行的就是调用它们的对象。但是Channel当做一个函数执行时,this指针指向的就是全局执行环境,也就是window这个对象,调用Channel也不能返回一个对象。

channel这个对象,注意这个channel是小写字母开头。先上代码:


channel={
			create:function(type){
				channel[type] = new Channel(type,false);
			},
			createSticky:function(type){
				channel[type] = new Channel(type,true);
			},
			deviceChannelsArray:[],
			deviceChannelsMap:{},
			waitForInitialization:function(feature){
				if(feature){
					var c = channel[feature]||this.createSticky(feature);
					this.deviceChannelsArray.push(c);
					this.deviceChannelsMap[feature]=c;
				}
			},
			initializationComplete:function(feature){
				var c = this.deviceChannelsMap[feature];//
				if(c){
					c.fire();
				}
			},
			join: function (h, c) {//join也就是将一组Channel连接起来,并注入一个在所有Channel上只执行一次的公共处理函数
				var i = c.length;
				var len = i;
				var f = function() {
					if (!(--i)) h();
				};
				for (var j=0; j<len; j++) {
					!c[j].fired?c[j].subscribeOnce(f):i--;
				}
				if (!i) h();
			}
		};

channel是Channel的一个实例,我开始也是这样认为的;而事实上它根本不是Channel的实例,如果勉强一点可以把它看做Channel实例的集合,之所以说勉强,是因为它还提供了一些函数。我想之所以它也取名叫做channel而不叫channelMap或channels的原因是它最终是作为通道模块的导出对象的。

channel对象的功能:通过create方法构造各个通道实例,然后可以动过这个对象访问到他已生成的对象实例。比如channel.create('onDeviceReady')创建通道实例之后,就可以通过channel.onDeviceReady来访问这个Channel实例了,每个Channel提供了subscribe、unsubscribe、subscribeOnce、fire四个方法。

channl这个对象功能,就会写一个ChannelManager的单例。它提供一个create方法,通过不同的通道名生成Channel实例,然后将通道名与实例作为一个键值对存储在Map中,通过一个get函数来访问对应的Channel实例。

ChannelManager.getInstance().create(“onDeviceReady”);
Channel  onDeviceReady = ChannelManager.getInstance().get(“onDeviceReady”);



channel提供的waitForInitialization、和initializationComplete这两个函数,一个是等待初始化,一个是初始化完成。等待初始化将根据名称实例化通道加入到一个表中,调用初始化完成函数就激发这些通道事件。

函数很费解,暂不分析...


onNativeReady通道对象上注册一个函数,函数内容就是打印一条信息。手动触发这个通道事件,看注册的函数是否执行。

//测试channel模块
	var channel = require("myphonegap/channel");
		channel.onNativeReady.subscribe(function(){
			console.info("onNativeReady");
		}
	);
	console.info("before native ready");
	channel.onNativeReady.fire();
	console.info("after native ready");


QIODevice的通道 demo 通道模块_QIODevice的通道 demo

myphonegap.js 源码:


;(function(){
  var  require,//myphonegap内部的工具函数,用来导入相关的模块
        define;//在myphonegap注册相关的模块

  //通过一个立即调用的匿名函数,来给require和define赋上实际的函数
  (function(){
		var modules={};   // 模块数组,添加模块类似给这个对象添加了属性,模块名为属性名,模块对象为属性值,或者说是键值对
				
		build = function(module){        //根据模块对象构造模块导出对象,模块导出对象存储在modules这个对象数组内
			var factory = module.factory;
			module.exports = {};           //给当前模块加入了一个exports属性
			delete module.factory;		   //删除了module的属性
			factory(require,module.exports,module);     //构建导出模块,module.exports是传出参数(实参,引用传递)
			return module.exports;
		}
		
		require = function(id){            //根据模块名称/id请求模块对象,如果是第一次请求,就构建对象
			if(!modules[id]){
				throw "module " + id + " not found!";
			}
			return modules[id].factory?build(modules[id]):modules[id].exports;
		}
	
		define = function(id,factory){		 //定义模块,模块名称、构建模块对象的工厂方法。
			if(modules[id]){                  
				throw "module " + id + " is exist!";
			}
			modules[id] = {					//定义模块对象,左边的值为属性名,右边的值为传入的参数 
				id:id,						
				factory:factory
			};
		}
  })();

  //注册myphonegap模块
  define("myphonegap", function(require, exports, module){
		console.info("create myphonegap module");
		var myphonegap = {
			Hello:function(name){
				console.info("hello, "+name +" !");
			}
		};
		
		module.exports = myphonegap;
  });

  //注册myphonegap/builder模块
	define("myphonegap/builder", function(require, exports, module) {

	});

   define("myphonegap/channel",function(require,exports,module){
		var utils = require("myphonegap/utils"),
			nextGuid = 1;
		//典型的创建对象方法:通过构造器初始化变量,从而让各个实例相互独立;之后通过修改函数原型共享实例方法。
		var Channel = function(type,sticky){
			this.type = type;
			//map of guid -> function
			this.handlers = {};
			// 0 = Non-sticky, 1 = Sticky non-fired, 2 = Sticky fired.
			this.state = sticky?1:0;
			// Used in sticky mode to remember args passed to fire().
			this.fireArgs = null;
			// Used by onHasSubscribersChange to know if there are any listeners.
			this.numHandlers = 0;
			// Function that is called when the first listener is subscribed, or when
			// the last listener is unsubscribed.
			this.onHasSubscribersChange = null;
	 
		}, channel={
			create:function(type){
				channel[type] = new Channel(type,false);
			},
			createSticky:function(type){
				channel[type] = new Channel(type,true);
			},
			deviceReadyChannelsArray: [],
            deviceReadyChannelsMap: {},
			waitForInitialization: function(feature) {
				if (feature) {
					var c = channel[feature] || this.createSticky(feature);
					this.deviceReadyChannelsMap[feature] = c;
					this.deviceReadyChannelsArray.push(c);
				}
            },
			initializationComplete: function(feature) {
				var c = this.deviceReadyChannelsMap[feature];
				if (c) {
					c.fire();
				}
			},
			join: function (h, c) {//join也就是将一组Channel连接起来,并注入一个在所有Channel上只执行一次的公共处理函数
				var i = c.length;
				var len = i;
				var f = function() {
					if (!(--i)) h();
				};
				for (var j=0; j<len; j++) {
					!c[j].fired?c[j].subscribe(f):i--;
				}
				if (!i) h();
			}
		};
	
		function forceFunction(f){
			if (f === null || f === undefined || typeof f != 'function') throw "Function required as first argument!";
		}
		//给对象Channel的原型对象添加订阅函数,参数:函数对象、上下文、全局唯一ID
		Channel.prototype.subscribe = function(f,c,g){
			forceFunction(f);//确保f为函数
			
			if(this.state==2){	//apply方法能劫持另外一个对象的方法,继承另外一个对象的属性;f里面的指针为c(Channel的实例)
				f.apply(c||this,this.fireArgs);
			}
			
			var func = f,
				guid = f.observer_guid;
			if(typeof f == "object"){ func = utils.close(c,f);}
			
			if(!guid){
				guid = ''+ nextGuid++;
			}
			f.observer_guid = guid;
			func.observer_guid = guid;
			
			//防止重复添加
			if(!this.handlers[guid]){
				this.handlers[guid] = func;
				this.numHandlers++;
				if(this.numHandlers===1){
					this.onHasSubscribersChange&&this.onHasSubscribersChange();
				}
			}
			
		};
		Channel.prototype.unsubscribe = function(f){
			forceFunction(f);
			var guid = f.observer_guid;
			if(this.handlers[guid]){
				delete this.handlers[guid];
				this.numHandlers--;
				if(numHandlers===0){
					this.onHasSubscribersChange&&this.onHasSubscribersChange();
				}
			}
		};
		//订阅一次
		Channel.prototype.subscribeOnce = function(f,c,g){
		
		};
		//调用了在通道订阅的所有函数
		Channel.prototype.fire = function(e){
			//console.info('fire start:type/'+this.type + ' numHandlers/' +this.numHandlers); 
			var fail = false,
			fireArgs = Array.prototype.slice.call(arguments);
			// Apply stickiness.
			if (this.state == 1) {
				this.state = 2;
				this.fireArgs = fireArgs;
			}
			if (this.numHandlers) {
				// Copy the values first so that it is safe to modify it from within
				// callbacks.
				var toCall = [];
				for (var item in this.handlers) {
					toCall.push(this.handlers[item]);
				}
				for (var i = 0; i < toCall.length; ++i) {
					toCall[i].apply(this, fireArgs);
					
				//	console.info(this.type+' enter func fire ');
				}
				if (this.state == 2 && this.numHandlers) {
					this.numHandlers = 0;
					this.handlers = {};
					this.onHasSubscribersChange && this.onHasSubscribersChange();
				}
			}
		};
		
		channel.create('onDOMContentLoaded');
		channel.create('onNativeReady');
		channel.create('onDeviceReady');
		
		channel.waitForInitialization('onMyphonegapReady');
		channel.waitForInitialization('onMyphoneConnectionReady');

		module.exports = channel;
		
		//console.info('define myphonegap/channel completed');
	});

  //注册myphonegap/common模块
 	//配置对象,将公共模块组织起来
	define("myphonegap/common",function(require,exports,module){
	});

 
	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){
	});

	(function (context) {
	}(window));
  //所有模块注册完之后,再导入myphonegap至全局环境中
  //window.myphonegap = require('myphonegap');
	//window.myphonegap.Hello("wen");
	
	//测试channel模块
	var channel = require("myphonegap/channel");
		channel.onNativeReady.subscribe(function(){
			console.info("onNativeReady");
		}
	);
	console.info("before native ready");
	channel.onNativeReady.fire();
	console.info("after native ready");
})();