js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围。

本文主要参考张容铭著的《JavaScript设计模式》。

1、简单工厂模式

由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类对象。

举例子:1、比如不同的弹出框,有警告框,提示框,确认框等。我们创建一个大类包含包含其共有的部分,比如显示,内容等,再根据创建是选择的类型,再将差异部分添加进去。

2、体育店里面有很多商品,及相关介绍,我们要买的时候,只要体育店有,就会得到相关产品和信息。先创建不同产品的基类,然后再用一个大类(也就是所谓的工厂)来包容这些基类。可用switch来选择确定要创建什么。

总结:第一种是通过创建一个新对象然后包装增强其属性和功能实现的。第二种是通过类的实例化实现的。前一种因为共享父类,所以父类的方法方法属性是可以共用的,后者就不行了。简单工厂模式使用场合通常也限制在创建单一对象。

2、工厂方法模式

工厂方法模式:通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。将实际创对象工作推迟到子类中,这样核心类就成了抽象类。

其中涉及到一个安全模式类:

var demo = function(){
if(!(this instanceof demo)){
return new demo();
}
}

通过判断this是不是实例来进行实例化。这样就可以避免漏掉new关键字。

var Factory=function(type,content){
if(this instanceof Factory){
var s=new this[type](content);
}else{
return new Factory(type,content)
}
} Factory.prototype={
java:function(content){
//......
},
php:function(content){
//......
},
//......
}

在原型上添加不同类型的方法,然后在调用子类的时候实例化。如果采用简单工厂模式的话,用类实例化方法,但是这样需要修改工厂方法和添加基类,也就是要修改两个地方。而采用上面的方法,只需要在原型上添加方法就可以了。

避免了使用者和对象类之间的耦合,用户不用关心创建该类的具体类,只需要调用工厂方法就可以。

3、抽象工厂模式

抽象类并不是用来创建具体的类,而是用来当做父类来创建一些子类。创建的是一个类簇,它制定了类的结构。其实就是先创建一个大类,然后在细分下,添加小类的实现方法,将小类的方法挂到小类的原型上。

4、建造者模式

将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示。

工厂模式主要是为了创建对象实例或者类簇(抽象工厂),关心的是最终产出(创建)的是什么。不关心创建的过程,仅仅需要创建的最终结果。所以工厂模式得到的是对象实例或者类簇。而建造者模式再创建对象的时候更为复杂,虽然其目的也是创建对象,但是其更多的是关心创建的整个过程,甚至于创建对象的每一个细节,比如创建一个人,我们不仅要得到人的实例,还要关心穿什么衣服,男的女的,兴趣爱好等等。

举例子:创建一个求职者。我们先创建三个类,Human,Named,Work类。然后在建造者类中调用这三个类的组合,创建一个完整的应聘者对象。

var Person=function(name,work){
var _person=new Human();
_person.name=new Named(name);
_person.work=new Work(work); return _person;
}

在建造者模式中将创建的对象类模块化,这样使得每个模块都可以得到灵活的运用与高质量的复用。但是如果对象粒度很小,或者模块间复用率很低且变动不大,我们最好还是创建整体对象。

5、原型模式

用原型实例指向创建者对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。

原型拓展:就是在prototype上进行拓展。

6、单例模式

只允许实例化对象一次。,有时我们也用一个对象来规划一个命名空间,井井有条的管理对象上的属性和方法。

var sing=(function(){
var instance=null;
function Single(){}
return function(){
if(!instance){
instance=Single;
}
return instance;
}
})();

7、外观模式

//外观模式:为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更加容易。在JavaScript中,有时也会用于对底层结构兼容性做统一封装来简化用户使用。
//实现
function addEvent(dom,type,fn){
if(dom.addEventListener){
dom.addEventListener(type,fn,false);
}else if(dom.attachEvent){
dom.attachEvent("on"+type,fn);
}else{
dom["on"+type]=fn;
}
}

8、适配器模式

//适配器模式:将一个类(对象)的接口(方法或者属性)转化为另一个接口,以满足用户的需求,使类之间的接口的不兼容问题通过适配器得以解决。
//举例子:其实就是为了两个代码库所写的代码兼容运行而书写的额外代码。这样我们就不需要特意地重写以前的功能代码了。
//参数适配器:比如某个函数要传入很多参数
function dosomething(name,title,age,color,size,prize){};
//那么我们要记住这些参数的顺序是很困难的,因此常用的做法是以一个参数对象方式传入的。
function dosomething(obj){};
//即使这样,还是存在一个问题,就是我们不知道参数是不是完整的,如果一些参数没有传入,需要使用默认值等等。此时我们通常的做法就是用适配器来适配传入的这个参数对象。
function dosomething(obj){
var _adapter={
name:"me",
title:"设计",
age:24,
color:"pink", }
}

js设计模式总结1的更多相关文章

  1. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  2. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  3. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  4. js 设计模式-接口

    js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...

  5. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  6. [js]js设计模式小结

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  7. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  8. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  9. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

随机推荐

  1. hdu4048

    题意:给定m个数,还有n,n表示有一个长度为n的环,现在要求从M个数中选出若干个数,要求选出的数最大公约数为1,填充在n个位置中,选出的数可以重复,求多少种种方案.旋转当成一样的 . 思路:假设现在选 ...

  2. excel设定备选值

    excel设定备选值 有的时候我们要人为向excel中某一列添加数据,可以通过下面的方法,为这列设定备选值. 操作方法 选中excel表格的一列,选择  数据 -- 有效性 -- 允许: 选择 序列 ...

  3. Python自动化开发 - 常用模块(一)

    本节内容 1.模块介绍 2.time&datetime模块 3.random模块 4.os模块 5.sys模块 6.json&pickle模块 7.logging模块 一.模块介绍 模 ...

  4. 3.表单form

    表单 表单的作用是收集信息. 表单的组成 ◆提示信息 表单控件 1.表单域 属性:action:处理信息 method=”get | post” get通过地址栏提供(传输)信息,安全性差. post ...

  5. Cordova - Windows 下创建第一个 Android App

    官方文档: Create your first Cordova app Android Platform Guide 安装 JDK 和 Android SDK 注意: 需要将 JK 和 Android ...

  6. .net 使用HtmlAgilityPack做爬虫

    HtmlAgilityPack官网:https://html-agility-pack.net/?z=codeplex .net中使用HtmlAgilityPack做爬虫步骤: 1.在nuget中安装 ...

  7. (C#)找的winform窗体自适应类

    原文:https://www.cnblogs.com/gguozhenqian/p/4288451.html 需要添加引用System.Windows.Forms public class AutoS ...

  8. UWP Background过渡动画

    首先说两件事: 1.大爆炸我还记着呢,先欠着吧... 2.博客搬家啦,新地址:https://blog.ultrabluefire.cn/ ==========下面是正文========== 前些日子 ...

  9. CopyOnWriteArrayList源码解析(2)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 5.删除元素 public boolean remove(Object o) 使用方法: list.remo ...

  10. 【BZOJ4819】 新生舞会(01分数规划,费用流)

    Solution 考虑一下这个东西的模型转换: \(\frac{\sum_{i=1}^n{a_i}}{\sum_{i=1}^n{b_i}}\) 然后转换一下发现显然是01分数规划. \(\sum_{i ...