js常见设计模式

构造函数模式:

   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
        }
    })()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 JS设计模式大全 构造函数模...
    饥人谷_Leon阅读 3,106评论 0 3
  • 常见的一些设计模式 构造函数模式(Constructor) 工厂模式(factory) 工厂模式和构造函数模式每次...
    DeeJay_Y阅读 2,854评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,382评论 2 17
  • 01 “后来的夏末和飘雪的长夜,或是余生,在此地,或者异乡,当你比现在老些,或是已经很老了,想起那个离开你的人,想...
    青龄阅读 6,612评论 32 75
  • 孽_4432阅读 942评论 0 0