js自定义消息机制研究学习(一) ——看百度搜索输入提示
之前有一次为了做一个类似于谷歌、百度的输入提示,扒了百度的代码(现在的地址http://www.baidu.com/js/bdsug.js?v=1.0.3.0,格式化一下再看)研究了一番,发现百度的消息机制简洁有效,之后根据它写了一套自己的消息机制,应用在其后的一个web ajax聊天程序中。之后和朋友讨论后,完善了一下,做了一个类似于event的事件机制(在普通object上模拟dom事件的自定义事件),现在基于类似的机制应用到了目前的ERP项目中实现了一套js插件机制、iframe通信机制等等(我很惭愧,太懒了,没有学习使用现成的js框架,自己又造了个轮子),现在勤劳一下,拿出来让大家乐呵乐呵,本人主攻后台开发,js只是业余爱好,欢迎指正。
先说说百度的代码,核心的东西,如下:
baidu Code
var J = (function(){ function C(b){ var Z = this.__MSG_QS__; if (!Z[b]) { Z[b] = [] } for (var a = 1, X = arguments.length, Y; a < X; a++) { Z[b].push(arguments[a]) } } function G(Y){ var Z = this.__MSG_QS__[Y.type]; if (Z == null) { return } for (var a = 0, X = Z.length; a < X; a++) { Z[a].rm(Y) } } return { ini: function(X){ X.__MSG_QS__ = {}; X.on = C; X.dm = G; return X } } })();代码是经过压缩处理的,我比较懒,不乱猜测其原名了。
这算是一个很轻量级的消息机制,执行这段代码,获得了J这个对象,可以从代码看出J={ini:function(){……}}
研究一下ini的函数:
View Code
function(X){ X.__MSG_QS__ = {}; X.on = C; X.dm = G; return X }它的作用就是为一个对象绑定 :
一个属性__MSG_QS__
两个函数on(=C),dm(=G)
__MSG_QS__的作用是来存储消息队列,它是一个json对象,所以可以存储多个消息队列类似于这样的格式{"click":[],"blur":[]}
on就是增加监听者
View Code
function C(b){ var Z = this.__MSG_QS__; if (!Z[b]) { Z[b] = [] } for (var a = 1, X = arguments.length, Y; a < X; a++) { Z[b].push(arguments[a]) } }负责将监听消息的对象加入__MSG_QS__中
dm是触发消息的
View Code
function G(Y){ var Z = this.__MSG_QS__[Y.type]; if (Z == null) { return } for (var a = 0, X = Z.length; a < X; a++) { Z[a].rm(Y) } }如果消息侦听队列存在,dm会循环调用监听者的rm函数
写一个简单的示例:
View Code
var dataLayer = J.ini({ getData: function(){ this.dm({type:"data",data:1}) }})var controlLayer=J.ini({ rm:function(Y) { switch(Y.type) { case "data": Y.data++; this.dm({type:"show",data:Y.data}); } }})var viewLayer=J.ini({ rm:function(Y) { switch(Y.type) { case "show": alert(Y.data); } } });dataLayer.on("data",controlLayer);controlLayer.on("show",viewLayer);dataLayer.getData();dataLayer.getData()会产生一个数据(可以想象是服务器传回的),并触发“data”消息
controlLayer对象收到后,处理数据(+1),然后触发“show“消息
viewLayer对象收到后,只是简单将数据弹出
这只是简单的一个示例,你可以把dataLayer,controlLayer,viewLayer当做是独立的js文件(模块),代码
View Code
dataLayer.on("data",controlLayer);controlLayer.on("show",viewLayer);dataLayer.getData();看做是在页面中(或某个main.js)中,那么这些模块之间就很容易的实现消息传递,并且它是低耦合的
补充:Web开发 , Jsp ,