一、工厂模式

类似于现实生活中的工厂可以陈胜大量相似的商品，去做同样的事情，实现同样的效果。
原理将原始方法封装到函数中，并返回这个对象。
优点：能解决多个相似问题。
缺点：对象类型不知道，因为typeof返回结果都为object。

 function Animal(args) {var obj = new Object();obj.name = args.name;obj.color = args.color;obj.getInfo = function() {console.log(obj.name + "; " + obj.color)}return obj;}var cat = Animal({name: 'cat', color: 'yellow'});var dog = Animal({name: 'dog', color: 'black'});cat.getInfo();dog.getInfo();console.log(typeof cat);console.log(typeof dog);//cat; yellow
//dog; black
//object
//object

二、构造函数模式

原理：在构造函数内使用this关键字，创建属性和方法。在用new关键词创建实例，通过传参实现不同的实例。
优点可以识别对象类型
缺点构造函数会重复生成函数，为每个对象都创建独立的函数版本。

 function Car(color, speed, price) {this.color = color;this.speed = speed;this.price = price;this.showColor = function() {console.log(this.color);}}var car1 = new Car('yellow', '100', 100000);var car2 = new Car('red', '150', 1300000);console.log(car1,car2);console.log(car1 instanceof Car) //true//Car {color: "yellow", speed: "100", price: 100000, showColor: ƒ}
//color: "yellow"
//price: 100000
//showColor: ƒ ()
//speed: "100"
//__proto__: Object//Car {color: "red", speed: "150", price: 1300000, showColor: ƒ}
//color: "red"
//price: 1300000
//showColor: ƒ ()
//speed: "150"
//__proto__: Object

三、单例模式

只能被实例化一次

var Single = (function() {var instance;function init() {//定义私有的方法和属性return {//定义共有的方法和属性}}return {//获取实例getInstance: function() {if(!instance) {instance = init();}return instance;}}})()var obj1 = Single.getInstance();var obj2 = Single.getInstance();console.log(obj1 === obj2)//true

四、发布-订阅者模式

发布-订阅者模式又叫观察者模式，它定义了对象间一对多的关系，让多个观察者对象同时监听某一主题对象，当发布者发生改变，所有的订阅者都会得到通知。
优点： 1、当发布者状态改变，会自动通知所有订阅者。2、发布者和订阅者耦合性降低。
缺点：1、创建订阅者需要消耗一定的事件和内存
2、虽然可以弱化对象间的关系，但是过度使用，会使得代码不好维护。
原理 1、确定发布者
2、给发布者添加缓存列表，用于存放回调函数来通知订阅者
3、发布消息，发布者遍历这个缓存列表，依次促发里面存放的订阅者回调函数。

var EventCenter = (function(){var events = {};/*{my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]}*/// 绑定事件 添加回调function on(evt, handler){events[evt] = events[evt] || [];events[evt].push({handler:handler})}function fire(evt, arg){if(!events[evt]){return }for(var i=0; i < events[evt].length; i++){events[evt][i].handler(arg);}}function off(evt){delete events[evt];}return {on:on,fire:fire,off:off}
}());var number = 1;
EventCenter.on('click', function(data){console.log('click 事件' + data + number++ +'次');
});
EventCenter.off('click');   //  只绑定一次
EventCenter.on('click', function(data){console.log('click 事件' + data + number++ +'次');
});EventCenter.fire('click', '绑定');

JS常用的六种设计模式详解相关推荐

Java常用10种设计模式详解
一.单例模式单例模式属于创建型模式,解决某个类频繁的创建与销毁.该模式保证了其对象在JVM中只有一个实例对象存在.必须保证私有化构造函数,只能有一个实例对象存在. 优点: 减少new关键字的使用,降 ...
js继承的六种方式详解--认真看完你就会了
今天主要来研究一下继承这个东西继承共分为六种继承方式: 原型链继承盗用构造函数继承组合继承实例继承(原型式继承) 寄生式继承寄生式组合继承原型链继承原型链继承是ES主要继承方法,其中 ...
JS 常用的六种设计模式介绍
常用设计模式前言我们经常听到一句话,"写代码要有良好的封装,要高内聚,低耦合".究竟怎样的代码才算得上是良好的代码. 什么是高内聚,低耦合? 即五大基本原则(SOLID)的简写 ...
【设计模式】常用9种设计模式详解
单例(Singleton)模式为了节省内存资源.保证数据内容的一致性,对某些类要求只能创建一个实例,这就是所谓的单例模式. 单例模式的定义:一个类只能有一个实例,且该类能自行创建这个实例的一种模式. ...
Javascript常用的设计模式详解
Javascript常用的设计模式详解阅读目录一:理解工厂模式二:理解单体模式三:理解模块模式四:理解代理模式五:理解职责链模式六:命令模式的理解: 七:模板方法模式八:理解javas ...
Javascript设计模式详解
Javascript常用的设计模式详解阅读目录一:理解工厂模式二:理解单体模式三:理解模块模式四:理解代理模式五:理解职责链模式六:命令模式的理解: 七:模板方法模式八:理解javas ...
《设计模式详解》创建型模式 - 建造者模式
建造者模式 4.4 建造者模式 4.4.1 概述 4.4.2 结构 4.4.3 实例 4.4.4 优缺点 4.4.5 使用场景 4.4.6 扩展 - 构建对象重构前重构后 4.5 创建型模式对比 ...
《设计模式详解》设计模式概述、UML
<设计模式详解> 1.设计模式概述 1.1 软件设计模式的产生背景 1.2 软件设计模式的概念 1.3 学习设计模式的必要性 1.4 设计模式分类 2.UML 2.1 类图概述 2.2 类 ...
js购物车功能php,使用JS实现购物车功能步骤详解
这次给大家带来使用JS实现购物车功能步骤详解,使用JS实现购物车功能的注意事项有哪些,下面就是实战案例,一起来看一下. 我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪 ...
java多线程设计模式详解[推荐]
java多线程设计模式详解[推荐] java多线程设计模式详解之一线程的创建和启动 java语言已经内置了多线程支持,所有实现Runnable接口的类都可被启动一个新线程,新线程会执行该实例的run ...

JS常用的六种设计模式详解

目录

一、工厂模式

二、构造函数模式

三、单例模式

四、发布-订阅者模式

JS常用的六种设计模式详解相关推荐

最新文章

热门文章