高级6

作者: 安石0 | 来源:发表于2017-07-18 23:40 被阅读0次

    1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。

    构造函数:

    function Person(name,job){
                              this.name=name;
                              this.job=job;
                              this.Introduce=function(){
                              console.log(this.name+','+this.job)
                                 }
                                         }
    var person1=new Person('八戒','拍马屁')
    person1.Introduce()//八戒,拍马屁
    
    

    混合模式:

    var Person =function(name,age){
    this.name=name;
    this.age=age;
    }
    Person.prototype.sayName=function(){
    console.log(this.name+this.age)
    }
    var Student=function(name,age,score){
    Person.call(this,name,age);
    this.score=score;
    
    }
    Student.prototype=Object.create(Person.prototype)
    var student=new Student('张三','25','99')
    student.sayName()//张三,25
    

    模块模式:

    var Person=(function(){
    var name='张三';
    function sayName(){
    console.log(name)
    }
    return{
    name:name,
    sayName:sayName
    }
    })()
    undefined
    Person.name//"张三"
    Person.sayName()// 张三
    

    工厂模式:

    function Person(name,job){
    var obj={};
    obj.name=name;
    obj.job=job;
    obj.introduce=function(){
    console.log(this.name+','+this.job)
    
    };
    return obj
    }
    var person2=new Person('悟空','牵马')
    person2.introduce()// 悟空,牵马
    

    单例模式:

    var single=(function(){
      var obj;
      function getobj(name){
        if(obj){
          return obj
        }
        obj=new createobj(name)
      }
      function createobj(name){
        this.name=name
      }
      return{
        geto:getobj
      }
    })()
    

    发布订阅模式:

    var eventCenter=(function(){
      var clientList={};
      on=function(key,fn){
        if(!clientList[key]){
          clientList[key]=[]
        }
        
        clientList[key].push({
          fn:fn
        })
        
        
      }
      fire=function(key,args){
        if(!clientList[key]){
          return
        }
        for(var i=0;i<clientList[key].length;i++){
          clientList[key][i].fn()
        
        }
      }
      return{
        on:on,
        fire:fire
      }
    })()
    //每个人先订阅到货通知,通过fire遍历向每个订阅的人发送消息
    eventCenter.on('到货通知',function(){console.log('狗蛋需要房子,到货提醒他')})
    eventCenter.on('到货通知',function(){console.log('狗娃需要房子')})
    eventCenter.on('到货通知',function(){console.log('二狗子需要房子2')})
    eventCenter.on('到货通知',function(){console.log('三狗子需要房子3')})
    eventCenter.fire('到货通知')
    

    2、使用发布订阅模式写一个事件管理器,可以实现如下方式调用

    Event = (function() {
      var clientList = {};
    
      function on(evt, fn) {
        if (!clientList[evt]) {
          clientList[evt] = []
        }
        clientList[evt].push({
          fn: fn
        })
      }
    
      function fire(evt, val) {
        if (!clientList) {
          return
        }
        for (var i = 0; i < clientList[evt].length; i++) {
          clientList[evt][i].fn(val)
        }
      }
    
      function off(evt) {
        if (!clientList[evt].length) {
          return
        }
        var len = clientList[evt].length
        for (var i = 0; i < len; i++) {
          clientList[evt].pop()
        }
      }
      return {
        on: on,
        fire: fire,
        off: off
      }
    })()
    Event.on('change', function(val) {
      console.log('change...  now val is ' + val);
    });
    Event.on('change', function(val) {
      console.log('用户1 ' + val);
    });
    Event.on('change', function(val) {
      console.log('用户2 ' + val);
    });
    Event.on('change', function(val) {
      console.log('用户3 ' + val);
    });
    //Event.fire('change', '饥人谷');
    //Event.off('change');
    

    相关文章

      网友评论

          本文标题:高级6

          本文链接:https://www.haomeiwen.com/subject/svxkkxtx.html