美文网首页
Web40.设计模式

Web40.设计模式

作者: FiredEarthMusic | 来源:发表于2017-12-20 17:04 被阅读13次

构造函数模式

//constructor

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    return this.name;
};
var student = new Person("fem", 30);

混合模式

//mixing
//混合原型
//一般在继承的时候用

//student继承person
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 = create(Person.prototype);


function create(parentObj){
    function F(){}
    F.prototype = parentObj;
    return new F();
}
Student.prototype.sayScore = function(){
    console.log(this.score);
}
var student = new Student("fem", 28, 99);

模块模式

//module


var Person = (function(){
    var name = 'ruoyu';
    function sayName(){
        console.log(name);
    }
    
    return {
        name: name,
        sayName: sayName
    }
})()

工厂模式

//factory
//每次创建一个新的引用

function createPerson(name){
    var person = {
        name: name,
        sayName: function(){
            console.log(this.name);
        }
    }
}
createPerson('fem');
createPerson('emmmmm');

单例模式

//singleton
//匿名函数 ==> lambda函数
//节约内存
//比如对话框

var People = (function(){
    var instance;
    function init(name){
        return {
            name:name
        };
    }
    return {
        createPeople: function(name){
            if (!instance){
                instance = init(name);
            }
            return instance;
        };
    }
}());
People.createPeople('fem')  //{name: 'fem'}
People.createPeople('emmm')  //{name: 'fem'}

发布订阅模式

//publish subscribe

var EventCenter = (function(){
    var events = {};   //存储所有的key value

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

    function off(name){
        delete events[name]
    }

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

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

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

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

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

    function off(name){
        delete events[name]
    }

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

相关文章

  • Web40.设计模式

    构造函数模式 混合模式 模块模式 工厂模式 单例模式 发布订阅模式 使用发布订阅模式写一个事件管理器,可以实现如下...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 设计模式

    《C#设计模式》 《C#设计模式》-设计模式概述 《C#设计模式》-面向对象设计原则 《C#设计模式》-单例模式 ...

  • 浅谈JS的一些设计模式

    @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 设计模式简介 设计模式概念解读 设计模式的发展与...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 设计模式之工厂模式

    设计模式之工厂模式 标签(空格分隔): 设计模式 工厂模式 设计模式的感念 设计模式的应用 工厂设计模式的产生 工...

  • JavaJavascript基础进阶(十七)JS中常用的设计模式

    单利设计模式、构造原型设计模式、发布订阅设计模式、promise设计模式 单利模式 构造原型设计模式 最贴近OOP...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

  • 第1章 设计模式概述

    一、设计模式的概念 二、设计模式的历史 三、设计模式的要素 四、设计模式的分类 ■ 创建型设计模式 ■ 结构型设计...

网友评论

      本文标题:Web40.设计模式

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