网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Javascript设计模式之观察者模式(推荐)
内容
    观察者模式有时也称为发布--订阅模式，在观察者模式中，有一个观察者可以管理所有的目标，等到有状态发生改变的时候发出通知
    1.什么是观察者模式
    观察者模式有时也称为发布--订阅模式，在观察者模式中，有一个观察者可以管理所有的目标，等到有状态发生改变的时候发出通知。（其实sql server中的发布订阅也是这个道理）
    2.通俗解释
    假如以前村里的广播是一个观察者，那么每个村民就是被观察对象，如果村子里有通知，政策发生改变的时候，就需要通过广播把这个消息发布出去，而不用直接一家家的跑去发通知。
    3.代码
    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>观察者模式</title> 
    </head> 
    <body> 
    <script> 
    var observer = {//观察者 
    villagers: [],//村名 
    addVillager: function (callback) {//增加村名 
    this.villagers[this.villagers.length] = callback; 
    }, 
    removeVillager: function (callback) {//移除村名 
    for (var i = 0; i < this.villagers.length; i++) { 
    if (this.villagers[i] === callback) { 
    delete this.villagers[i]; 
    } 
    } 
    }, 
    publish: function (info) {//发布信息 
    for (var i = 0; i < this.villagers.length; i++) { 
    if (typeof this.villagers[i] === 'function') { 
    this.villagers[i](info); 
    } 
    } 
    }, 
    make: function (o) {//这里将村子建一个这种广播方式 
    for (var i in this) { 
    o[i] = this[i]; 
    } 
    } 
    }; 
    var village1 = {}; 
    observer.make(village1);//将村子1建立这种观察者模式 
    var villager11 = { 
    read: function (what) { 
    console.log('我是第一个村子的第一个村名：' + what); 
    } 
    }; 
    var villager12 = { 
    read: function (what) { 
    console.log('我是第一个村子的第二个村名：'+what); 
    } 
    }; 
    village1.addVillager(villager11.read); 
    village1.addVillager(villager12.read); 
    village1.publish('大家来开会呀！！！'); 
    village1.removeVillager(villager11.read); 
    village1.publish('大家来开会呀！！！'); 
    /* var village2 = { 
    myAddVillager:function(callback){ 
    this.addVillager(callback); 
    }, 
    myRemoveVillager:function(callback){ 
    this.removeVillager(callback); 
    }, 
    myPublish:function(info){ 
    this.publish(info); 
    } 
    }; 
    observer.make(village2);//将村子1建立这种观察者模式 
    var villager21 = { 
    read: function (what) { 
    console.log('我是第二个村子的第一个村名：' + what); 
    } 
    }; 
    var villager22 = { 
    read: function (what) { 
    console.log('我是第二个村子的第二个村名：'+what); 
    } 
    }; 
    village2.myAddVillager(villager21.read); 
    village2.myAddVillager(villager22.read); 
    village2.myPublish('大家来领猪肉了！！！');*/
    </script> 
    </body> 
    </html>
    写到这里观察者模式实现了，但是可能会有多个村子需要这种模式，那我们这里将observer改造成构造函数的方式
    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>观察者模式</title> 
    </head> 
    <body> 
    <script> 
    function Observer(){//观察者，这里采用构造函数，可以对不同村落进行使用 
    if(!(this instanceof Observer)){ 
    return new Observer(); 
    } 
    this.villagers = []; 
    }; 
    Observer.prototype = { 
    // villagers: [],//村名 
    addVillager: function (callback) {//增加村名 
    this.villagers[this.villagers.length] = callback; 
    }, 
    removeVillager: function (callback) {//移除村名 
    for (var i = 0; i < this.villagers.length; i++) { 
    if (this.villagers[i] === callback) { 
    delete this.villagers[i]; 
    } 
    } 
    }, 
    publish: function (info) {//发布信息 
    for (var i = 0; i < this.villagers.length; i++) { 
    if (typeof this.villagers[i] === 'function') { 
    this.villagers[i](info); 
    } 
    } 
    }, 
    make: function (o) {//这里将村子建一个这种广播方式 
    for (var i in this) { 
    o[i] = this[i]; 
    } 
    } 
    } 
    var village1 = {}; 
    var observer1 = new Observer(); 
    observer1.make(village1);//将村子1建立这种观察者模式 
    var villager11 = { 
    read: function (what) { 
    console.log('我是第一个村子的第一个村名：' + what); 
    } 
    }; 
    var villager12 = { 
    read: function (what) { 
    console.log('我是第一个村子的第二个村名：'+what); 
    } 
    }; 
    village1.addVillager(villager11.read); 
    village1.addVillager(villager12.read); 
    village1.publish('大家来开会呀！！！'); 
    village1.removeVillager(villager11.read); 
    village1.publish('大家来开会呀！！！'); 
    var village2 = { 
    myAddVillager:function(callback){ 
    this.addVillager(callback); 
    }, 
    myRemoveVillager:function(callback){ 
    this.removeVillager(callback); 
    }, 
    myPublish:function(info){ 
    this.publish(info); 
    } 
    }; 
    var observer2 = new Observer(); 
    observer2.make(village2);//将村子1建立这种观察者模式 
    var villager21 = { 
    read: function (what) { 
    console.log('我是第二个村子的第一个村名：' + what); 
    } 
    }; 
    var villager22 = { 
    read: function (what) { 
    console.log('我是第二个村子的第二个村名：'+what); 
    } 
    }; 
    village2.myAddVillager(villager21.read); 
    village2.myAddVillager(villager22.read); 
    village2.myPublish('大家来领猪肉了！！！'); 
    </script> 
    </body> 
    </html>
    有关Javascript设计模式之观察者模式小编就给大家介绍到这里，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 9:01:27