当前位置:编程学习 > JS >>

js自定义消息机制研究学习(二)——做一些改动,定制自己的消息机制

今天我来尝试修改一下代码,以使它更适合我们实际的研易做图况。

 

首先,我们修改一下代码,让它可读性稍微好一点。(原代码参考上文)

 

monitor.js

var  monitor= (function(){        function bind(b){            var queue = this.__MSG_QS__;            if (!queue[b]) {                queue[b] = []            }            for (var a = 1, X = arguments.length, Y; a < X; a++) {                queue[b].push(arguments[a])            }        }        function trigger(Y){            var queue = this.__MSG_QS__[Y.type];            if (queue == null) {                return            }            for (var a = 0, X = queue.length; a < X; a++) {                queue[a].handler(Y)            }        }        return {            ini: function(X){                X.__MSG_QS__ = {};                X.bind = bind;                X.trigger = trigger;                return X            }        }})();好了,现在我们有一个monitor对象了

 

 

现在来说说加入我们使用这个对象有可能要应对的情况。

 

 

 

一、将消息直接通知到函数

 

如果我们要简单监听某个对象里的某个消息,譬如下面代码中这个对象里的sendData消息

 

View Code

var obj1=monitor.ini({sendData:function(){    this.trigger({type:"sendData",data:"1"});}});我们只是想简单的将这个要发送的数据alert一下,代码如下:

 

View Code

obj1.bind("sendData",{handler:function(data){   alert(data.data);}});  

 

高兴的事,我们很快写完了。我么可以不要{}呢,也不写handler么?

 

我们改改monitor,让它能直接将消息发送到函数,对monitor的trigger内的方法做一个简单的更改,如下:

 

View Code

function trigger(Y){            var queue = this.__MSG_QS__[Y.type];            if (queue == null) {                return            }            for (var a = 0, X = queue.length; a < X; a++) {               if(queue[a].handler)               {                   queue[a].handler(Y)               }               else               {                   queue[a](Y);                }            }        }  

 

 

这样我们就可以直接将消息发送到函数。

 

当然,这也会给我们带来一点小小的,因为加了if语句的性能损失。10000000次trigger的一个测试数据:1076(未修改前):1134(修改后)——单位毫秒

 

 

一个极端点的更改,我们只想把消息传给函数,不传给对象,那么修改如下:

 

 

monitor 只传函数

var  monitor= (function(){        function bind(b){            var queue = this.__MSG_QS__;            if (!queue[b]) {                queue[b] = []            }            for (var a = 1, X = arguments.length, Y; a < X; a++) {               queue[b].push(arguments[a])            }        }        function trigger(Y){            var queue = this.__MSG_QS__[Y.type];            if (queue == null) {                return            }            for (var a = 0, X = queue.length; a < X; a++) {                   queue[a](Y);             }        }        return {            ini: function(X){                X.__MSG_QS__ = {};                X.bind = bind;                X.trigger = trigger;                return X            }        }})();

这样,我们只能bind函数了,这样的方式在一些简单的应用中效果也不错,比如我们用jQuery的bind方法就可以实现很多我们要的效果,为了实现bind函数内this指向消息源头,这里使用call方法就可,代码:

 

View Code

这样,我们可以基于一个或者数个复杂的对象做一些扩展开发,就像基于dom的click等事件来实现我们想要的效果一样简单。

 

但如果涉及多个对象直接互相传递消息,只bind到函数就有点限制。如果不是特殊的需求,不建议用这种方式,最好bind到对象,兼容bind到对象和函数,也会让我们少敲一些handler,因此也是个不错的选择

 

补充:Web开发 , Jsp ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,