学好JavaScript设计模式，一文足矣！( 二 ) _JavaScript

如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve)})你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以写成这样：
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。() => import('./my-async-component'))当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') }})单例模式概念
单例模式符合单一职责原则，用大白话描述单例模式就是系统中被唯一使用，例如：电子商务网站常见的购物车和登录都是单例模式的运用。
前端中的实例
1.jQuery中的$('')
仍旧是jQuery当中的$(' ')选择器，整个jQuery框架当中有一个这样的选择器。
2.Redux和Vuex
不管是Redux还是Vuex,里面的状态store都是唯一的，Redux中的store只能通过Reducer去修改，而Vuex中的store只能通过Mutation修改，其余修改方式都是错误的。
适配器模式概念
适配器模式的含义是旧接口格式和使用者不兼容，中间加一个适配器接口。生活当中随处可见符合适配器模式的例子，如：插头转换器，电脑接口转换器。
前端中的实例
封装旧的接口
这里我来列举一个例子，这里那我们常用的发起ajax请求为例，你自己封装的ajax，使用方式如下：
ajax({ url:'/getList', type:'Post', dataType:'json', data:{id:"123" }}).done(function(){})但是这个时候你接到的项目当中都是：$.ajax({...})，这个时候我们只需要加一层适配器即可，代码如下：
let $ = {
ajax:function (options) {
return ajax(options);
}
}
Vue中的computed
Vue的计算属性相信大家在项目的开发当中都是经常会用到的一个特性，比如一个字符串我们想要他的翻转后的结果，那么这里就可以使用计算属性，计算属性这个特性本身用的设计模式就是适配器模式，代码如下：
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})结果：
Original message: "Hello"
Computed reversed message: "olleH"

文章插图

装饰器模式
概念
装饰器模式，装饰我们可以理解为就是给一个东西装饰另外一些东西使其更好看，对应到前端中就是为对象添加新功能，并且不改变其原有的结构和功能，这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。在我们日常生活中用到的手机壳就是经典的例子
前端中的实例1.ES7中的装饰器
ES7装饰器的具体用法可以去找阮一峰老师的相关文章，其实参照其字面意思，就是对类、方法、属性进行修饰，从而进行一些相关功能的定制。那么JavaScript的Decorator在原理和功能上简单明了，简单来说就是对对象进行包装，返回一个新的对象描述，这里可以类比高阶组件。这里我们列举一个简单的例子,想必大家都玩过王者荣耀，英雄的战斗力都是随着装备和等级的增加越来越厉害，那么这里我们就以王者荣耀当中的英雄为例，示例场景是这样的：

首先创建一个普通的英雄类，他的防御值为10，攻击力为20，血量为20；
然后我们给它出布甲装备，这样它的抵御力增加100，变为110；

然后按照这个场景来写具体的代码：
创建Hero类
class Hero {constructor(define = 10,attack = 20, blood = 20) {this.init(define,attack,blood)}init(define,attack,blood) {this.define = define;this.attack = attack;this.blood = blood;}toString() {return `防御力: ${this.define},攻击力:${this.attack},血量:${this.blood}`} } let houyi = new Hero(); console.log(`当前状态 ===> ${houyi}`)//输出：当前状态 ===> 防御力：10，攻击力20，血量20