常见设计模式

问答

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

• 工厂模式，想造什么造什么，缺点代码重复创造共有属性。
  function createPerson(args){
  var person= {
  name:args.name || 'ruoyu',
  age:args.age || 20
  };
  person.sayName= function(){
  console.log('my name is '+this.name)
  }
  return person;
  }
  var person1= createPerson({name:'hunger',age:2})
  var person2= createPerson({age:20})
  person1=== person2//false

• 构造函数模式，我比工厂模式牛，两大工具强化我，原型共享方法，new来实例化
  function Person(name,age){
  this.name = name;
  this.age = age;
  }
  Person.prototype.sayName=function(){
  return ('my name is '+this.name)
  }
  var p1=new Person('ruoyu',30);
  var p2=new Person('hunger',20);
  p1===p2//false

• 混合模式，工厂构造我都有，中介函数来搭桥

      //混合模式
    var Person=function(name,age){
        this.name=name;
        this.age= age 
    }
    Person.prototype.sayName=function(){
        return ('my name is '+this.name)
    }
    var Student=function(name,age,score){
        Person.call(this,name,age);
        this.score=score;
    }
    //中介函数过渡原型链
    Student.prototype=create(Person.prototype);
    function create(parentObj){
        function F(){};
        F.prototype=parentObj;
        return new F();
    }
    Student.prototype.sayScore=function(){
        return (this.name+'的得分是'+this.score)
    }
    var student1= new Student('hunger',20,80);
    var student2= new Student('ruoyu',20,80);
  

• 模块模式，我的安全系数高，内部东西看不到，非要强来调用我，return接口给你使。
  模块模式
  var Person = (function(){
  var name='bush';
  return　{
  sayName:function(){
  return name;
  },
  sayAge:function(age){
  return (name+' is '+age+' old')
  },
  changeName:function(newName){
  name=newName
  }
  }
  })()
  Person.sayName();
  Person.changeName('rouyu');
  Person.sayAge(20);

• 单例模式，顾名思义，不论你new多少次，永远都是一个我（person1 === person2;//true）
  单例模式
  var Person=(function(){
  function Person(args){
  var args= args || {};
  this.name=args.name || "Tom";
  this.sex= args.sex || 'man';
  }
  var instance;
  return {
  //把函数容器new 生成一个实例，实例存在就不生成
  getInstance:function(args){
  if(!instance){
  instance= new Person(args);
  }
  return instance;
  }
  }
  })()
  //通过函数的相同方法的参数内容不同生成不同对象;
  var person1=Person.getInstance({name:'dota',sex:'man'});
  var person2=Person.getInstance({name:'xiao'});
  person1 === person2;//true

• 发布订阅模式，我的名字最奇怪，我把组件来分解，一步绑定（on），一步调用(fire),一步解绑（off）,多种玩法任你选

  var EventCenter=(function(){
        var events={};
        function fire(evt,args){
            if(!events[evt]){
                return;
            };
            for(var i=0;i<events[evt].length;i++){
            //只能调用一个参数
            // events[evt][i].handler(args)
            //调用多个参数,args是类数组
            events[evt][i].handler([].slice.call(arguments,1))
            }
        }
        function on(evt,handler1){
            events[evt]=events[evt]||[];
            events[evt].push({
                handler:handler1
            })
        }
        function off(evt){
            if(events[evt]){
                delete events[evt]
            }
        }
        return {
            on:on,
            fire:fire,
            off:off
        }
    })()
    EventCenter.on('roll', function () {
        console.log("you are roll now!!!")
    })
  

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

      var EventManager=(function(){
        var events={};
        function fire(evt){
            if(!events[evt]){
                console.log('没有绑定')
                return
            };
            for(var i=0;i<events[evt].length;i++){
                events[evt][i]([].slice.call(arguments,1))
            }
        }
        function on(evt,fun){
            events[evt]=events[evt]||[];
            events[evt].push(fun);
        }
        function off(evt){
            delete events[evt];
        }
        return {
            on:on,
            fire:fire,
            off:off
        }
    })()
    EventManager.on('text:change', function(val){
        console.log('text:change...  now val is ' + val); //绑定了 
    });
    EventManager.fire('text:change', '饥人谷');//输出内容text:change...  now val is 饥人谷
    EventManager.off('text:change');//解绑定
    EventManager.fire('text:change', 'jirengu');//没有绑定

代码题

1.写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时「新增」。
代码
2.封装一个曝光加载组件，能实现如下方式调用
代码预览
3.封装一个 轮播插件，分别使用对象方式和 jquery插件方式来调用
对象方式
jQuery插件