关键词：
本文将对常用的前端设计模式进行简单介绍，不同语言可能有所区别。设计模式主要针对特定的问题而采取某种特定的技术或者方法来达到目的。
前端常用的设计模式有以下：
1.单例模式；
2.工厂模式；
3.策略模式；
4.代理模式；
5.观察者模式；
6.模块模式；
7.命令模式；
一、单例模式
这种设计模式的思想是确保一个类只有唯一实例，一般用于全局缓存，比如全局window，唯一登录浮窗等；
var Single = function(name,age) this.name = name; this.age = age; this.instance = null; Single.getInstance = function(name,age) if(!this.instance) this.instance = new Singleton(name,age); return this.instance;
二、工厂模式
工厂模式是创建对象的常用设计模式，为了不暴露创建对象的具体逻辑，将逻辑封装在一个函数中，这个函数就称为一个工厂。本质上是一个负责生产对象实例的工厂。工厂模式分为简单工厂，工厂方法和抽象工厂。
简单工厂：
let UserFactory = function (role) function SuperAdmin() this.name = "超级管理员", this.viewPage = [‘首页‘, ‘通讯录‘, ‘发现页‘, ‘应用数据‘, ‘权限管理‘] function Admin() this.name = "管理员", this.viewPage = [‘首页‘, ‘通讯录‘, ‘发现页‘, ‘应用数据‘] function NormalUser() this.name = ‘普通用户‘, this.viewPage = [‘首页‘, ‘通讯录‘, ‘发现页‘] switch (role) case ‘superAdmin‘: return new SuperAdmin(); break; case ‘admin‘: return new Admin(); break; case ‘user‘: return new NormalUser(); break; default: throw new Error(‘参数错误, 可选参数:superAdmin、admin、user‘);
三、策略模式
策略模式的本意将算法的使用与算法的实现分离开来，避免多重判断调用哪些算法。
// 对于vip客户 function vipPrice() this.discount = 0.5; vipPrice.prototype.getPrice = function(price) return price * this.discount; // 对于老客户 function oldPrice() this.discount = 0.3; oldPrice.prototype.getPrice = function(price) return price * this.discount; // 对于普通客户 function Price() this.discount = 1; Price.prototype.getPrice = function(price) return price ; // 上下文，对于客户端的使用 function Context() this.name = ‘‘; this.strategy = null; this.price = 0; Context.prototype.set = function(name, strategy, price) this.name = name; this.strategy = strategy; this.price = price; Context.prototype.getResult = function() console.log(this.name + ‘ 的结账价为: ‘ + this.strategy.getPrice(this.price)); var context = new Context(); var vip = new vipPrice(); context.set (‘vip客户‘, vip, 200); context.getResult(); // vip客户 的结账价为: 100 var old = new oldPrice(); context.set (‘老客户‘, old, 200); context.getResult(); // 老客户 的结账价为: 60 var Price = new Price(); context.set (‘普通客户‘, Price, 200); context.getResult(); // 普通客户 的结账价为: 200
四、代理模式
代理模式主要是为其他对象提供一种代理以控制对这个对象的访问，主要解决在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上，在面向对象系统中，有些对象由于某些原因(比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问)，直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。
五、观察者模式
也叫发布订阅模式，在这种模式中，一个订阅者订阅发布者，当一个特定的事件发生的时候，发布者会通知（调用）所有的订阅者
var EventCenter = (function() var events = ; function on(event, handler) events[event] = events[event] || []; events[event].push( handler: handler ); function fire(event, args) if (!events[event]) return for (var i = 0; i < events[event].length; i++) events[event][i].handler(args); function off(event) delete events[event]; return on: on, fire: fire, off: off )(); EventCenter.on(‘event‘, function(data) console.log(‘event received...‘); ); EventCenter.fire(‘event‘);
六、模块模式；
模块模式可以指定类想暴露的属性和方法，并且不会污染全局。采用闭包的形式。
var Person = (function() var name = ‘xxx‘ function sayName() console.log(name) return name: name, sayName: sayName )()
七、命令模式；
用来对方法调用进行参数化处理和传送，经过这样处理过的方法调用可以在任何需要的时候执行。
有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
实现：将函数的调用、请求和操作封装成一个单一的对象。
var setCommand = function(button,func) button.onclick = function() func(); ; var MenuBar = refersh: function() alert("刷新菜单界面"); ; var SubMenu = add: function() alert("增加菜单"); ; // 刷新菜单 var RefreshMenuBarCommand = function(receiver) return function() receiver.refersh(); ; ; // 增加菜单 var AddSubMenuCommand = function(receiver) return function() receiver.add(); ; ; var refershMenuBarCommand = RefreshMenuBarCommand(MenuBar); // 增加菜单 var addSubMenuCommand = AddSubMenuCommand(SubMenu); setCommand(b1,refershMenuBarCommand); setCommand(b2,addSubMenuCommand);
本文参考：前端常用设计模式 ，作者：_张宇小丸子
前端常用设计模式，作者： 司马老朋
前端常见的设计模式(代码片段)
设计模式一.结构型模式（StructuralPatterns）外观模式（FacadePattern）封装常用的简易api给其他模块使用例：//绑定事件functionaddEvent(element,event,handler)if(element.addEventListener)element.addEventListe 查看详情
前端——前端三种语言(代码片段)
前端三种语言、核心标签、常见标签、标签分类一、前端前端即网站前台部分，运在PC端，移动端等浏览器上展现给客户浏览的的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应... 查看详情
前端常用的设计模式和使用场景(代码片段)
设计原则最重要的思想：开放封闭原则对扩展开放对修改封闭工厂模式用一个工厂函数，创建一个实例，封装创建的过程。classFoo...functionfactory():Foo//封装创建过程，这其中可能有很多业务逻辑returnnewFoo(...arguments)应用场景-jQuery`$... 查看详情
前端设计模式(代码片段)
SOLID设计原则s:单一原则:一个类只做一种类型责任，当这个类需要承当其他类型的责任的时候，就需要分解这个类o:开放封闭原则:对外扩展是开放的,对于修改是封闭的l:里氏置换原则:当一个子类的实例应该能够替换任何其超类的... 查看详情
设计一个前端统计sdk(代码片段)
前端统计的范围-访问量PV-自定义事件（如统计一个按钮被点击了多少次）-性能-错误统计数据的流程（只做前端SDK，但是要了解全局）-前端发送统计数据给服务端-服务端接受，并处理统计数据-查看统计结果代码<!DOCTYPEhtml>&... 查看详情
前端也要学系列：设计模式之策略模式(代码片段)
做前端开发已经好几年了，对设计模式一直没有深入学习总结过。随着架构相关的工作越来越多，越来越能感觉到设计模式成为了我前进道路上的一个阻碍。所以从今天开始深入学习和总结经典的设计模式以及面向对象的几大原... 查看详情
前端面试总结(代码片段)
HTMLDoctype作用？标准模式与兼容模式各有什么区别??（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现... 查看详情
前端设计模式之观察者模式(代码片段)
所谓的观察者模式我所认为的就是订阅发布。其中中间关于调度方法还有一点区别，这里就不多做叙述了 接下来给大家分享下我对所谓的发布订阅的理解吧，其实这种设计理念在react体现在了跨组件通信中，原理就是订... 查看详情
前端设计文档模版（送给刚刚参加前端技术工作者们）(代码片段)
以下为公司通用的开发流程：一、需求背景及资源需求背景相关文档&资源需求文档:设计视觉稿:服务端IDL:第三方服务/SDK文档测试Case:埋点文档:运营资源列表(optional):走查以及验收文档:二、排期需求Timeline评审设计开发联... 查看详情
前端javascript设计模式--设计模式真实业务场景(代码片段)
设计原则—真实实例1.某打车公司的业务场景UML类图,如图所示:/***1.某打车公司的业务场景*1.打车时,可以打专车或者快车,任何车都有车牌号和名称;*2.不同的车价格不同,快车每公里1元,专车每公里2元;*3.行程开始时,显示车辆信息;*... 查看详情
前端javascript设计模式-大纲(代码片段)
前端JavaScript设计模式大纲废话不多说,上图有真相。1.一名合格的工程师必备条件:1.对前端开发有一定的设计能力。1.想要成为项目技术负责人,设计能力是必要的基础。2.从写好代码,到做好设计,设计模式是必经之路2.前端学习设... 查看详情
前端javascript设计模式--搭建开发环境(代码片段)
本章节的主要内容是–搭建开发环境因为所涉及到的知识点包含ES6语法,也为了我们的执行效率更高所以我们搭建一套自己需要的开发环境。如图所示:知识点大纲1.搭建开发环境2.什么是面向对象3.UML类图搭建开发环境1.初始化npm... 查看详情
前端javascript设计模式前奏--面向对象-class类(代码片段)
面向对象–class类1.类的声明1.1方式一:传统的使用构造函数的方式,模拟一个类的方式/***1.方式一:传统的使用构造函数的方式,模拟一个类的方式**1.这里我们就声明了一个Animal1类。*/functionAnimal1()//通过this来表明这是一个构造函数... 查看详情
设计模式(代码片段)
...关注前端的工程化。工程化在很大一部分在讨论的东西跟设计模式类似——其实设计模式本质上讨论的是可复用的面向对象框架。随着前端组件化程度越来越完善，我们应该对面向对象的方式如何解决问题或多或少有些了解，但... 查看详情
你知道前端开发常用的几种设计模式吗？(代码片段)
设计模式概览设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的... 查看详情
你知道前端开发常用的几种设计模式吗？(代码片段)
设计模式概览设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的... 查看详情
前端路由模式hash和history(代码片段)
hash模式hash模式的原理是依据window对象的onhashchange事件进行监听，它的特点是：虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面。window.onhashchange=function(e)console.log(e);打... 查看详情
前端mvc变形记(代码片段)
背景：MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。在过去，MVC被大量用于构建桌面和服务器端应用程序，如今Web应用程序的开发已经越来越向传统应用软件开发靠拢，Web和应用之间的... 查看详情