美文网首页
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设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • JS常见设计模式

    常见的一些设计模式 构造函数模式(Constructor) 工厂模式(factory) 工厂模式和构造函数模式每次...

  • js常见设计模式

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

  • js常见设计模式

    构造函数模式: 工厂模式: 模块模式 混合模式 单例模式 发布订阅模式

  • js常见设计模式

    //工厂模式function Person(name, age) {this.name = name;this.a...

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • JS设计模式

    JS中的一些设计模式: 设计模式是软件设计中常见问题的通用可重用解决方案,以下是一些设计模式是: 创建模式:该模式...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(二)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(三) 《JS设计模...

  • 《JS设计模式》读书笔记(三)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

网友评论

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

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