js自定义消息机制研究学习(三)——插件化我们js开发
研究了一些基础的自定义消息机制，对一些简单的开发已经足够。
现在我们来尝试面对一些稍微复杂一些的架构设计。
首先，增加了一个插件模式：
plugs
var plugs=(function(){ function addPlugs(name,plug) { var __plugs=this.__plugs=this.__plugs || {}; if(name && plug) { __plugs[name]={ installed:false, instance:plug }; } } function installPlugs() { var plugs=this.__plugs=this.__plugs || {}; for(var i in plugs) { var plug=plugs[i]; if(!plug.installed) { plug.instance.install(this); plug.installed=true; } } } return { ini:function(X) { X=monitor.ini(X); if(X.live) { var proto=X.prototype; proto.addPlugs=addPlugs; proto.installPlugs=installPlugs; } X.__plugs={}; X.addPlugs=addPlugs; X.installPlugs=installPlugs; } }})();
如果你看过前两篇代码，这段代码是比较容易看懂的。它为传入的对象（或函数）首先绑定了monitor模式，然后为对象增加了两个方法：addPlugs，installPlugs
addPlugs 添加插件
installPlugs 安装插件
添加插件很简单，只是把实体装到一个{}键值对中
安装插件，就会调用每个插件对象的：install方法
为什么要有插件模式呢？我们举个例子来说明
虚构一个需求：
1. 在页面上动画展示龟兔赛跑
2.兔子和乌龟可以说话
3.展示他们比赛过程
这里我没什么素材，只简单展示一下这个程序设计
第一步，我们构造一个Animal函数，作为兔子、乌龟的类，代码如下
Animal
///动物function Animal(config){ config=config || {}; var othis=this; this.name=config["name"] || "Anonymous"; this.x=config["x"] || 0; var toward=1;//右：1，左-1 var __timeout=0; var __speed=5; //说 this.say=function(str) { this.trigger({type:"say",msg:str}); return str; } //停 this.stop=function() { clearTimeout(__timeout); this.trigger({type:"stop",x:this.x}); return this.x; } //跑动 this.run=function(speed) { __speed=speed || __speed; this.x+=__speed*toward; __timeout=setTimeout(function(){ othis.run();},100); this.trigger({type:"run",x:this.x,toward:toward,speed:__speed}); return {x:this.x,toward:toward,speed:__speed}; } //向左转 this.turnLeft=function() { toward=-1; this.trigger({type:"turn",toward:toward}); return toward; } //向右转 this.turnRight=function() { toward=1; this.trigger({type:"turn",toward:toward}); return toward; }}
我们现在有一个动物的类（Animal），它有一些行为：说（say），停（stop),跑（run），左转（turnLeft),右转（turnRight)
因为我在代码里使用了trigger的方法，我们先使用上一篇讲到monitor，初始化一下：
monitor.ini(Animal);
第二步 我们先写一个记录的功能，用来记录动物对象的言行，这里只记录say，stop，turn的消息，代码如下：
View Code
///记录器function Logger(){ this.dom=document.getElementById("log");}Logger.prototype={ log:function(str) { var time=new Date(); this.dom.innerHTML+="<br/>"+str+'<span style="color:gray">('+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+")</span>"; }, handler:function(data,p){ switch(data.type) { case "say": &n
补充：Web开发 , Jsp ,
