掌握前端5大常用设计模式，瞬间高大上

今天主要介绍一下我们平常会经常用到的设计模式，设计模式总的来说有23种，而设计模式在前端中又该怎么运用呢，接下来主要对比较前端中常见的设计模式做一个介绍。

设计模式的定义

设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。比如java和javascript，在Java这种静态编译型语言中，无法动态地给已存在的对象添加职责，所以一般通过包装类的方式来实现装饰者模式。但在JavaScript这种动态解释型语言中，给对象动态添加职责是再简单不过的事情。这就造成了JavaScript语言的装饰者模式不再关注于给对象动态添加职责，而是关注于给函数动态添加职责。本篇将介绍以下几个比较常见的设计模式：

• 工厂模式
• 单例模式
• 代理模式
• 观察者模式
• 策略模式

一、工厂模式

工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂，工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂，接下来，将对简单工厂和工厂方法在JavaScript中的运用举个简单的例子：

1. 简单工厂

简单工厂模式又叫静态工厂模式，由一个工厂对象决定创建某一种产品对象类的实例，主要用来创建同一类对象

比如说，在实际的项目中，我们常常需要根据用户的权限来渲染不同的页面，，高级权限的用户所拥有的页面有些是无法被低级权限的用户所查看，所以我们可以在不同权限等级用户的构造函数中，保存该用户能够看到的页面。

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'); 
 } 
} 
//调用 
let superAdmin = UserFactory('superAdmin'); 
let admin = UserFactory('admin')  
let normalUser = UserFactory('user') 

总结：在上面的例子中，UserFactory就是一个简单工厂，在该函数中有3个构造函数分别对应不同的权限的用户，当我们调用工厂函数时，只需要传递superAdmin, admin, user这三个可选参数中的一个获取对应的实例对象

• 优点：简单工厂的优点在于，你只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节;
• 缺点：在函数内包含了所有对象的创建逻辑(构造函数)和判断逻辑的代码，每增加新的构造函数还需要修改判断逻辑代码，我们的对象不是上面的3个而是30个或更多时，这个函数会成为一个庞大的超级函数，便得难以维护，简单工厂只能作用于创建的对象数量较少，对象的创建逻辑不复杂时使用;

2. 工厂方法

工厂方法模式的本意是将实际创建对象的工作推迟到子类中，这样核心类就变成了抽象类，但是在JavaScript中很难像传统面向对象那样去实现创建抽象类，所以在JavaScript中我们只需要参考它的核心思想即可，我们可以将工厂方法看作是一个实例化对象的工厂类

比如说上面的例子，我们用工厂方法可以这样写，工厂方法我们只把它看作是一个实例化对象的工厂，它只做实例化对象这一件事情，我们采用安全模式创建对象

//安全模式创建的工厂方法函数 
let UserFactory = function(role) { 
 if(this instanceof UserFactory) { 
 var s = new this[role](); 
 return s; 
 } else { 
 return new UserFactory(role); 
 } 
} 
//工厂方法函数的原型中设置所有对象的构造函数 
UserFactory.prototype = { 
 SuperAdmin: function() { 
 this.name = "超级管理员", 
 this.viewPage = ['首页', '用户管理', '订单管理', '应用管理', '权限管理'] 
 }, 
 Admin: function() { 
 this.name = "管理员", 
 this.viewPage = ['首页', '订单管理', '应用管理'] 
 }, 
 NormalUser: function() { 
 this.name = '普通用户', 
 this.viewPage = ['首页', '订单管理'] 
 } 
} 
//调用 
let superAdmin = UserFactory('SuperAdmin'); 
let admin = UserFactory('Admin')  
let normalUser = UserFactory('NormalUser') 

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!