前端设计模式

工厂模式

<script>
    function factory(opts) {
        var person ={
            name: opts
        }
        person.sayName = function () {
            console.log('name:'+opts)
        }
        return person//需要return 出来
    }

    var p1 = factory('nick');
</script>

构造函数模式

<script>
    function Person(name) {
        this.name = name;
    }
    Person.prototype = {
        say: function () {
            console.log(this.name)
        }
    }
    var p2 = new Person('Rick');
</script>

模块模式

<script>
    var Person = (function(){
        function changeName(name) {
            this.name = name;
        }
        function sayName() {
            console.log(this.name)
        }
        return{
            change: changeName,
            say: sayName
        }
    })()
</script>

混合模式

<script>
    var Person = function (name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        sayName: function () {
            console.log(this.name)
        }
    }
    var Student = function (name,age,score) {
        Person.call(this,name,age);
        this.score = score;
    }

    //Student.prototype = Object.create(Person.prototype)
    Student.prototype = create(Person.prototype)
    function create(fn) {
        function F(){};
        F.prototype = fn;
        return new F()
    }

    Student.prototype.constructor = Student;
    Student.prototype.sayScore = function(){
        console.log(this.score);
    }

    var student = new Student('Nick',23,90)
</script>

单例模式

<script>
    var Person = (function () {
        var instance ;
        function init(name) {
            return {
                sayName:function () {
                    console.log(name)
                }
            }
        }
        return {
            getInstance: function (name) {
                if(!instance){
                    instance = init(name)
                }
                return instance
            }
        }
    })()
    var p1 = new Person.getInstance('nick')
    var p2 = new Person.getInstance('rick')
    console.log(p1 === p2)
</script>

发布订阅模式

<script>
    var EventCenter = (function () {
        var event = {};

        function on(evt,handler){
            event[evt] = event[evt] || [];
            event[evt].push({
                handler: handler
            })
        }

        function fire(evt,args) {
            if(!event[evt]){
                return
            }
            for(var i = 0; i<event[evt].length;i++){
                event[evt][i].handler(args);
            }
        }

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

    EventCenter.on('my_event', function(data){
        console.log('my_event received...');
    });

    EventCenter.fire('my_event');
</script>

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

<script>
    var EventManager = (function () {
        var event = {};

        function on(evt,handler){
            event[evt] = event[evt] || [];
            event[evt].push({
                handler: handler
            })
        }

        function fire(evt,args) {
            if(!event[evt]){
                return
            }
            for(var i = 0; i<event[evt].length;i++){
                event[evt][i].handler(args);
            }
        }

        function off(evt) {
            if(!event[evt]){
                return
            }else{
                event[evt] = [];
            }
        }

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

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