使用js事件機制進行通用操做&特定業務處理的協調

背景:提供一個通用的功能工具條,工具條會在特定的事件響應時進行一些通用處理;第三方系統使用iframe嵌入這個工具條中,在工具條的特定的事件響應時進行通用處理的時候,有可能第三方系統會有一些本身的業務邏輯須要同時處理。json

方案1:判斷工具條中嵌套的第三方系統是否存在某個對象&方法,判斷若是存在,則進行調用。數組

//....其餘代碼
try {
     thirdWebObj = window.frames["mainFrame"].$.thirdWebObj;
     if (thirdWebObj && thirdWebObj.theFunction)//第三方系統調用
        thirdWebObj.theFunction(param1,param2);
} catch (e) {
}

缺點:代碼耦合性太強,須要工具條和第三方系統對自定義的處理業務的對象和方法名硬性匹配上,靈活性太差。工具

方案2:後來想到在父平臺(指的是工具條)中定義一個數組,用於存儲對應的在第三方系統中實現的須要在父平臺響應特定事件的時候同步調用的方法名稱字符串,而後由第三方系統進行註冊,也就是將個性化要調用的方法名稱傳入父平臺的一個初始化方法中。(若是有多個特定響應事件,能夠將數組進一步處理,將各個方法名稱字符串分類作好標記),而後再使用方案1的判斷邏輯進行判斷後調用,這個簡單驗證沒有問題,提升了一點,不用父子系統進行強關聯。this

方案3:以後,同事提醒用事件的方式來處理。spa

在父平臺中定義工具條特定須要處理的對象,以及對象中涉及到的幾個事件&方法code

var SpecialTb = {};
SpecialTb.Event = $({});
 
(function(){
    SpecialTb.specialTbEvent = new specialTbEvent();
    function specialTbEvent(){
        var publicObj = this;
 
        //事件類型定義
        publicObj.EventType = {
          e1 : "e1",
          e2 : "e2"
        };
   
        //事件綁定功能
        publicObj.bindEvent = function(eventName, func){
           SpecialTb.Event.unbind(eventName);//移除以前綁定的事件
           SpecialTb.Event.bind(eventName, func);
        };
 
        //事件觸發功能
        publicObj.fireEvent = function(eventName, params){
           SpecialTb.Event.trigger(eventName, params);
        };
    }
 
})();

在第三方系統,在須要進行自定義業務處理的地方進行以下調用:對象

function eventTest() {
    if (parent.SpecialTb) {
        var parentObj = parent.SpecialTb;
        //第三方綁定事件
        parentObj.specialTbEvent.bindEvent(parentObj.specialTbEvent.EventType.e1, function (event, obj) {
            //第三方事件處理實現
            console.log("demo-e1:" + obj.name);
        });

        parentObj.specialTbEvent.bindEvent(parentObj.specialTbEvent.EventType.e2, function (event, obj) {
            console.log("demo-e2:" + obj.name);
        });
    }
}

這樣以後,在父平臺的事件響應時的通用處理中增長以下處理,便可完成第三方系統的特定處理內容的執行。blog

//SpecialTb觸發事件,傳遞參數時傳遞json對象,這裏單獨以e1這個事件爲例
SpecialTb.specialTbEvent.fireEvent(SpecialTb.specialTbEvent.EventType.e1,[{
    name:"myName"
}]);

這樣作的好處是,父平臺和第三方系統以前的依賴關係完全解耦,只須要約定好事件名稱以及事件響應方法涉及到的參數便可各自完成開發。事件

相關文章
相關標籤/搜索