前端设计模式概述｜ 青训营

1.什么是设计模式 通俗来讲，就是日常使用设计的一种惯性思维。

因为对应的这种思维，以及对具体的业务或者代码场景，

有着具体的优势，而后成为行业中的一种“设计模式”。

2.为什么使用设计模式 设计模式是各种业务场景的最佳实践，有助于我们在写日常业务中时，提高自身的思路。例如单例模式，就可以用于登陆框，模态框等场景。每种设计模式，必然有其适合应用的场景，灵活运用设计模式，可以提高代码的可维护性，还可提升自身思维能力。

3.设计模式的基本准则 优化代码第一步：单一职责原则

让程序更稳定更灵活：开闭原则

构建扩展性更好的系统：里式替换原则

让项目拥有变化的能力：依赖倒置原则

系统有更高的灵活性：接口隔离原则

更好地扩展性：迪米特原则

4.设计模式的种类 a.创建型模式 一般用于创建对象。包括：

单例模式,工厂方法模式,抽象工厂模式,建造者模式,原型模式。

b.结构型模式 重点为“继承”关系，有着一层继承关系，且一般都有“代理”。

包括：适配器模式,桥接模式,组合模式,装饰器模式,

外观模式,享元模式,代理模式,过滤器模式

c.行为型模式 职责的划分，各自为政，减少外部的干扰。

包括：命令模式，解释器模式，迭代器模式，中介者模式，

备忘录模式，观察者模式，状态模式，策略模式，

模板方法模式，访问者模式，责任链模式

5.前端比较常用的设计模式 1.组合模式 定义：将对象组合成树形结构以表示“部分-整体”的层次结构。

class Folder { constructor(name) { this.fileName = name; this.children = []; } add(child) { this.children.push(child); } scan() { console.log("Folder:" + this.fileName); for (const child of this.children) { child.scan(); } } } class File { constructor(name) { this.fileName = name; } add() {} scan() { console.log("File:" + this.fileName); } }

const folder1 = new Folder("first"); folder1.add(new File("file1")); folder1.add(new File("file2")); const folder2 = new Folder("secend"); folder2.add(new File("file3")); folder1.add(folder2);

folder1.scan();

这样，通过调用第一个文件夹的扫描方法就能调用所有子元素的扫描方法。

a) 组合模式在组件开发中的应用：

组合模式适合一些容器组件场景，通过外层组件包裹内层组件，这种方式在 Vue 中称为 slot 插槽，在React中为props.children，外层组件可以轻松的获取内层组件的 props 状态，还可以统一控制内层组件的渲染，组合模式能够直观反映出 父 -> 子组件的包含关系，如下最简单的组合模式例子。

我们直观上看到 GroupPatterns 和 GroupPatternsItem 并没有做某种关联，但是却无形的联系起来。这种就是组合模式的精髓所在，这种组合模式的组件，给使用者感觉很舒服，因为大部分工作，都在开发组合组件的时候处理了。所以编写组合模式的嵌套组件，对锻炼开发者的 组件封装能力是很有帮助的。

我们通过如下代码分析组合模式原理：

// GroupPatterns.js import React, {isValidElement} from 'react'

const GroupPatterns = (props) => { const handleCallback = (val) => { console.log(' children 内容：',val ) }; let newChilren = []; // 遍历children，根据属性处理每一项节点 React.Children.forEach(props.children,(item)=>{ const { type ,props } = item || {} const {isShow = true} = props || {} // 根据子组件属性是否展示 if(isValidElement(item) && type.name === 'GroupPatternsItem' && isShow ){ // 或者 type.displayName === 'Item' // 增强要展示的子组件，给元素添加额外props const enhanceElement = React.cloneElement( item , { callback:handleCallback } ) newChilren.push(enhanceElement) } }) console.log(' React.newChildren', newChilren, props.children) return newChilren }

const GroupPatternsItem = (props) => { console.log('GroupPatternsItem', props) // {name: "《React进阶实践指南》", author: "alien"} return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', textAlign:'left', width: '100%', marginBottom: '20px'} }>

) } GroupPatternsItem.displayName = 'Item'

通过 React.cloneElement 隐式混入 props 这个是组合模式的精髓所在，就是可以通过 React.cloneElement 向 children 中混入其他的 props，那么子组件就可以使用容器父组件提供的特有的 props 。所以在外层容器中，进行多次组合，这样组件就会一层一层的包裹，一次又一次的强化。

这种组合模式能够一层层强化原始组件，外层组件不用过多关心内层到底做了些什么? 只需要处理 children 就可以，同样内层 children 在接受业务层的 props 外，还能使用来自外层容器组件的状态，方法等。

2.单例模式 定义：保证一个类只有一个实例, 一般先判断实例是否存在,如果存在直接返回, 不存在则先创建再返回,这样就可以保证一个类只有一个实例对象.

作用：1.模块间通信。2.保证某个类的对象的唯一性3.防止变量污染

单例模式适用于全局只能有一个实例对象的场景，单例模式的一般结构如下：

let CreateSinglePattern = (function(){ let instance; return function(age) { if (instance) { return instance; } this.age = age; return instance = this; } })(); CreateSinglePattern.prototype.getAge = function() { return this.age }

let young = new CreateSinglePattern('18'); let old = new CreateSinglePattern('108');

console.log(young === old); // true console.log(young.getAge()); // '18' console.log(old.getAge()); // '18'

通过闭包缓存实例，后续不管new多少次都是同一个实例。

a) 单例模式在vuex中的应用：

对应的源码行数（vuex2 - - - 777行）

我们看看vuex的源码处理，在vue.use(vuex) 注册vuex的时候，会去调用vuex的install方法，如下：

var Vue; // bind on install

function install (_Vue) { if (Vue && _Vue === Vue) { { console.error( '[vuex] already installed. Vue.use(Vuex) should be called only once.' ); } return } Vue = _Vue; applyMixin(Vue); } 可以看出，如果重复注册的话会进行报错处理，通过这种方式，可以保证一个 Vue 实例（即一个 Vue 应用）只会被 install 一次 Vuex 插件，所以每个 Vue 实例只会拥有一个全局的 Store。

3.工厂模式 a.简单工厂模式

简单工厂模式是由一个工厂对象来创建某一类产品的实例。

比如去买书，我们不用自己去找这些书，而是口头告诉给bookShop，让它帮我找，并且告诉我价格。

function bookShop (name, year, version) { var book = new Object(); book.name = name; book.year = year; book.version = version; book.price = '暂无标价'; if (name === 'JS高级编程') { book.price = '89'; } if (name === 'react进阶') { book.price = '79'; } if (name === 'js设计模式') { book.price = '59'; } return book; } var book1 = bookShop('JS高级编程', '2013', '第三版'); var book2 = bookShop('react进阶', '2017', '第六版'); var book3 = bookShop('js设计模式', '2015', '第一版'); console.log(book1) console.log(book2) console.log(book3)

b.工厂方法模式

工厂方法模式可以理解为升级版的简单工厂模式，是对产品类的抽象，使其创建多类产品的实例。

简单工厂模式是创建同一类的某个产品，而工厂方法模式是创建多类产品的实例。它其实是将多个产品类进行抽象化，可以通过这个工厂对这些类创建相应类的实例。

比如现在，我不想买编程类的书了，我要买科学类或者社会学类的书，那么工厂方法模式的作用就体现出来了。

var BookShop = function (name) { // 如果外部直接调用了BookShop而不是new关键字调用，则返回new BookShop调用，否则直接调用 if (this instanceof BookShop) { var book = new thisname return book } else { return new BookShop(name) } } BookShop.prototype = { Programme: function () { this.books = ['JS高级编程', 'react进阶', 'js设计模式'] }, Science: function () { this.books = ['a', 'b', 'c'] }, Society: function () { this.books = ['aa', 'bb', 'cc'] } }

var programme = new BookShop('programme'); var science = BookShop('science'); var society = BookShop('society'); console.log(programme) // books: (3) ['JS高级编程', 'react进阶', 'js设计模式'] console.log(science) // books: (3) ['a', 'b', 'c'] console.log(society) // books: (3) ['aa', 'bb', 'cc']

注意：这种方法重写了prototype，所以后续只能往里面增加，不能直接修改prototype。

c.抽象工厂模式

抽象工厂模式是对类的工厂的抽象，用于创建不同的类，而不是创建类的实例。

首先创建这个工厂以及所属其的种类：

该工厂可用于生产（Animals，Fruits， Books，Peoples）等类

// 工厂接收两个参数分别是产品子类和产品类 const Factorys = function (subType, superType) { // 如果产品类在这个工厂中存在，就利用寄生继承方式，让产品子类继承产品类中的所有属性 if (typeof Factorys[superType] === 'function') { const F = function() {} F.prototype = new FactoryssuperType subType.constructor = subType subType.prototype = new F() } else { throw new Error('没有找到' + superType + '抽象类') } } // 以下均为产品类 // Animals产品类 Factorys.Animals = function () { this.type = 'Animals' } // 直接访问方法抛出错误，之所以这样做，是为了不让外部在没重写子类方法之前访问这些方法 // 需通过继承产品类之后重写这个方法才能访问 Factorys.Animals.prototype = { getInfo: function () { return new Error('请先重写子类') } } // Fruits产品类 Factorys.Fruits = function () { this.type = 'Fruits' } Factorys.Fruits.prototype = { getInfo: function () { return new Error('请先重写子类') } } // Books产品类 Factorys.Books = function () { this.type = 'Books' } Factorys.Books.prototype = { getInfo: function () { return new Error('请先重写子类') } } // Peoples产品类 Factorys.Peoples = function () { this.type = 'Peoples' } Factorys.Peoples.prototype = { getInfo: function () { return new Error('请先重写子类getInfo方法') } }

工厂以及产品类创建完成了，那么我们还需要一些产品子类，产品子类是针对产品类的，它是继承于某个产品类，拥有该产品类的所有属性和方法。

// 动物产品子类 const Animals = function (name, price) { this.name = name this.price = price } // 工厂开始生产 Factorys(Animals, 'Animals') // 生产后重新标价，即重写价格方法，使可以访问 Animals.prototype.getInfo = function () { return this.price; } // 水果产品子类 const Fruits = function (name, price) { this.name = name this.price = price } Factorys(Fruits, 'Fruits') Fruits.prototype.getInfo = function () { return this.price } // 人物产品子类 const Peoples = function (name, price) { this.name = name this.price = price } Factorys(Peoples, 'Peoples') Peoples.prototype.getInfo = function () { return this.price } // 书籍产品子类 const Books = function (name, price) { this.name = name this.price = price } Factorys(Books, 'Books') Books.prototype.getInfo = function () { return this.price }

const dog = new Animals('小狗', 3000) console.log('价钱：' + dog.getInfo() + '，类型：' + dog.type) const tomato = new Fruits('西红柿', 20) console.log('价钱：' + tomato.getInfo() + '，类型：' + tomato.type) const martian = new Peoples('火星人', 6989) console.log('价钱：' + martian.getInfo() + '，类型：' + martian.type) const book = new Books('js设计模式', 100) console.log('价钱：' + book.getInfo() + '，类型：' + book.type)

d.总结

简单工厂模式是创建某一种类的实例，是针对一个类的实例创建，而工厂方法模式是多个类创建实例。 简单工厂模式与工厂方法模式只是创建实例，而并不知道它是什么类，但是抽象工厂模式创建了类之后，类的实例会知道自己属于什么类，这也是抽象工厂模式的一大优点。