前端设计模式

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

构造函数模式

function Person(name, age){
    this.name = name
    this.age = age
}
Person.prototype = {
    sayName: function(){
        console.log(this.name)
    }
}
var person1 = new Person('小王', 22)
person1.sayName() //小王

构造函数模式是创建特定类型的对象的一种模式，把私有属性绑定到函数内部的this上，把一些共有方法写到函数的原型链上, 然后通过new 关键字来创建一个实例对象。
工厂模式

function createPerson(name, age){
    var person = {
        name: name,
        age: age,
        sayName: function(){
            console.log(this.name)
        }
    }
    return person
}
var person1 = createPerson('小王', 22)
var person2 = createPerson('老王', 24)

工厂模式可以无数次地调用这个函数，在该例中都会返回一个包含2个属性一个方法的对象。但不能解决对象的识别问题。

---

单例模式

var Person = (function(){
    var instance;
    function init(name){
        return {
            name: name
        }
    }
    return {
        createPerson: function(name){
            if (!instance) {
                instance = init(name)
            }
            return instance
        }
    }
})()
Person.createPerson('小王') //小王
Person.createPerson('小黄') //小黄

单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

单例模式是一种常用的模式，节约内存。有一些对象我们往往只需要一个。例如，当我们点击登录按钮时，页面会弹出一个登录悬浮窗，而这个登录悬浮窗是唯一的，无论点击多少次登录按钮，这个悬浮窗只会被创建一次，这时，这个悬浮窗就适合用单例模式来创建。

---

混合模式

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
}
var fn = function(){}
fn.prototype = Person.prototype
Student.prototype = new fn()  //实现继承

var a = new Student('chen', '24', 22)
a.sayName() //chen

建立在构造函数模式的基础上，实现子类继承父类的属性和方法，子类可以在扩展属性和方法。

---

模块模式

var Person = (function(){
    var name = 'css'
    function sayName(){
        console.log(name)
    }
    return {
        name: name,
        sayName: sayName() //css
    }
})()  //通过闭包来实现一个模块

使用立即执行函数包裹代码段，使内部的私有变量和方法不会暴露出来，通过return函数给外部提供使用内部方法的接口。
这样的好处是不会污染全局变量，外部无法访问或者改变模块内部的变量和方法。

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

var Event = (function(){
    var events = {}  //储存key:value
    function on(evt, handler){
        events[evt] = events[evt] || []
        //events['key'] = [{handler: function(){}}]
        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)
        }
    }
    function off(evt){
        delete events[evt]
    }
    return {
        on: on,
        fire: fire,
        off: off,
    }
})()

image.png