谈一谈JS消息机制和事件机制的理解


Posted in Javascript onApril 14, 2016

消息/事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message). 其实原理是类似的,只不过有些实现的方式要复杂一点。我们deviceone统一就叫消息.

消息基础概念

还有一些初学者不太熟悉这个机制,我们先简单介绍一些基础概念,如果熟悉的人可以跳过这个部分。
一个/条消息可以理解为是一个数据结构,包含以下几个基本部分:

1.消息源:就是消息的来源,发出这个消息的对象

2.消息名:就是消息的唯一标示

3.消息数据:消息发出后附带的数据,有可能数据是空

消息从种类上又可以分为2种:

1.系统消息:由操作系统或deviceone系统发送出来的消息,消息的名称是固定的。

2.自定义消息:由开发者自己定义,自己发送出来的消息,消息的名字是随意的,可以任意定义。

举例说明:

比如用户点击一个do_Button按钮,就会触发一个系统消息,包含3个部分:

1.消息源:用户点中的button对象

2.消息名:touch

3.消息数据:这个消息没有附带数据

比如用户通过do_Button按钮触发一个自定义事件,包含3个部分:

1.消息源: button对象

2.消息名:用户随便定义,叫aaa,bbb,ccc都可以

3.消息数据:附带的数据由触发消息的时候设定

发布/订阅模式

发布/订阅模式是最常用的设计模式之一,是消息机制的核心,其特点就是降低耦合度,让二个独立的对象不互相依赖。简单介绍一下,熟悉的同学可以跳过。

我们先从现实的一个简单例子来说明这个问题,参考下图:

谈一谈JS消息机制和事件机制的理解

从这个图我们可以看出

1.消费者和出版社互相不认识,消费者不需要了解他想要的杂志是具体哪家出版社出的;出版社也不需要了解具体是哪个人定了他们出版社发行的书。

2.消费者和出版社必须都认识邮局。

3.消费者需要告诉邮局消费者的名字地址以及想要订阅的杂志名字

4.可以多个消费者订阅同一本杂志

5.邮局拿到杂志后,会一一通知消费者,通知的时候同时把杂志送到消费者手里。

看完上面现实例子,我们再来看抽象的描述会更清晰一点,看下图:

谈一谈JS消息机制和事件机制的理解

和上面的实际例子描述一一对应:

1.系统/开发者和函数对象互相不依赖,系统/开发者只管触发一个消息,并不关心谁去接受

2.系统/开发者和函数对象必须能获取到消息源对象

3.函数对象订阅消息的时候需要标示消息的名称和函数对象的引用

4.可以多个函数对象订阅同一个消息源同一名字的消息

5.消息源触发消息会一一通知所有订阅者,并把data数据传递到回调函数对象

看完抽象的描述,我们最后来看实际的deviceone开发的例子,还是以do_Button为例子。

1. 当用户点击一个button,触摸到的时候,系统会获取到button这个对象作为消息源,fire一个”touch”消息,任何订阅了”touch”消息的函数对象都会接收到这个消息并引起函数的执行。

//获取button对象
var btn_hello = ui("btn_hello");
//定义函数对象
function f(){
//当btn_hello这个按钮接收到手指点击就会执行下面的代码
deviceone.print("f 函数接收到点击触发消息")
}
function f(){
//当btn_hello这个按钮接收到手指点击就会执行下面的代码
deviceone.print("f 函数接收到点击触发消息")
}
//f,f订阅button的touch消息
btn_hello.on("touch",f);
btn_hello.on("touch",f);

2. 我们可以为button对象定义2个自定义的消息”message1”和”message2”,分别有2个函数对象订阅这2个消息。但是最后要触发这个消息必须是开发者通过调用fire函数才能触发,这就是和系统消息的区别。

//获取button对象
var btn_hello = ui("btn_hello");
//定义函数对象
function f(d){
//当btn_hello这个按钮接收到开发者触发的消息message就会执行下面的代码
deviceone.print("f 函数接收到message消息,消息的数据是:"+d)
}
function f(d){
//当btn_hello这个按钮接收到开发者触发的消息message就会执行下面的代码
deviceone.print("f 函数接收到message消息,消息的数据是:"+d)
}
//f,f订阅button的touch消息
btn_hello.on("message",f);
btn_hello.on("message",f);
//触发消息
btn_hello.fire("message","data");
btn_hello.fire("message","data");

看到这里,你肯定会奇怪,为什么我们要在button上自定义对象?这有神马意义?其实确实没有意义也没有必要,这里只是拿button举例子,在常规的开发中,基本不会这么用。

消息的使用

前面讲了这么多,现在才是deviceone消息的使用。使用其实很简单,上面的例子基本说明的了系统事件和自定义事件的使用方法。

有几个概念再说明一下

1.deviceone的所有对象,包括UI,MM,SM对象都可以是消息源

// SM对象可以是消息源
var page = sm("do_Page");
page.on("loaded",function()){
// 这个是page对象的系统消息,这个消息不需要手动触发,系统会自动触发
}
page.on("message",function(d)){
// 这个是page对象的自定义消息
}
page.fire("message","data");
// MM对象可以是消息源
var http = mm("do_Http");
http.on("result",function()){
// 这个是http对象的系统消息,这个消息不需要手动触发,接受到http服务端的反馈后会自动触发
}
http.on("message",function(d)){
// 这个是http对象的自定义消息
}
http.fire("message","data");
//UI对象可以是消息源
var alayout = ui("alayout_id");
alayout.on("touch",function()){
// 这个是alayout对象的系统消息,这个消息不需要手动触发,手机点击就会触发
}
alayout.on("message",function(d)){
// 这个是alayout对象的自定义消息
}
alayout.fire("message","data");

2.消息源对象有作用域,所以订阅和触发的消息源必须是是一个作用域的同一个对象。这里结合数据分享和数据传递文档来理解。

看以下的例子,test1.ui和test2.ui有可能在一个page作用域,也有可能不在一个作业域,只有在一个作用域fire的消息才能正确送达回调函数。

判断是否一样,可以通过打印page的地址 page.getAddress().

//在test.ui.js里订阅消息
var page = sm("do_Page");
deviceone.print(page.getAddress());
page.on("message",function(d)){
deviceone.print(d);
}
//在test.ui.js触发消息
var page = sm("do_Page");
deviceone.print(page.getAddress());
page.fire("message","data");

如果不在同一page作用域,则可以把消息订阅在2个page都能共享到的app作用域
上面的代码改成:

//在test.ui.js里订阅消息
var app = sm("do_App");
app.on("message",function(d)){
deviceone.print(d);
}
//在test.ui.js触发消息
var app = sm("do_App");
app.fire("message","data");

3.同样的函数对象可以重复订阅一个对象源的消息,触发消息的时候会使函数执行多次,这是初学者经常犯的错误。

var page = sm("do_Page");
var count = ;
function f(){
deviceone.print("执行次数"+(count++));
}
page.on("message",f);
page.on("message",f);
page.fire("message");

看上面的例子,如果执行的话,会打印2此,因为订阅了2次,或许你会说谁会写这样的代码?实际情况肯定没有这么容易看出来执行了重复的on函数,实际情况经常是比如在点击事件里执行on函数,每点击一下按钮,就重复订阅一次。

4.消息的订阅一定要在消息的触发之前,这是初学者经常犯的错误。

var page = sm("do_Page");
var count = ;
function f(){
deviceone.print("执行次数"+(count++));
}
page.fire("message");
page.on("message",f);

看上面的例子,如果执行的话,会没有效果,或许你会说谁会写这样的代码?实际情况肯定没有这么容易看出来顺序反了,实际情况经常是比如on函数执行在某一个函数的回调函数里,你无法确定回调函数啥时候执行,是否是在fire之前执行。一般碰到这种情况可以加几个deviceone.print打印一下看看是on先执行还是fire先执行。

5.有订阅就有取消订阅,取消订阅是off函数,之所以很少用,是因为closePage的时候会自动把当前page作用域订阅的消息全部释放。

但是如果消息订阅在app作用域,就要注意,可能需要手动去取消订阅。否则就会出现触发消息的时候会使函数执行多次的问题。

var page = sm("do_Page");
var count = ;
function f(){
deviceone.print("执行次数"+(count++));
}
page.on("message",f);
page.fire("message");
.page.off("message");
page.fire("message");

看上面的例子,打印只会执行一次,因为fire一次后就取消订阅了。

Javascript 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 #Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 #Javascript
javaScript数组迭代方法详解
Apr 14 #Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 #Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 #Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 #Javascript
You might like
php 应用程序安全防范技术研究
2009/09/25 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
python保存字符串到文件的方法
2015/07/01 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
在django中自定义字段Field详解
2019/12/03 Python
python算的上脚本语言吗
2020/06/22 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
自我鉴定写作要点
2014/01/17 职场文书
总会计师岗位职责
2014/02/19 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
应届大专生求职信
2014/06/26 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
酒店温馨提示语
2015/07/14 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL