背景:提供一个通用的功能工具条,工具条会在特定的事件响应时进行一些通用处理;第三方系统使用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"
}]);

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

使用js事件机制进行通用操作&特定业务处理的协调的更多相关文章

  1. node.js零基础详细教程(4):node.js事件机制、node异步IO操作

    第四章 建议学习时间3小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...

  2. js事件机制

    js事件属性:

  3. 对JS事件机制的深入理解

    一.发生一个事件时,事件及事件处理程序会被放入浏览器的事件队列,事件可归为以下几类: 浏览器事件:window.load.document.DomContentLoaded等 网络请求事件:ajax. ...

  4. js事件机制——事件冒泡和捕获

    概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...

  5. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  6. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

  7. Node.js 事件循环(Event Loop)介绍

    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...

  8. JS执行机制详解,定时器时间间隔的真正含义

     壹 ❀ 引 通过结果倒推过程是我们常用的思考模式,我在上一篇学习promise笔记中,有少量关于promise执行顺序的例子,通过倒推,我成功让自己对于js执行机制的理解一塌糊涂,js事件机制,事件 ...

  9. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

随机推荐

  1. 已知m和n是两个整数,并且m^2+mn+n^2能被9整除,试证m,n都能被3整除。

    引证:m,n都是整数,m2=3n,求证m是3的倍数. 引证证明:(反证法)假设m并非3的倍数,那么m2则不含因数3,则m2≠3n,这与已知条件相反. 所以,当m2=3n时,m必是3的倍数. 有了引证, ...

  2. 网络电台-SHOUTcast

    网络电台种类 目前的网络电台网站一般是基于以下三种协议的: mms.rtsp.http 其中mms是微软公司提出的网络流媒体协议,通常采用wma格式的文件,Android现在还不支持这种协议,也不支持 ...

  3. MP3文件头格式

    MP3文件结构及编解码流程 http://blog.sina.com.cn/s/blog_67b7cb7b01018i2l.html http://blog.csdn.net/liuyan4794/a ...

  4. 流操作结束后,一定要调用close(). java有垃圾回收器, 这样做是多此一举吗?

    流不单在内存中分配了空间,也在操作系统占有了资源, java的gc是能从内存中回收不使用的对象, 但对操作系统分配的资源是无能为力的, 所以就要调用close()方法来通知OS来释放这个资源.

  5. 排序算法及其java实现

    各种排序算法:冒择路(入)兮(稀)快归堆,桶式排序,基数排序 冒泡排序,选择排序,插入排序,稀尔排序,快速排序,归并排序,堆排序,桶式排序,基数排序 一.冒泡排序(BubbleSort) 1. 基本思 ...

  6. Python 整数和浮点数运算

    和数学运算不同的地方是,Python的整数运算结果仍然是整数,浮点数运算结果仍然是浮点数:1 + 2 # ==> 整数 31.0 + 2.0 # ==> 浮点数 3.0 整数和浮点数混合运 ...

  7. js无缝滚动,不平滑(求高人指点)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. 转:sock_ev——linux平台socket事件框架(uri地址的解析) .

    在第一篇中,已经说明,传递的socket地址采取以下形式: [cpp] view plaincopyprint?stream://192.168.2.10:8080   dgram://192.168 ...

  9. 【JS】jQuery中将数组转换成字符串join()和push()使用

    1.push()将元素依次添加至数组:2.join()将数组转换成字符串,里面可以带参数分隔符,默认[,] <script type = text/javascript> $(docume ...

  10. JAVA中的抽象类与接口

    抽象类 abstract class 包含抽象方法的类,叫抽象类.而抽象的概念就是抽象出共同属性:成员变量和方法.所以抽象类可以有private等多种权限的成员变量和非abstract的成员方法.当然 ...