美文网首页
设计模式

设计模式

作者: LeeoZz | 来源:发表于2017-08-13 22:07 被阅读0次

构造函数模式

构造函数模式是创建特定类型都对象都一种模式,通过new运算符进行创建

function Person(name,age) {
    this.name = name
    this.age = age
}
var person1 = new Person('Jack',20)
person1   //{name: 'Jack',age: 20}

这样就创建了一个person对象

混合模式

混合模式同时使用了构造函数和原型链,构造函数用于定义实例都属性,原型链用于定义方法和共享属性

function Person(name,age) {
    this.name = name
    this.age = age
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
//student是person都一个特例,既要拥有person的属性和方法,也拥有属于自己的方法
function Student(name,age,score) {
    Person.call(this,name,age)   //继承Person的属性
    this.score = score
}
Student.prototype = Object.create(Person.prototype)     //继承Person的方法
Student.prototype.sayScore = function() {   //定义自己的方法
    console.log(this.score)
}

模块模式

把功能封装到一起,形成一个模块,只暴露出一个调用接口,外部不能访问到模块内部

var Person = (function() {
    function _Person(name,age) {
        this.name = name
        this.age = age
    }
    _Person.prototype.sayName = function() {
        console.log(this.name)
    }
    return {
        init: function(name,age) {
            return new _Person(name,age)
        }
    }
})()
var person1 = Person.init('Jack',20)
person1 // {name: 'Jack',age: 20}
person1.sayName()  //'Jack'

工厂模式

工厂模式就是构造函数类似,只是工厂模式创建的对象不能实现继承

function Person(name,age) {
    var person = {
        name: name,
        age: age
        sayName: function() {
            console.log(this.name)
        }
    }
    return person
}

因为不实现继承,创建100次,就会有100个sayName方法

单例模式

一个类能返回对象一个引用(永远是同一个)和一个获得该实例的方法(必须是静态方法,通常使用getInstance这个名称);当我们调用这个方法时,如果类持有的引用不为空就返回这个引用,如果类保持的引用为空就创建该类的实例并将实例的引用赋予该类保持的引用;同时我们还将该类的构造函数定义为私有方法,这样其他处的代码就无法通过调用该类的构造函数来实例化该类的对象,只有通过该类提供的静态方法来得到该类的唯一实例。

var singleton = (function(){
    var instance
    function createInstance() {
        //这个instance的属性方法等等
    }
    return {
        getInstance: function() {
            if(!instance) {
                instance = new createInstance()
            }
            return instance
        }
    }
})()

发布订阅模式

发布/订阅(Publish/subscribe 或pub/sub)是一种消息范式,消息的发送者(发布者)不是计划发送其消息给特定的接收者(订阅者)。而是发布的消息分为不同的类别,而不需要知道什么样的订阅者订阅。订阅者对一个或多个类别表达兴趣,于是只接收感兴趣的消息,而不需要知道什么样的发布者发布的消息。

下面是pub/sub小例子

var pubsub = (function() {
    var pubList = {}
    function on(event,handler) {
        pubList[event] = pubList[event] || []
        pubList[event].push(handler)
    }
    function trigger(event,argument) {
        var pubEvent = pubList[event]
        pubEvent.forEach(function(item,index){
            item(argument)
        })
    }
    function off(event) {
        delete pubList[event]
    }
    return {
        on,
        trigger,
        off
    }
})()

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

Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');
var Event = (function() {
    var pubList = {}
    function on(event,handler) {
        pubList[event] = pubList[event] || []
        pubList[event].push(handler)
    }
    function fire(event,argument) {
        var pubEvent = pubList[event]
        pubEvent.forEach(function(item,index){
            item(argument)
        })
    }
    function off(event) {
        delete pubList[event]
    }
    return {
        on,
        fire,
        off
    }
})()

相关文章

  • 设计模式

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

  • 设计模式笔记汇总

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

  • 设计模式

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

  • 浅谈JS的一些设计模式

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

  • 前端设计模式

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

  • 设计模式之工厂模式

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

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

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

  • 设计模式 - 目录

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

  • 第1章 设计模式概述

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

  • iOS设计模式(3)适配器模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(4)抽象工...

网友评论

      本文标题:设计模式

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