Cordova webapp实战开发(十一)- 开发自己的插件(cordova源码 - 2)

延续上一篇 cordova的原理解释, 参考这里

3. cordova PubSub模式 (channel)

cordova基于观察者模式的,提供了一个自定义的pub-sub模型,基于该模型提供一些事件,用来控制事件什么时候以什么样的顺序被调用,以及事件的调用。

cordova/channel, 的代码结构也是一个很经典的定义结构(构造函数、实例、修改函数原型共享实例方法),它提供事件通道的订阅(subscribe)、撤消订阅(unsubscribe)、调用(fire)等基本方法。最后发布了9个事件。

请看源码 :

// 定义channel模块
define("cordova/channel", function(require, exports, module) {
    
    var utils = require('cordova/utils'),
    nextGuid = 1;
    
    /**
     * Channel
     * @constructor
     * @param type  String the channel name
    *  ①事件通道的构造函数 
     */
    
    var Channel = function(type, sticky) {
        // 事件通道名称
        this.type = type;
        // 事件通道上的所有事件处理函数Map(索引为guid)  
        // Map of guid -> function.
        this.handlers = {};

        // 事件通道的状态(0:非sticky, 1:sticky但未调用, 2:sticky已调用)  
        // 0 = Non-sticky, 1 = Sticky non-fired, 2 = Sticky fired.
        this.state = sticky ? 1 : 0;

        // 传给fire()的参数  
        // 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 = {
        /**
         * Calls the provided function only after all of the channels specified
         * have been fired. All channels must be sticky channels.
         */
 
    // 把指定的函数h订阅到c的各个通道上,保证h在每个通道的最后被执行 
    join: function(h, c) {
        var len = c.length,
        i = len,
        f = function() {
            if (!(--i)) h();
        };

        // 把事件处理函数h订阅到c的各个事件通道上  
        for (var j=0; j<len; j++) {
            // 必须是sticky事件通道
            if (c[j].state === 0) {
                throw Error('Can only use join with sticky channels.');
            }
            c[j].subscribe(f);
        }
        // 执行h 
        if (!len) h();
    },
    // 创建事件通道
    create: function(type) {
        return channel[type] = new Channel(type, false);
    },
    // 创建sticky事件通道  
    createSticky: function(type) {
        return channel[type] = new Channel(type, true);
    },
        
        /**
         * cordova Channels that must fire before "deviceready" is fired.
         */
    // 调用deviceready事件之前要调用的事件,
    deviceReadyChannelsArray: [],
    deviceReadyChannelsMap: {},
        
        /**
         * Indicate that a feature needs to be initialized before it is ready to be used.
         * This holds up Cordova's "deviceready" event until the feature has been initialized
         * and Cordova.initComplete(feature) is called.
         *
         * @param feature {String}     The unique feature name
         */
    // 设置deviceready事件之前必须要完成的事件 
    waitForInitialization: function(feature) {
        if (feature) {
            var c = channel[feature] || this.createSticky(feature);
            this.deviceReadyChannelsMap[feature] = c;
            this.deviceReadyChannelsArray.push(c);
        }
    },
        
        /**
         * Indicate that initialization code has completed and the feature is ready to be used.
         * 表明代码已经初始化,并准备好被使用
         * @param feature {String}     The unique feature name
         */
    initializationComplete: function(feature) {
        var c = this.deviceReadyChannelsMap[feature];
        if (c) {
            c.fire();
        }
    }
    };
    
    // 判断是否函数类型, Js中类型的判断可参考这里
    function forceFunction(f) {
        if (typeof f != 'function') throw "Function required as first argument!";
    }
    
    /**
     * Subscribes the given function to the channel. Any time that
     * Channel.fire is called so too will the function.
     * Optionally specify an execution context for the function
     * and a guid that can be used to stop subscribing to the channel.
     * Returns the guid.
     */
    // ③修改函数原型共享实例方法
   // 向事件通道订阅事件处理函数(subscribe部分)  
   // f:事件处理函数 c:事件的上下文(可省略)
    Channel.prototype.subscribe = function(f, c) {
        // 判读是否函数
        forceFunction(f);

        // 如果是被订阅过的sticky事件,就直接调用。
        if (this.state == 2) {
            f.apply(c || this, this.fireArgs);
            return;
        }
        
        var func = f,
        guid = f.observer_guid;

        // 如果事件有上下文,要先把事件函数包装一下带上上下文 
        if (typeof c == "object") { func = utils.close(c, f); }
        
        // 自增长的ID
        if (!guid) {
            // first time any channel has seen this subscriber
            guid = '' + nextGuid++;
        }
          
        // 把自增长的ID反向设置给函数,以后撤消订阅或内部查找用
        func.observer_guid = guid;
        f.observer_guid = guid;
        
        // 判断该guid索引的事件处理函数是否存在(保证订阅一次)   
        // Don't add the same handler more than once.
        if (!this.handlers[guid]) {
            // 订阅到该通道上(索引为guid)
            this.handlers[guid] = func;
            // 通道上的事件处理函数的个数增加1
            this.numHandlers++;
            // 如果时间
            if (this.numHandlers == 1) {
                // 订阅第一个事件时调用自定义的处理(比如:第一次按下返回按钮提示“再按一次...”)  
                this.onHasSubscribersChange && this.onHasSubscribersChange();
            }
        }
    };
    
    /**
     * Unsubscribes the function with the given guid from the channel.
     */
    // 撤消订阅通道上的某个函数(guid)
    Channel.prototype.unsubscribe = function(f) {
        // need a function to unsubscribe
       //  事件处理函数校验 
        forceFunction(f);
        
        // 事件处理函数的guid索引
        var guid = f.observer_guid,
        // 事件处理函数  
        handler = this.handlers[guid];
        if (handler) {
            // 从该通道上撤消订阅(索引为guid)
            delete this.handlers[guid];
            // 通道上的事件处理函数的个数减1  
            this.numHandlers--;
            if (this.numHandlers === 0) {
                // 撤消订阅最后一个事件时调用自定义的处理
                this.onHasSubscribersChange && this.onHasSubscribersChange();
            }
        }
    };
    
    /**
     * Calls all functions subscribed to this channel.
     */
    // 调用所有被发布到该通道上的函数   
    Channel.prototype.fire = function(e) {
        var fail = false,
        fireArgs = Array.prototype.slice.call(arguments);
        // Apply stickiness.
        // sticky事件被调用时,标示为已经调用过。
        if (this.state == 1) {
            this.state = 2;
            this.fireArgs = fireArgs;
        }
        if (this.numHandlers) {  
        // 把该通道上的所有事件处理函数拿出来放到一个数组中。  
        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);  
        }  
        // sticky事件是一次性全部被调用的,调用完成后就清空。  
        if (this.state == 2 && this.numHandlers) {  
            this.numHandlers = 0;  
            this.handlers = {};  
            this.onHasSubscribersChange && this.onHasSubscribersChange();  
        }  
    }  
};  
  
// ④创建事件通道(publish部分)-----------------------  
  
// (内部事件通道)页面加载后DOM解析完成  
channel.createSticky('onDOMContentLoaded');  
  
// (内部事件通道)Cordova的native准备完成  
channel.createSticky('onNativeReady');  
  
// (内部事件通道)所有Cordova的JavaScript对象被创建完成可以开始加载插件  
channel.createSticky('onCordovaReady');  
  
// (内部事件通道)所有自动load的插件js已经被加载完成  
channel.createSticky('onPluginsReady');  
  
// Cordova全部准备完成  
channel.createSticky('onDeviceReady');  
  
// 应用重新返回前台  
channel.create('onResume');  
  
// 应用暂停退到后台  
channel.create('onPause');  
  
// (内部事件通道)应用被关闭(window.onunload)  
channel.createSticky('onDestroy');  
  
// ⑤设置deviceready事件之前必须要完成的事件  
// ***onNativeReady和onPluginsReady是平台初期化之前要完成的。  
channel.waitForInitialization('onCordovaReady');  
channel.waitForInitialization('onDOMContentLoaded');  
  
module.exports = channel;  
  
});  


以上是源码,下面说说理解

---1####

,首先定义几个变量,utils, nextGuid, Channel, channel , utils就是前面两篇文章分析的工具模块;nextGuid 就是一个Guid; Channel是一个普通的构造器方法;channel则是最终返回的结果。

注意到下面这一段代码(将所有具体逻辑省略) , 将Channel的定义及其原型的修改放在一起,我们可以看到一个典型的创建对象的方法:通过构造器初始化内部变量,从而让各个实例互相独立,通过修改函数原型共享实例方法。

var Channel = function(type, sticky) { 

// 通过构造器初始化内部变量
},

channel = {
   // 创建对象函数

Channel.prototype.subscribe = function(f, c) {
       // subscribe(向事件通道注入事件处理函数)
};

Channel.prototype.unsubscribe = function(f) { 
    //  解除事件处理函数,反注入
};

Channel.prototype.fire = function(e) { 
    // fire(触发所有注入的函数)
};

---2####

subscribe是向通道注入事件处理函数的函数,这个函数,是负责将函数注入事件通道的、通过一个自增长GUID为注入函数的索引。
unsubscribe 是反注入,就是将通过subscribe注入到通道的函数删除,通过guid,找到this. handler中保存的响应函数,并且删除。
fire 调用、触发注入函数, 主要是修改 sticky事件状态,构造调用函数的数组, 并且一次调用所有事件处理函数(利用了apply()函数实例方法调用 )


4. cordova 工具类 (utils)

// file: src/common/utils.js
define("cordova/utils", function(require, exports, module) {
       
      //exports是一个{ }空对象, 赋值给utils
       var utils = exports;
       
/**
 * Defines a property getter / setter for obj[key].
 */
       utils.defineGetterSetter = function(obj, key, getFunc, opt_setFunc) {
       if (Object.defineProperty) {
       var desc = {
       get: getFunc,
       configurable: true
       };
       if (opt_setFunc) {
       desc.set = opt_setFunc;
       }
       Object.defineProperty(obj, key, desc);
       } else {
       obj.__defineGetter__(key, getFunc);
       if (opt_setFunc) {
       obj.__defineSetter__(key, opt_setFunc);
       }
       }
       };
       
/**
 * 通过 obj[key]. 定义一个Getter方法(内部调用utils.defineGetterSetter)
 */
       utils.defineGetter = utils.defineGetterSetter;
       
       utils.arrayIndexOf = function(a, item) {
       if (a.indexOf) {
       return a.indexOf(item);
       }
       var len = a.length;
       for (var i = 0; i < len; ++i) {
       if (a[i] == item) {
       return i;
       }
       }
       return -1;
       };
       
/**
 * 返回该项目是否在数组中。
 */
       utils.arrayRemove = function(a, item) {
       var index = utils.arrayIndexOf(a, item);
       if (index != -1) {
       a.splice(index, 1);
       }
       return index != -1;
       };
       
       utils.typeName = function(val) {
       return Object.prototype.toString.call(val).slice(8, -1);
       };
       
/**
 * 判断一个对象是否为Array类型
 */
       utils.isArray = Array.isArray ||
       function(a) {return utils.typeName(a) == 'Array';};
       
/**
 * 判断一个对象是否为Date类型
 */
       utils.isDate = function(d) {
       return (d instanceof Date);
       };
       
/**
 * 深度copy一个对象,包括这个对象的事件等
 */
       utils.clone = function(obj) {
       if(!obj || typeof obj == 'function' || utils.isDate(obj) || typeof obj != 'object') {
       return obj;
       }
       
       var retVal, i;
       
       if(utils.isArray(obj)){
       retVal = [];
       for(i = 0; i < obj.length; ++i){
       retVal.push(utils.clone(obj[i]));
       }
       return retVal;
       }
       
       retVal = {};
       for(i in obj){
       if(!(i in retVal) || retVal[i] != obj[i]) {
       retVal[i] = utils.clone(obj[i]);
       }
       }
       return retVal;
       };
       
/**
 * 对一个函数的包装调用
 */
       utils.close = function(context, func, params) {
       return function() {
       var args = params || arguments;
       return func.apply(context, args);
       };
       };
       
       //------------------------------------------------------------------------------
       // 内部私有函数 , UUIDcreatePart函数用来随机产生一个16进制的号码,接受一个表示号码长度的参数(实际上是最终号码长度的一半),一般用途是做为元素的唯一ID;
       function UUIDcreatePart(length) {
       var uuidpart = "";
       for (var i=0; i<length; i++) {
       var uuidchar = parseInt((Math.random() * 256), 10).toString(16);
       if (uuidchar.length == 1) {
       uuidchar = "0" + uuidchar;
       }
       uuidpart += uuidchar;
       }
       return uuidpart;
       }
       
/**
 * 产生随机字符串 (UUID)
 */
       utils.createUUID = function() {
       return UUIDcreatePart(4) + '-' +
       UUIDcreatePart(2) + '-' +
       UUIDcreatePart(2) + '-' +
       UUIDcreatePart(2) + '-' +
       UUIDcreatePart(6);
       };
           
/**
 * 继承子对象 
 */
       utils.extend = (function() {
                       // proxy used to establish prototype chain
                       var F = function() {};
                       // extend Child from Parent
                       return function(Child, Parent) {
                       
                       F.prototype = Parent.prototype;
                       Child.prototype = new F();
                       Child.__super__ = Parent.prototype;
                       Child.prototype.constructor = Child;
                       };
                       }());
       
/**
 *  弹出消息,不支持弹出消息时,写日志到控制台
 */
       utils.alert = function(msg) {
       if (window.alert) {
       window.alert(msg);
       } else if (console && console.log) {
       console.log(msg);
       }
       };

       });

附上JS一些函数的解析
(1)push():接受任意数量的参数,逐个添加到数组末尾,并返回修改后数组长度
(2)pop():移除最后一项,修改数组长度,返回被移除的项
(3)shift():移除数组第一项,修改数组长度,返回被移除的项
(4)unshift():在数组前端添加任意个项,并返回数组长度
(5)slice():基于当前数组的一个或多个项创建一个新数组,可以接受1或2个参数,即要返回项的起始和结束位置,只有一个参数时,返回从该参数指定位置开始到末尾,有两个参数,返回这两个参数之间项(前闭后开区间),slice不会影响原数组。若参数为负数,则用数组长度加上参数直至为正数,若结束位置小于起始位置,返回空数组。
(6)splice():返回从原数组中删除的项构成的数组,若没有删除,返回空数组
删除:可以删除任意数量的项,只需指定2个参数,要删除的第一项的位置和要删除的项数,如splice(0,2)会删除前面两项
插入:可以向指定位置插入任意数量的项,只需提供3个参数,起始位置,0(要删除的数),要插入的项,如果要插入多个项,可以传入第四、第五以至任意多个项
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • -1- 我是2016年10月1日开始写文章,一直到现在每天都会写。 一个好的习惯是值得坚持,但是坚持的过程肯定是要...
    老李说心态阅读 523评论 18 6
  • 我近期的目标是提高儿子的学习热情和书写的认真,提升学习成绩,为小升初打下坚实的基础,顺利升入理想的初中。 一、继续...
    归韵阅读 114评论 0 2
  • 侠客行 [ 唐·李白 ] 赵客缦胡缨,吴钩霜雪明。 银鞍照白马,飒沓如流星。 十步杀一人,千里不留行。 事了拂衣去...
    吾道唯孤阅读 273评论 1 1