---

keywords: 常用设计模式。

---

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

1、构造函数模式：

function Person(name,age) {
    this.name = name
    this.age = age
}

Person.prototype = {
    sayName:function() {
        console.log(this.name)
    },
    sayAge:function() {
        console.log(this.age)
    }
}

var p1 = new Person('zzm',20)

2、混合模式：

function Person(name,age) {
    this.name = name
    this.age = age
}

Person.prototype = {
    sayName:function() {
        console.log(this.name)
    },
    sayAge:function() {
        console.log(this.age)
    }
}

function Male(name,age) {
    Person.call(this,name,age)
    this.sex = 'Male'
}

Male.prototype = Object.create(Person.prototype)

var p1 = new Male('zzm',20)

3、模块模式：

var p1 = (function(name,age) {
    return {
        sayName:function() {
            console.log(name)
        },
        sayAge:function() {
            console.log(age)
        }
    }
})('zzm',24)

4、工厂模式：

function person(name,age) {
    return {
        sayName:function() {
            console.log(name)
        },
        sayAge:function() {
            console.log(age)
        }
    }
}

var p1 = person('zzm',24)

5、单例模式：

function CreateDiv(html) {
    this.html = html
    this.init
}

CreateDiv.prototype.init = function() {
    var div = document.createElement('div')
    div.innerHTML = this.html
    document.body.appendChild(div)
}

//负责管理单例的逻辑剥离出来

var ProxySingletonCreateDiv = (function(){
    var instance
    return function(html) {
        if(!instance) {
            instance = new CreateDiv(html)
        }
        return instance
    }
})()

var a = new ProxySingletonCreateDiv('sven1')
var b = new ProxySingletonCreateDiv('sven2')

alert(a === b)

6、发布订阅模式：

var EventCenter = (function () {
    var clientList = {}
    return {
        listener:function(event,fn) {
                if(!clientList[event]) {
                    clientList[event] = []
                }
                clientList[event].push(fn)
        },
        trigger:function() {
            var event = Array.prototype.shift.call(arguments),
                fns = clientList[event]
            if(!fns || fns.length === 0) {
                return false
            }
            for(var i = 0,fn;fn = fns[i++];) {
                fn.apply(null,arguments)
            }
        },
        remove:function(event,fn) {
            var fns = clientList[event]
            
            if(!fns) {
                return false
            }
            if(!fn) {
                fns && (fns.length = 0)
            }else{
                for(var i = fns.length - 1,_fn;_fn = fns[i];i--) {
                    if(_fn === fn) {
                        fns.splice(i,1)
                    }
                }
            }
        }
    }
    
})()

EventCenter.listener('squareMeter99',fn1 = function (price){
    console.log('价格：'+price)
})
EventCenter.listener('squareMeter99',fn2 = function (price){
    console.log('价格：'+price)
})

EventCenter.remove('squareMeter99',fn2)
EventCenter.trigger('squareMeter99',200000)

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

var EventManager = (function() {
    var clientList = {}
    return {
        on:function(event,fn) {
            if(!clientList[event]) {
                clientList[event] = []
            }
            clientList[event].push(fn)
        },
        fire:function() {
            var event = Array.prototype.shift.call(arguments)
            var fns = clientList[event]
            if(!fns || (fns.length === 0)){
                return false
            }
            for(var i = 0,fn;fn = fns[i++];){
                fn.apply(null,arguments)
            }
        },
        off:function(event,fn) {
            var fns = clientList[event]
            if(!fns) return false
            if(!fn) {
                fns.length = 0
            }
            for (var i = 0,_fn;_fn = fns[i];i++) {
                if(_fn === fn) {
                    fns.splice(i,1)
                }
            }
        }
    }
})()


//订阅
EventManager.on('text:change',function(val){
    console.log('text:change... now val is ' + val)
})

//发布

EventManager.fire('text:change','jirengu')

//取消
EventManager.off('text:change')

代码

• 写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时

function createTimer(){
    var start,end
    return {
        start:function() {
            return start = new Date()
        },
        end:function() {
            return end = new Date()
        },
        get:function() {
            return end - start
        }
    }   
}

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

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

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

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

效果+代码

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

// 要求：html 里有多个carousel，当调用时启动全部的 carousel

//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();

//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
    new Carousel($(this));
});

方式一：
代码
方式二：
代码