常见设计模式

问答

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

////////////构造函数模式
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.sayName()=function(){
    console.log(this.name)
}
var people=new Person('人'，22)
/////////混合模式
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.sayName()=function(){
    console.log(this.name)
}
function Student(name,age,score){
    Person.call(this,name,age);
    this.score=score;
}
function create(Obj){
    functino F(){}
    F.prototype=Obj.prototype;
    return new F();
}
Student.prototype=create(Person);
Student.prototype.sayScore=function(){
    console.log(this.score)
}
////////////模块模式
var Person=(function(){
    var name='hunger'
    return{
        changeName:function(newName){
            name=newName;
        }
        sayName:function(){
            console.log(name)
        }
    }
})()
/////////////工厂模式
function createPerson(opts){
    var person=function(){
        name:opts.name||'ren'
    }
    person.sayName=function(){
        console.log(this.name)
    }
    return new person
}
//////////////////单例模式
var  Car = (function(){
    var instance;
    function init() {
        //私有的变量和函数
        var speed = 0;
        return {
            //定义公共的属性和方法
            getSpeed: function(){
                return speed;
            },
            setSpeed: function( s ){
               speed = s;
            }
        };
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
}());
/////////////////发布订阅模式
var EventCenter=(function(){
    var events={};
    function on(evt,handler){
        events[evt]=events[evt]||[];
        events[evt].push({
            handler:handler
        })
    }
    function fire(evt,args){
        if (!events[evt]) {
            return;
        }
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
    }
    return {
        on:on,
        fire:fire
    }
})()
//////////单例模式范例
var  Car = (function(){
    var instance;
    function init() {
        //私有的变量和函数
        var speed = 0;
        return {
            //定义公共的属性和方法
            getSpeed: function(){
                return speed;
            },
            setSpeed: function( s ){
               speed = s;
            }
        };
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
}());

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

EventManager.on('text:change', function(val){
    console.log('text:change...  now val is ' + val);  
});
EventManager.fire('text:change', '饥人谷');
EventManager.off('text:changer');

var EventManager=(function(){
  var events={};
  function on(evt,handler){
    events[evt]=events[evt]||[];
    events[evt].push(handler);
  }
  function fire(evt){
    if(!events[evt]){
      return;
    }
    for(var i=0;i<events[evt].length;i++){
      events[evt][i]([].slice.call(arguments,1));
    }
  }
  function off(evt){
    delete events[evt];
  }
  return{
    on:on,
    fire:fire,
    off:off
  };
})();

代码

1. 写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时「新增」。
   ps: 1. 计时器内部写法参考前面的任务中Runtime的写法; 2. 体会工厂模式的用法

function createTimer(){
    //todo..    
}
var timer1 = createTimer();
var timer2 = createTimer();
timer1.start();
for(var i=0;i<100;i++){
    console.log(i);
}
timer2.start();
for(var i=0;i<100;i++){
    console.log(i);
}
timer1.end();
timer2.end();
console.log(timer1.get());
console.log(timer2.get());

function createTimer(){
  function Timer(){
    this.start;
    this.end;
  }
  Timer.prototype.start=function(){
    this.start=Date.now();
  }
  Timer.prototype.end=function(){
    this.end=Date.now();
  }
  Timer.prototype.get=function(){
    console.log(this.end-this.start);
  }
  return new Timer;
}

2. 封装一个曝光加载组件，能实现如下方式调用

//$target 是 jquery 对象
// 当窗口滚动时，如果$target 出现在可见区域，执行回调函数里面的代码，且在回调函数内，$(this)代表$target
Expouse.bind($target, function(){
    console.log($(this));    // $target
});
// 当窗口滚动时，如果$target 出现在可见区域，执行回调函数里面的代码，且在回调函数内，$(this)代表$target。 仅执行一次回调函数，下次$target 曝光不再执行
Expourse.one($target, function(){
    console.log($(this));    // $target
})

在线预览

3. 封装一个 轮播插件，分别使用对象方式和 jquery插件方式来调用

// 要求：html 里有多个carousel，当调用时启动全部的 carousel
//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();
//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
    new Carousel($(this));
});

jQuery插件方式
对象方式