10种javascript设计模式_js设计模式与开发实践 pdf-优快云博客

提示：记录工作中遇到的需求及解决办法

文章目录

前言
什么是前端设计模式
前端设计模式分类
前端设计模式详解
小结

前言

通过最近的面试我发现，很多同行小伙伴做了几年的开发竟然连基本的设计模式都不知道，甚至可能连什么是设计模式都说的有点模棱两可。

如果作为几年经验的中高级前端这其实是不应该的，因此才想写一篇文章说明什么是设计模式？？设计模式有哪些分类？？然后举例？？

好了废话不多说，下面让我们直入主题。

什么是前端设计模式

用大白话说前端的设计模式，其实就是一种可以在多处地方重复使用的代码设计方案，
只是不同的设计模式所能应用的场景有所不同。

通过这种设计模式可以帮助我们提高代码的可读性、可维护性与可扩展性。

而且前端的设计模式又分为三个大类型，分别是创建型、结构型和行为型，针对这三个大类型，又会有很多种不同的设计模式。

前端设计模式分类

如果要说设计模式的话有高达二十多种，但本文章主要针对 javascript 相关的设计模式，因此我整理出来 10种设计模式，并且进行分类总结。

javascript 的设计模式分为三大类型，即创建型、结构型和行为型。

整理后具体分类如下所示
请添加图片描述

前端设计模式详解

「创建型」

「创建型」：顾名思义作用就是用于创建过程。通过确定规则对代码进行封装，减少创建过程中的重复代码，并且对创建制定规则提高规范和灵活性。

1、单例模式

「主要思想：」 确保一个类只有一个实例，并且提供一个访问它的全局访问点。
「优势：」 由于只有一个实例，所以全局唯一性，并且更好地控制共享资源优化性能。
「示例：」 下面看一个最经典常用的案例：使用 ES6 模块。

const test = {
     name: 'testName',  age: '18',};
export default test;

import test from './test';
console.log(test.name，test.age);  // 打印：testName，18

上述例子定义 test 并且 export defaul 暴露唯一的实例 test ，符合确保一个类只有一个实例，并且提供一个访问它的全局访问点原则。

其实单例模式有很多种实现方式，并且不同的实现方式有不同的适用场景，这种只是为了通过例子去理解这种设计模式的思想。

2、工厂模式

「主要思想：」 对代码逻辑进行封装，只暴露出通用接口直接调用。
「优势：」 对逻辑进行高度封装，降低耦合度，易于维护代码和提高后续扩展性。
「示例：」 定义一个通用的产品类为示例。

// ------ 定义一个产品类 ------     
class testProduct {
   
	constructor(productName) {
   
		this.productName = productName;
	}
	getName () {
   
		console.log(`产品名称: ${
     this.productName}`);
	}
}
// ----- 定义一个工厂函数 -------    
function createProduct (name) {
   
	return new testProduct(name);
}
// 使用工厂函数创建对象    
const test1 = createProduct('产品1');
const test2 = createProduct('产品2');
// 使用对象    
test1.getName(); // 打印： 产品名称: 产品1    
test2.getName(); // 打印： 产品名称: 产品2

上述例子定义一个工厂函数，逻辑代码是封装在 testProduct 类中，暴露出 createProduct 方法，调用时传入不同的参数返回不同的内容。

3、构造器模式

「主要思想：」 定义一个通用的构造函数，然后方便多次传递参数调用。
「优势：」 减少重复代码、提高可维护性和扩展性。
「示例：」 创建用户对象，定义一个构造函数并且使用。

class testPerson {
   
	constructor(name, age,) {
    this.name = name; this.age = age; }
	introduce () {
    console.log(`姓名: ${
     this.name}, 年龄: ${
     this.age}`); }
}

const test1 = new testPerson('张三', 30); test1.introduce(); //  姓名: 张三, 年龄: 30
const test2 = new testPerson('李四', 25); test2.introduce(); // 输出: 姓名: 李四, 年龄: 25