oba.update = function(state){
console.log(state+"hello!");
}
obb.update = function(state){
console.log(state+"world!");
}
pba.setState("open "); //发布者更新了内容
</script>
</body>
</html>
对于以上的内容，或许并没有跟我们的项目中实际出现的问题有关，那我们就来代入这种设计模式，做一个例子：三个文本框ABC，其中A可编辑，B与C不可编辑且B的值是A的值加上后缀"@w3c.com",C的值是A的值加上前缀"ID-"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<label>用户名称：<input type="text" placeholder="请输入用户名称" /></label><br /><br />
<label>生成邮箱：<input type="text" readonly /></label>
<label>生成ID：<input type="text" readonly /></label>
</div>
<script type="text/javascript">
//发布者
function Publisher(obj){
this.observers = [];
var state = obj.value; //让该内容不能直接访问
//新增两个对于state的操作 获取/更新
this.getState=function(){
return state;
}
this.setState=function(value){
state = value;
this.notice();
}
this.obj = obj;
}
Publisher.prototype.addOb=function(observer){
var flag = false;
for (var i = this.observers.length - 1; i >= 0; i--) {
if(this.observers[i]===observer){
flag=true;
}
};
if(!flag){
this.observers.push(observer);
}
return this;
}
Publisher.prototype.removeOb=function(observer){
var observers = this.observers;
for (var i = 0; i < observers.length; i++) {
if(observers[i]===observer){
observers.splice(i,1);
}
};
return this;
}
Publisher.prototype.notice=function(){
var observers = this.observers;
for (var i = 0; i < observers.length; i++) {
observers[i].update(this.getState());
};
}
//订阅者
function Subscribe(obj){
this.obj = obj;
this.update = function(data){
this.obj.value = data;
};
}