美文网首页
js常见设计模式

js常见设计模式

作者: 饥人谷_流水 | 来源:发表于2017-10-13 13:45 被阅读0次

    构造函数模式:

       function Person(name,age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.run = function(){
            console.log("I can run!");
        }
        Person.prototype.eat = function(){
            console.log("I can eat!");
        }
    
        var Tom = new Person("Tom",22);
        Tom.run();
        Tom.eat();
    

    工厂模式:

        function Person(name,age){
            var obj = new Object();
            obj.name = name;
            obj.age= age;
            obj.run = function(){
                console.log("I can run!");
            }
            obj.eat = function(){
                console.log("I can eat!");
            }
            return obj;
        }
        var Tom = Person("zhaobw",22);
        Tom.run();
        Tom.eat();
    

    模块模式

        var Person = (function(){
            function run(){
                console.log("I can run!");
            }
            function eat(){
                console.log("I can eat!");
            }
            return {
                "run":run,
                "eat":eat
            }
        })()
        Person.run();
        Person.eat();
    

    混合模式

      function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.run = function(){
            console.log("I can run!!");
        }
        function Student(name,age,sex){
            Person.call(this,name,age);
            this.sex = sex;
        }
        Student.prototype = create(Person.prototype);
        console.log(Student.prototype);
        function create(parentObj){
            var obj = {};
            obj.__proto__ = parentObj;
            return obj;
        }
        var test = new Student("zhaobw",22,"man");
        test.run();
    

    单例模式

      var demo = (function(){
            var temp;
            function init(){
                return {
                    'name':"zhaobw"
                };
            }
            return {
                getObj:function(){
                    if(!temp){
                        temp = init();
                    }
                    return temp;
                }
            }
        })()
        var test = demo.getObj();
        var test2 = demo.getObj();
        console.log(test === test2);//ture
    

    发布订阅模式

      var EventCenter = (function(){
            var Events = {};
            function on(evt,handler){
                Events[evt] = Events[evt]||[];
                Events[evt].push({
                    "handler":handler
                });
            }
            function fire(evt,args){
                if(!Events[evt]){
                    console.log("undefined");
                    return;
                }else{
                    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
            }
        })()
    

    相关文章

      网友评论

          本文标题:js常见设计模式

          本文链接:https://www.haomeiwen.com/subject/ndmtsxtx.html