一直想写一篇介绍设计模式的文章，让读者可以很快看完，而且一看就懂，看懂就会用，同时不会将各个模式搞混。自认为本文还是写得不错的，花了不少心思来写这文章和做图，力求让读者真的能看着简单同时有所收获。

设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结，其中最出名的当属 Gang of Four (GoF) 的分类了，他们将设计模式分类为 23 种经典的模式，根据用途我们又可以分为三大类，分别为创建型模式、结构型模式和行为型模式。

有一些重要的设计原则在开篇和大家分享下，这些原则将贯通全文：

1. 面向接口编程，而不是面向实现。这个很重要，也是优雅的、可扩展的代码的第一步，这就不需要多说了吧。
2. 职责单一原则。每个类都应该只有一个单一的功能，并且该功能应该由这个类完全封装起来。
3. 对修改关闭，对扩展开放。对修改关闭是说，我们辛辛苦苦加班写出来的代码，该实现的功能和该修复的 bug 都完成了，别人可不能说改就改；对扩展开放就比较好理解了，也就是说在我们写好的代码基础上，很容易实现扩展。

设计原则可以参考另外一篇文章设计模式 - 七大原则

设计模式这里总结了 23 种：

• 创建型模式，共五种： 工厂方法模式 、 抽象工厂模式 、 单例模式 、 建造者模式 、 原型模式 。

• 结构型模式，共七种： 适配器模式 、 装饰器模式 、 代理模式 、 外观模式 、 桥接模式 、 组合模式 、 享元模式 。

• 行为型模式，共十一种： 策略模式 、 模板方法模式 、 观察者模式 、 迭代子模式 、 责任链模式 、 命令模式 、 备忘录模式 、 状态模式 、 访问者模式 、 中介者模式 、 解释器模式 。

js 方式实现 23 中设计模式

# 开闭原则 COP

• 开闭原则（Open Closed Principle）是编程中最基础、最重要的设计原则。
• 模块和函数应该对扩展开放（对提供方），对修改关闭（对使用方）。用抽象构建框架，用实现扩展细节。
• 当软件需要变化时，尽量通过扩展软件实体的行为来实现变化，而不是通过修改已有的代码来实现变化。
• 编程中遵循其他原则，以及使用设计模式的目的就是遵循开闭原则。
  

两个月之前在项目中就开始使用 Eslint ，当时直接 copy 别人的 .eslintrc.js 文件，感觉好复杂，一直没吃透，中间去把 Eslint 官方文档看了数遍，依然无果。今天刚好没事，回过头来想整理一下 Eslint 的使用，突然发现变得好简单。总结下在这过程中走得弯路。

• 先要知道 Lint 是什么，Eslint 又是什么；
• 因为想要的太多（想把 Eslint 官方文档里每个字都记住）就容易抓不住重点（目的是在项目中使用 Eslint，这仅仅是个工具，工具又怎么会搞的太难）。
  

这篇文章介绍了 Vue.js 父子组件之间通信的十种方式，不管是初学者还是已经在用 Vue 的开发者都会有所收获。无可否认，现在无论大厂还是小厂都已经用上了 Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在面试当中也往往会问到关于 Vue 方面的各种问题，其中大部分面试官会问到如上这种问题。

# 概述

几种通信方式无外乎以下几种：

• Prop（常用）
• $emit (组件封装用的较多)
• .sync 语法糖 （较少）
• $attrs 和 $listeners (组件封装用的较多)
• provide 和 inject （高阶组件 / 组件库用的较多）
• 其他方式通信
  

# 单行

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

# Vue 动态组件 component :is 的使用

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：

<component :is="componentTag"></component>

data() {

    return {

        componentTag: '',

    }

}

componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在 component 标签出现的位置，渲染该组件。

JSON 本身是不支持正则表达式的，所以我们需要转换传递正则的方式。

# 方式 1

1. 假如有个正则表达式为

// 字符长度为 1 到 16 之间

const regex = /^.{1, 15}$/

2. 那么，JSON 格式可以写为

{

	"regex": "^.{1, 15}$"

}

3. 然后，解析时采用

const regexp = new RegExp(regex)

regexp.test('11111')