show code:请按注释的顺序依次查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 添加观察者按钮 -->
<button type="button" id="addNewObserver">添加观察者</button>
<!-- checkbox是被观察的对象，通过checkbox的状态切换，所有观察者都可以观察到他的变化 -->
<input type="checkbox" name="mainCheckbox" id="mainCheckbox" />
<!-- 用于展示所有观察者对象的容器，这里的观察者是一个个checkbox -->
<h3>一下是所有观察者</h3>
<div id="observersContainer" style="background-color: #F2F2F2;width: 400px;height: 300px;">
</div>
</body>
<script type="text/javascript">
//--------------------------步骤五开始--------------------------------
var controlCheckbox = document.getElementById("mainCheckbox"),
addBtn = document.getElementById("addNewObserver"),
container = document.getElementById("observersContainer")
//对要被观察的对象进行扩展
extend(new Subject(),controlCheckbox);
//当点击checkbox被观察对象后,去通知所有的观察者
controlCheckbox["onclick"] = new Function("controlCheckbox.Notify(controlCheckbox.checked)")
//点击观察者按钮时添加观察者
addBtn["onclick"] = AddNewObserver;
//观察者是一个一个的checkbox,每添加一个观察者就会创建一个checkbox并对其使用Observer进行扩展,重写Update方法
function AddNewObserver(){
var check = document.createElement("input")
check.type = "checkbox";
extend(new Observer(),check);
check.Update = function(value){
this.checked = value
}
controlCheckbox.AddObserver(check)
container.appendChild(check)
}
//--------------------------步骤五结束--------------------------------
//--------------------------步骤一开始--------------------------------
//观察者列表
function ObserverList(){
this.observerList = []
//添加观察者对象
this.Add = function(obj){
return this.observerList.push(obj)
}
//将观察者列表清空
this.Empty = function(){
this.observerList = []
}
//获取观察者个数
this.Count = function(){
return this.observerList.length
}
//根据下标获取观察者对象
this.Get = function(index){
if(index>-1 && index<this.observerList.length){
return this.observerList[index]
}
}
//在指定下标中插入观察值,返回-1代表插入失败,成功返回插入的下标
this.Insert = function(obj,index){
if(index >= 0 && index < this.observerList.length){
this.observerList.splice(index,0,obj)
return index
}else{
return -1
}
}
//删除指定下标的元素
this.RemoveIndexAt = function(index){
if(index >=0 && index <this.observerList.length){
this.observerList.splice(index,1)
return index;
}else{
return -1
}
}
}
//--------------------------步骤一结束--------------------------------
//--------------------------步骤二开始--------------------------------
//扩展对象,将obj中的所有属性扩展到extension中
function extend(obj,extension){
for(var key in obj){
extension[key] = obj[key]
}
}
//--------------------------步骤二结束--------------------------------
//--------------------------步骤三开始--------------------------------
//对需要需要观察的对象进行扩展,（在java中这种扩展被称为接口)
function Subject(){
this.observers = new ObserverList()
this.AddObserver = function(observer){
this.observers.Add(observer)
}
this.RemoveObserver = function(observer){
this.observers.RemoveIndexAt(this.observers.observerList.indexOf(observer,0))
}
this.Notify = function(context){
var observerCount = this.observers.Count()
for(let i = 0;i < observerCount;i++){
this.observers.Get(i).Update(context);
}
}
}
//--------------------------步骤三结束--------------------------------
//--------------------------步骤四开始--------------------------------
//这是每一个观察者都需要进行扩展的函数,
function Observer(){
this.Update = function (){
}
}
//--------------------------步骤四结束--------------------------------
</script>
</html>
点击添加观察者下面的会添加一个checkbox,在旁边的checkbox状态发生改变，就会通知下面所有的观察者checkbox进行改变
观察者模式：一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。
