前端设计模式

什么是设计模式

一个模式，就是一个可以复用的方案，可应用于在软件设计中的常见问题
另一种解释是，一个模式，就是一个我们如何解决问题的模板

---

构造函数模式 Constructor

function Person(name, age) {
    this.name = name                   //  定义属性
    this.age = age
}

Person.prototype.greet = function() {  //  定义方法
    console.log("My name is", this.name)
}

let qcy = new Person ( "qcy", 24 )

---

混合模式 Mixin

function Person(name, age) {      //  父类型
    this.name = name
    this.age = age
}

Person.prototype.greet = function() {
    console.log("My name is", this.name)
}

function Student(name, age, score) {  //  子类型
    Person.call(this, name, age)
    this.score = score
}

Person.prototype.printScore = function() {
    console.log(this.score)
}

Student.prototype = Object.create(Person.prototype)   //  子类型继父类型
Student.prototype.constructor = Student
// Object.create = 
// function create (objProto) {
//  function F(){}
//  F.prototype = objProto
//  return new F()
// }

Person.prototype.greet = function() {
    console.log("My name is", this.name)
}


let qcy = new Person ( "qcy", 24 )
let ld = new Student ("ld", 23, 100)

---

工厂模式 Factory

function Factory(name,age,sex){
    let person = {};
    person.name = name;
    person.age = age;
    person.sex = sex;
    person.say = function(){
        return this.name;
    };
    return person;
}

let tom = new Factory('Tom','10','male');
let jerry = new Factory('Jerry','20','female');
  

---

模块模式 Module Pattern

参考

var MODULE = (function () {
    var my = {},
        privateVariable = 1;
    
    function privateMethod() {
        // ...
    }
    
    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };
    
    return my;
}());

---

单例模式 Singleton

var People = (function() {
    var instance;

    function init(e) {
        //define private methods and properties
        //do something
        return {
            foo: function(){
                console.log(this.name + ' hello!')
                },
            name: e
            //define public methods and properties
        };
    }
    return {
        createPeople: function(e) {
            if (!instance) {
                instance = init(e);
            }
            return instance;
        }
    };
}());
var obj1 = People.createPeople('qcy');
var obj2 = People.createPeople('ld');

---

发布订阅模式

        function PubSub(){
            this.eventPool = {}
        }

        PubSub.prototype.on = function(evenName,callBack) {
            this.eventPool[evenName] = this.eventPool[evenName] || []
            this.eventPool[evenName].push({callBack:callBack})
        };

        PubSub.prototype.fire = function() {
            var value = [].slice.call(arguments)
            var evenName = value.shift()
            this.eventPool[evenName].forEach(function(fn){
                // console.log(this.eventPool[evenName])
                fn.callBack.apply(fn,value)
            })
        };

        var pubSub = new PubSub()

---

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

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

          var Event = (function PubSub(){
            eventPool = {}
            var on = function (evenName,callBack) {
                eventPool[evenName] = eventPool[evenName] || []
                eventPool[evenName].push({callBack:callBack})
            };

            var fire = function () {
                var value = [].slice.call(arguments)
                var evenName = value.shift()
                eventPool[evenName].forEach(function(fn){
                    // console.log(eventPool[evenName])
                    fn.callBack.apply(fn,value)
                })
            };

            var off = function (evenName) {
                eventPool[evenName] = []
            };

            return {
                on: on,
                fire: fire,
                off: off
            }
        })()


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

        //  change...  now val is 饥人谷

设计模式 参考