常见设计模式

问答

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

1.构造函数模式

//构造函数模式
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.sayName=function (){
    console.log(this.name);
}
var p=new Person("candy",20);
console.log(p.sayName());

2.混合模式

//混合模式（构造函数创建对象+继承）
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;
}
// Student.prototype=Object.create(Person.prototype);
Student.prototype=create(Person.prototype);
function create(proto){
    function F(){};
    F.prototype=proto;
    return new F();
}
Student.prototype.sayScore=function(){
    console.log(this.score);
}

3.模块模式

//模块模式(立即执行函数，私有变量)
var Person=(function(){
    var name="candy";
    return {
        getName:function(){
            console.log(name);
        },
        changeName:function(newName){
            name=newName;
        }
    }
})()
Person.changeName("hank");
Person.getName();

4.工厂模式

//工厂模式 
//函数内部创建一个对象(可以是字面量方式、构造函数方式、或其它方式)，再把这个对象return出来
function createPerson(opts){
    var person={
        name:opts.name||"candy"
    }
    person.sayName=function(){
        console.log(this.name);
    }
    return person;
}
var p1=createPerson({})
var p2=createPerson({name:"hank"})

5.单例模式

//单例模式
var singleModule = (function(){
    var instance;
    function getInstance(){
        if( !instance){
             instance = new Person();
        }
        return instance;
    }
    function Person(){
       ......
    }
    return {
        getInstance : getInstance
    }
})();

6.发布订阅模式

//发布订阅模式
var EventCenter=(function(){
    var events={};    //events={evt:[{handler:fun1},{handler:fun2}]}
    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

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

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

效果演示

代码

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

function createTimer(){
    var timer={
       start:function(){
            t1=Date.now();
        },
       end:function(){
            t2=Date.now();
        },
       get:function(){
            return t2-t1; 
       },
    }
 return timer;
}
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());

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
})

实现如下：

var Exposure=(function(){
    var hasShow=false;
    function one($target,callback){
        $(window).on("scroll",function(){
            if(hasShow){
              return;
            }
            if(isVisible($target)){
                callback.call($target);   //即调用callback()，使$(this)代表$target
                hasShow=true;
            }
        })      
    }
    function every($target,callback){
        $(window).on("scroll",function(){
            if(isVisible($target)){
                callback.call($target);
            }
        })
        
    }
    function isVisible($target){
        var winH=$(window).height(),
            scrollTop=$(window).scrollTop(),
            offsetTop=$target.offset().top,
            $targetH=$target.innerHeight();
        return ((winH+scrollTop>offsetTop)&&(scrollTop

效果演示

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

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

通过创建对象的方式启动：效果演示
通过插件方式启动：效果演示