Js设计模式

简介

设计模式是我们在解决问题的时候针对特定问题给出的简洁而优化的处理方案

在js设计模式中最核心的思想：封装变化

将变与不变分离，确保变化的部分灵活，不变的部分稳定

1.构造器模式

构造器模式就是构造函数,(用于添加多个对象时，可以简化代码，并且赋值到新的变量中)

使用函数分配到内存从而给到新的变量

对代码进行封装，提高代码的复用性

缺点：

对里面的函数也会每次创建新的内存，（使用原型模式可以解决）

写法

    function fun (name, age) {this.name = namethis.age = age}let person = new fun('name', 100)console.log(person) // fun {name: 'name', age: 100}

2.原型模式

原型模式就是把方法存放放在该对象的原型上，从而减少内存，只存放一次，

使用：

    let employeel = {name: 'name',age: 100}function fun (name, age) {this.name = namethis.age = age}fun.prototype.say = function () {console.log(this.name, this.age);}let person = new fun('name', 100)person.say() // fun {name: 'name', age: 100}

es6中class类就具有构造器模式和原型模式，也是存放一次，改变内容，

    // 使用class类  兼顾构造器模式和原型模式 自动把方法挂在到原型上class fun1 {constructor(name, age) {this.name = namethis.age = age}}let new1 = new fun1('name', 100)console.log(new1); // fun1 {name: 'name', age: 100}

3.工厂模式

是一种创建对象的设计模式，他通过使用工厂来实现对象的创建，而不是直接使用构造函数，可以减少重复的代码，提高代码的可维护性和扩展性

    function User (name, age) {this.name = name;this.age = age;}// 封装工厂function UserFactory (role) {switch (role) {case 'user': return new User('用户', 15); break;case 'guest': return new User('游客', 18); break;case 'admin': return new User('管理员', 20); break;default: return new User('未知', 0); break;}}let suer = UserFactory('user')console.log(suer);

class 方式

    class Admin { constructor(name, age) { this.name = name; this.age = age; } }// es6的方式class UserFactorys {// 静态方法static create (role) {switch (role) {case 'user': return new Admin('用户', 15); break;case 'guest': return new Admin('游客', 18); break;case 'admin': return new Admin('管理员', 20); break;default: return new Admin('未知', 0); break;}}}let admin = UserFactorys.create('admin')console.log(admin);

4.抽象工厂模式

抽象工厂模式（Abstract Factory Pattern）是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

抽象工厂模式并不直接生成实例，而是用于对产品类簇的创建。

我们先创建一个 User 类（超级工厂），里面有两个方法，welcome() 方法用于欢迎某一类人，dataShow() 方法用于打印某一类人（子类重写的方式）。

之后我们创建三个子类 SuperAdmin、Admin、Editor（其他工厂），均继承自 User，它们继承父类的 name 和 welcome() 方法，重写父类的 dataShow() 方法。

class User {constructor(name, role) {this.name = name;this.role = role;}welcome () {console.log(`欢迎${this.name}，您的角色是${this.role}`)}dataShow () {throw new Error('抽象方法不能被调用')}}class Admin extends User {constructor(name) {super(name, '管理员')}dataShow () { console.log('管理员数据展示') }}let admin = new Admin('admin')admin.welcome()

5.建造者模式

建造者模式可以将一个复杂的对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示

使用

    class Navbar {init () {console.log('创建导航栏=num');}getData () {console.log('获取导航栏数据=num');return new Promise((resolve, reject) => {setTimeout(() => {console.log('111');resolve('导航栏数据')})})}rander () {console.log('渲染导航栏=num');}}// 建造者class Creator {async starBuild (builter) {await builter.init()await builter.getData()await builter.rander();}}const op = new Creator().starBuild(new Navbar())

简介