Cordova webapp實(shí)戰(zhàn)開(kāi)發(fā)(十一)- 開(kāi)發(fā)自己的插件(cordova源碼 - 2)

延續(xù)上一篇 cordova的原理解釋, 參考這里

3. cordova PubSub模式 (channel)

cordova基于觀察者模式的,提供了一個(gè)自定義的pub-sub模型,基于該模型提供一些事件,用來(lái)控制事件什么時(shí)候以什么樣的順序被調(diào)用,以及事件的調(diào)用。

cordova/channel, 的代碼結(jié)構(gòu)也是一個(gè)很經(jīng)典的定義結(jié)構(gòu)(構(gòu)造函數(shù)、實(shí)例、修改函數(shù)原型共享實(shí)例方法),它提供事件通道的訂閱(subscribe)、撤消訂閱(unsubscribe)、調(diào)用(fire)等基本方法。最后發(fā)布了9個(gè)事件。

請(qǐng)看源碼 :

// 定義channel模塊
define("cordova/channel", function(require, exports, module) {
    
    var utils = require('cordova/utils'),
    nextGuid = 1;
    
    /**
     * Channel
     * @constructor
     * @param type  String the channel name
    *  ①事件通道的構(gòu)造函數(shù) 
     */
    
    var Channel = function(type, sticky) {
        // 事件通道名稱
        this.type = type;
        // 事件通道上的所有事件處理函數(shù)Map(索引為guid)  
        // Map of guid -> function.
        this.handlers = {};

        // 事件通道的狀態(tài)(0:非sticky, 1:sticky但未調(diào)用, 2:sticky已調(diào)用)  
        // 0 = Non-sticky, 1 = Sticky non-fired, 2 = Sticky fired.
        this.state = sticky ? 1 : 0;

        // 傳給fire()的參數(shù)  
        // Used in sticky mode to remember args passed to fire().
        this.fireArgs = null;

        // 當(dāng)前通道上的事件處理函數(shù)的個(gè)數(shù)
        // Used by onHasSubscribersChange to know if there are any listeners.
        this.numHandlers = 0;
        
        // 訂閱第一個(gè)事件或者取消訂閱最后一個(gè)事件時(shí)調(diào)用自定義的處理  
        // 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.
         */
 
    // 把指定的函數(shù)h訂閱到c的各個(gè)通道上,保證h在每個(gè)通道的最后被執(zhí)行 
    join: function(h, c) {
        var len = c.length,
        i = len,
        f = function() {
            if (!(--i)) h();
        };

        // 把事件處理函數(shù)h訂閱到c的各個(gè)事件通道上  
        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);
        }
        // 執(zhí)行h 
        if (!len) h();
    },
    // 創(chuàng)建事件通道
    create: function(type) {
        return channel[type] = new Channel(type, false);
    },
    // 創(chuàng)建sticky事件通道  
    createSticky: function(type) {
        return channel[type] = new Channel(type, true);
    },
        
        /**
         * cordova Channels that must fire before "deviceready" is fired.
         */
    // 調(diào)用deviceready事件之前要調(diào)用的事件,
    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
         */
    // 設(shè)置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.
         * 表明代碼已經(jīng)初始化,并準(zhǔn)備好被使用
         * @param feature {String}     The unique feature name
         */
    initializationComplete: function(feature) {
        var c = this.deviceReadyChannelsMap[feature];
        if (c) {
            c.fire();
        }
    }
    };
    
    // 判斷是否函數(shù)類型, 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.
     */
    // ③修改函數(shù)原型共享實(shí)例方法
   // 向事件通道訂閱事件處理函數(shù)(subscribe部分)  
   // f:事件處理函數(shù) c:事件的上下文(可省略)
    Channel.prototype.subscribe = function(f, c) {
        // 判讀是否函數(shù)
        forceFunction(f);

        // 如果是被訂閱過(guò)的sticky事件,就直接調(diào)用。
        if (this.state == 2) {
            f.apply(c || this, this.fireArgs);
            return;
        }
        
        var func = f,
        guid = f.observer_guid;

        // 如果事件有上下文,要先把事件函數(shù)包裝一下帶上上下文 
        if (typeof c == "object") { func = utils.close(c, f); }
        
        // 自增長(zhǎng)的ID
        if (!guid) {
            // first time any channel has seen this subscriber
            guid = '' + nextGuid++;
        }
          
        // 把自增長(zhǎng)的ID反向設(shè)置給函數(shù),以后撤消訂閱或內(nèi)部查找用
        func.observer_guid = guid;
        f.observer_guid = guid;
        
        // 判斷該guid索引的事件處理函數(shù)是否存在(保證訂閱一次)   
        // Don't add the same handler more than once.
        if (!this.handlers[guid]) {
            // 訂閱到該通道上(索引為guid)
            this.handlers[guid] = func;
            // 通道上的事件處理函數(shù)的個(gè)數(shù)增加1
            this.numHandlers++;
            // 如果時(shí)間
            if (this.numHandlers == 1) {
                // 訂閱第一個(gè)事件時(shí)調(diào)用自定義的處理(比如:第一次按下返回按鈕提示“再按一次...”)  
                this.onHasSubscribersChange && this.onHasSubscribersChange();
            }
        }
    };
    
    /**
     * Unsubscribes the function with the given guid from the channel.
     */
    // 撤消訂閱通道上的某個(gè)函數(shù)(guid)
    Channel.prototype.unsubscribe = function(f) {
        // need a function to unsubscribe
       //  事件處理函數(shù)校驗(yàn) 
        forceFunction(f);
        
        // 事件處理函數(shù)的guid索引
        var guid = f.observer_guid,
        // 事件處理函數(shù)  
        handler = this.handlers[guid];
        if (handler) {
            // 從該通道上撤消訂閱(索引為guid)
            delete this.handlers[guid];
            // 通道上的事件處理函數(shù)的個(gè)數(shù)減1  
            this.numHandlers--;
            if (this.numHandlers === 0) {
                // 撤消訂閱最后一個(gè)事件時(shí)調(diào)用自定義的處理
                this.onHasSubscribersChange && this.onHasSubscribersChange();
            }
        }
    };
    
    /**
     * Calls all functions subscribed to this channel.
     */
    // 調(diào)用所有被發(fā)布到該通道上的函數(shù)   
    Channel.prototype.fire = function(e) {
        var fail = false,
        fireArgs = Array.prototype.slice.call(arguments);
        // Apply stickiness.
        // sticky事件被調(diào)用時(shí),標(biāo)示為已經(jīng)調(diào)用過(guò)。
        if (this.state == 1) {
            this.state = 2;
            this.fireArgs = fireArgs;
        }
        if (this.numHandlers) {  
        // 把該通道上的所有事件處理函數(shù)拿出來(lái)放到一個(gè)數(shù)組中。  
        var toCall = [];  
        for (var item in this.handlers) {  
            toCall.push(this.handlers[item]);  
        }  
        // 依次調(diào)用通道上的所有事件處理函數(shù)  
        for (var i = 0; i < toCall.length; ++i) {  
            toCall[i].apply(this, fireArgs);  
        }  
        // sticky事件是一次性全部被調(diào)用的,調(diào)用完成后就清空。  
        if (this.state == 2 && this.numHandlers) {  
            this.numHandlers = 0;  
            this.handlers = {};  
            this.onHasSubscribersChange && this.onHasSubscribersChange();  
        }  
    }  
};  
  
// ④創(chuàng)建事件通道(publish部分)-----------------------  
  
// (內(nèi)部事件通道)頁(yè)面加載后DOM解析完成  
channel.createSticky('onDOMContentLoaded');  
  
// (內(nèi)部事件通道)Cordova的native準(zhǔn)備完成  
channel.createSticky('onNativeReady');  
  
// (內(nèi)部事件通道)所有Cordova的JavaScript對(duì)象被創(chuàng)建完成可以開(kāi)始加載插件  
channel.createSticky('onCordovaReady');  
  
// (內(nèi)部事件通道)所有自動(dòng)load的插件js已經(jīng)被加載完成  
channel.createSticky('onPluginsReady');  
  
// Cordova全部準(zhǔn)備完成  
channel.createSticky('onDeviceReady');  
  
// 應(yīng)用重新返回前臺(tái)  
channel.create('onResume');  
  
// 應(yīng)用暫停退到后臺(tái)  
channel.create('onPause');  
  
// (內(nèi)部事件通道)應(yīng)用被關(guān)閉(window.onunload)  
channel.createSticky('onDestroy');  
  
// ⑤設(shè)置deviceready事件之前必須要完成的事件  
// ***onNativeReady和onPluginsReady是平臺(tái)初期化之前要完成的。  
channel.waitForInitialization('onCordovaReady');  
channel.waitForInitialization('onDOMContentLoaded');  
  
module.exports = channel;  
  
});  


以上是源碼,下面說(shuō)說(shuō)理解

---1####

,首先定義幾個(gè)變量,utils, nextGuid, Channel, channel , utils就是前面兩篇文章分析的工具模塊;nextGuid 就是一個(gè)Guid; Channel是一個(gè)普通的構(gòu)造器方法;channel則是最終返回的結(jié)果。

注意到下面這一段代碼(將所有具體邏輯省略) , 將Channel的定義及其原型的修改放在一起,我們可以看到一個(gè)典型的創(chuàng)建對(duì)象的方法:通過(guò)構(gòu)造器初始化內(nèi)部變量,從而讓各個(gè)實(shí)例互相獨(dú)立,通過(guò)修改函數(shù)原型共享實(shí)例方法。

var Channel = function(type, sticky) { 

// 通過(guò)構(gòu)造器初始化內(nèi)部變量
},

channel = {
   // 創(chuàng)建對(duì)象函數(shù)

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

Channel.prototype.unsubscribe = function(f) { 
    //  解除事件處理函數(shù),反注入
};

Channel.prototype.fire = function(e) { 
    // fire(觸發(fā)所有注入的函數(shù))
};

---2####

subscribe是向通道注入事件處理函數(shù)的函數(shù),這個(gè)函數(shù),是負(fù)責(zé)將函數(shù)注入事件通道的、通過(guò)一個(gè)自增長(zhǎng)GUID為注入函數(shù)的索引。
unsubscribe 是反注入,就是將通過(guò)subscribe注入到通道的函數(shù)刪除,通過(guò)guid,找到this. handler中保存的響應(yīng)函數(shù),并且刪除。
fire 調(diào)用、觸發(fā)注入函數(shù), 主要是修改 sticky事件狀態(tài),構(gòu)造調(diào)用函數(shù)的數(shù)組, 并且一次調(diào)用所有事件處理函數(shù)(利用了apply()函數(shù)實(shí)例方法調(diào)用 )


4. cordova 工具類 (utils)

// file: src/common/utils.js
define("cordova/utils", function(require, exports, module) {
       
      //exports是一個(gè){ }空對(duì)象, 賦值給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);
       }
       }
       };
       
/**
 * 通過(guò) obj[key]. 定義一個(gè)Getter方法(內(nèi)部調(diào)用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;
       };
       
/**
 * 返回該項(xiàng)目是否在數(shù)組中。
 */
       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);
       };
       
/**
 * 判斷一個(gè)對(duì)象是否為Array類型
 */
       utils.isArray = Array.isArray ||
       function(a) {return utils.typeName(a) == 'Array';};
       
/**
 * 判斷一個(gè)對(duì)象是否為Date類型
 */
       utils.isDate = function(d) {
       return (d instanceof Date);
       };
       
/**
 * 深度copy一個(gè)對(duì)象,包括這個(gè)對(duì)象的事件等
 */
       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;
       };
       
/**
 * 對(duì)一個(gè)函數(shù)的包裝調(diào)用
 */
       utils.close = function(context, func, params) {
       return function() {
       var args = params || arguments;
       return func.apply(context, args);
       };
       };
       
       //------------------------------------------------------------------------------
       // 內(nèi)部私有函數(shù) , UUIDcreatePart函數(shù)用來(lái)隨機(jī)產(chǎn)生一個(gè)16進(jìn)制的號(hào)碼,接受一個(gè)表示號(hào)碼長(zhǎng)度的參數(shù)(實(shí)際上是最終號(hào)碼長(zhǎng)度的一半),一般用途是做為元素的唯一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;
       }
       
/**
 * 產(chǎn)生隨機(jī)字符串 (UUID)
 */
       utils.createUUID = function() {
       return UUIDcreatePart(4) + '-' +
       UUIDcreatePart(2) + '-' +
       UUIDcreatePart(2) + '-' +
       UUIDcreatePart(2) + '-' +
       UUIDcreatePart(6);
       };
           
/**
 * 繼承子對(duì)象 
 */
       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;
                       };
                       }());
       
/**
 *  彈出消息,不支持彈出消息時(shí),寫(xiě)日志到控制臺(tái)
 */
       utils.alert = function(msg) {
       if (window.alert) {
       window.alert(msg);
       } else if (console && console.log) {
       console.log(msg);
       }
       };

       });

附上JS一些函數(shù)的解析
(1)push():接受任意數(shù)量的參數(shù),逐個(gè)添加到數(shù)組末尾,并返回修改后數(shù)組長(zhǎng)度
(2)pop():移除最后一項(xiàng),修改數(shù)組長(zhǎng)度,返回被移除的項(xiàng)
(3)shift():移除數(shù)組第一項(xiàng),修改數(shù)組長(zhǎng)度,返回被移除的項(xiàng)
(4)unshift():在數(shù)組前端添加任意個(gè)項(xiàng),并返回?cái)?shù)組長(zhǎng)度
(5)slice():基于當(dāng)前數(shù)組的一個(gè)或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組,可以接受1或2個(gè)參數(shù),即要返回項(xiàng)的起始和結(jié)束位置,只有一個(gè)參數(shù)時(shí),返回從該參數(shù)指定位置開(kāi)始到末尾,有兩個(gè)參數(shù),返回這兩個(gè)參數(shù)之間項(xiàng)(前閉后開(kāi)區(qū)間),slice不會(huì)影響原數(shù)組。若參數(shù)為負(fù)數(shù),則用數(shù)組長(zhǎng)度加上參數(shù)直至為正數(shù),若結(jié)束位置小于起始位置,返回空數(shù)組。
(6)splice():返回從原數(shù)組中刪除的項(xiàng)構(gòu)成的數(shù)組,若沒(méi)有刪除,返回空數(shù)組
刪除:可以刪除任意數(shù)量的項(xiàng),只需指定2個(gè)參數(shù),要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù),如splice(0,2)會(huì)刪除前面兩項(xiàng)
插入:可以向指定位置插入任意數(shù)量的項(xiàng),只需提供3個(gè)參數(shù),起始位置,0(要?jiǎng)h除的數(shù)),要插入的項(xiàng),如果要插入多個(gè)項(xiàng),可以傳入第四、第五以至任意多個(gè)項(xiàng)
替換:可以向指定位置插入任意數(shù)量的項(xiàng),且同時(shí)刪除任意數(shù)量的項(xiàng)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,665評(píng)論 0 4
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,506評(píng)論 19 139
  • -1- 我是2016年10月1日開(kāi)始寫(xiě)文章,一直到現(xiàn)在每天都會(huì)寫(xiě)。 一個(gè)好的習(xí)慣是值得堅(jiān)持,但是堅(jiān)持的過(guò)程肯定是要...
    老李說(shuō)心態(tài)閱讀 636評(píng)論 18 6
  • 我近期的目標(biāo)是提高兒子的學(xué)習(xí)熱情和書(shū)寫(xiě)的認(rèn)真,提升學(xué)習(xí)成績(jī),為小升初打下堅(jiān)實(shí)的基礎(chǔ),順利升入理想的初中。 一、繼續(xù)...
    歸韻閱讀 148評(píng)論 0 2
  • 俠客行 [ 唐·李白 ] 趙客縵胡纓,吳鉤霜雪明。 銀鞍照白馬,颯沓如流星。 十步殺一人,千里不留行。 事了拂衣去...
    吾道唯孤閱讀 313評(píng)論 1 1

友情鏈接更多精彩內(nèi)容