使用js事件机制进行通用操作&特定业务处理的协调

使用js事件机制进行通用操作&特定业务处理的协调

背景：提供一个通用的功能工具条，工具条会在特定的事件响应时进行一些通用处理；第三方系统使用iframe嵌入这个工具条中，在工具条的特定的事件响应时进行通用处理的时候，有可能第三方系统会有一些自己的业务逻辑需要同时处理。

方案1：判断工具条中嵌套的第三方系统是否存在某个对象&方法，判断如果存在，则进行调用。

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

缺点：代码耦合性太强，需要工具条和第三方系统对自定义的处理业务的对象和方法名硬性匹配上，灵活性太差。

方案2：后来想到在父平台（指的是工具条）中定义一个数组，用于存储对应的在第三方系统中实现的需要在父平台响应特定事件的时候同步调用的方法名称字符串，然后由第三方系统进行注册，也就是将个性化要调用的方法名称传入父平台的一个初始化方法中。（如果有多个特定响应事件，可以将数组进一步处理，将各个方法名称字符串分类做好标记），然后再使用方案1的判断逻辑进行判断后调用，这个简单验证没有问题，提高了一点，不用父子系统进行强关联。

方案3：之后，同事提醒用事件的方式来处理。

在父平台中定义工具条特定需要处理的对象，以及对象中涉及到的几个事件&方法

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

这样之后，在父平台的事件响应时的通用处理中增加如下处理，即可完成第三方系统的特定处理内容的执行。

//SpecialTb触发事件，传递参数时传递json对象,这里单独以e1这个事件为例SpecialTb.specialTbEvent.fireEvent(SpecialTb.specialTbEvent.EventType.e1,[{    name:"myName"}]);

这样做的好处是，父平台和第三方系统之前的依赖关系彻底解耦，只需要约定好事件名称以及事件响应方法涉及到的参数即可各自完成开发。