常见设计模式

问答

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

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

      var EventManager=(function(){
        var events={};
        function fire(evt){
            if(!events[evt]){
                console.log('没有绑定')
                return
            };
            for(var i=0;i

代码题

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

你可能感兴趣的:(常见设计模式)