前端开发中常用设计模式-总结篇_前端设计模式

 

本文是向大家介绍前端开发中常用的设计模式，它使我们编写的代码更容易被复用，也更容易被人理解，并且保证代码的稳定可靠性。

---

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 name='《React进阶实践指南》' />
    <GroupPatternsItem name='《React设计模式》' />
    <GroupPatternsItem isShow name='《React进阶实践指南》' />
    <GroupPatternsItem isShow={false} name='《Nodejs深度学习手册》' />
    <div>hello,world</div>
</GroupPatterns>

我们直观上看到 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