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

创建decorateCloth方法，为英雄增加布甲装备。
function decorateCloth(target,key,descriptor) {const method= descriptor.value;let moreDef = 100;let ret;descriptor.value = https://www.isolves.com/it/cxkf/yy/js/2020-07-07/(...args) => {args[0] += moreDef;ret = method.apply(target,args);return ret;}return descriptor;}class Hero {constructor(define = 10,attack = 20, blood = 20) {this.init(define,attack,blood)}@decorateClothinit(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}`)//输出：当前状态 ===> 防御力：110，攻击力20，血量20可以看到输出结果防御力确实增加了，布甲确实起到了作用。
【学好JavaScript设计模式，一文足矣！】从上面的代码可以看出，如果有的时候我们并不需要关心函数的内部实现，仅仅是想调用它的话，装饰器能够带来比较好的可读性，使用起来也是非常的方便。

文章插图

代理模式概念
代理模式是使用者无权访问目标对象，中间加代理，通过代理做授权和控制，我们经常会用到这个模式，不管实际的开发也好，还是网络部署当中，都能够看到它的身影。如：科学上网谷歌搜索
前端中的实例
1.网页中的事件代理
其实网页的事件代理也是非常常考的面试题之一，其实就是把元素绑定到父元素上面，而不是对其下面的每一个子元素都进行相应的绑定，下面举一个具体的实例：
<div id="item"> <a href=https://www.isolves.com/it/cxkf/yy/js/2020-07-07/"#">a1 a2 a3 a4

2.jQuery中的$proxy
比如我们经常会遇到这样一种情况，如下代码所示
$('#div1').click(function() {$(this).addClass('red') }) $('#div1').click(function() {setTimeout(function () {// this 不符合期望$(this).addClass('red');},1000); })解决的方法可能有的同学已经想到是先将this赋值给一个变量。
$('#div1').click(function() { setTimeout(function () {let _this = this;// this 不符合期望$(_this).addClass('red'); },1000);})是的这种方法是对的，但是这样就会增加一个变量，所以这里用$proxy解决更好，代码如下：
$('#div1').click(function() { setTimeout($proxy(function () {$(this).addClass('red'); }),1000);})观察者模式概念
观察者模式就是只要你作为订阅者订阅了某个事件，当事件触发的时候，发布者就会通知你。这里可以类比我们去咖啡厅点咖啡，当我们点了咖啡之后，就可以去做别的事情，当咖啡完成时，服务员就会叫你来取，你到时候取走咖啡即可。
前端中的实例
1.网页中的事件绑定
<button id="btn1">btn</button><scirpt> $('#btn1').click(function() {console.log(1) })</script>这里我们订阅了btn1的click事件，当几点btn1所在的元素时，click function就会触发。
2.Node.js的自定义事件EventEmitter
const EventEmitter = require('events').EventEmitterconst emitter1 = new EventEmitter();emitter1.on('some',()=> { //监听some事件 console.log('some event is occured 1')})emitter1.on('some',()=> { //监听some事件 console.log('some event is occured 2')})emitter.emit('some')状态模式概念
提到状态模式就不得不提到有限状态机，阮一峰总结过有限状态机的三个特征：

状态总数（state）是有限的。
任一时刻，只处在一种状态之中。
某种条件下，会从一种状态转变（transition）到另一种状态。

这里充分说明了状态模式的重要性。一个对象有状态变化，每次状态变化都会触发一个逻辑，不能总是用if else来控制，更要学会用状态来进行控制。
前端中的实例
1.ES6中的promise
promise是ES6新增的一个特性，它是异步编程的一种解决方案，比传统的解决方案更加方便，可以使用.then()操作避免了回调嵌套带来的回调地狱式的写法，那么下面就来简单实现一个promise 。
let fsm = new statemachine({ init:'pending', transitions:[{name:'resolve',from:'pending',to:'fullfilled'},{name:'reject',from:'pending',to:'rejected'} ], methods:{onResolve:function(state,data) {data.successList.forEach(fn => fn())}onReject:function(state,data) {data.failList.forEach(fn => fn())} }})