正常操作，正常分析，大家好，我是D1n910。

今天继续来学习 《JavaScript 设计模式》的第三篇 结构型设计模式

这是一个连续的读书笔记，所以如果你之前的内容没有看的话，可以去看看。

下面是第十章的展览，里面其实链接好了所有1～10的专栏内容，所以直接戳下面的专栏链接就可以快速到达啦。

这里再次感谢 《Javascript 设计模式》及其作者 张荣铭，专栏内容是在它的基础上生成的。

其实学到现在，会发现自己已经用到过这里面很多种设计模式了，这些都是上学上课、平时学习以及看之前大佬的代码耳濡目染的。

所以会有比较多的熟悉感，大家看到对应的模式的话，可以多思考一下平常自己是怎么用的，具体场景是怎么使用的。

第三篇 结构型设计模式

结构型设计模式关注于如何将类或者对象组合成更大、更复杂的结构，以简化设计。

第 12 章 房子装修——装饰者模式（P85）

装饰者模式（Decorator）: 在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户的更复杂需求。

下面是介绍了装饰者的使用场景之一。作者举的例子其实有点怪，不过可以看到思路。

12.1、为输入框的新需求

现在的需求是在姓名输入框里点击输入框以后显示输入内容提示：

var nameInput = document.getElementById('nameInput');

var nameWarnInput = document.getElementById('nameWarn');

nameInput.onclick = function () {

   nameWarnInput.style.display = 'inline-block'

};

现在希望加需求是点击输入框之前，提示“请输入”，点击输入框后不显示“请输入”。

看起来很简单啊，于是啪得一下就写下面的代码。

var nameInput = document.getElementById('nameInput');

var nameWarnInput = document.getElementById('nameWarn');

var nameTipsInput = document.getElementById('nameTips');

nameInput.onclick = function () {

   nameWarnInput.style.display = 'inline-block'

   nameTipsInput.style.display = 'none'

};

这里改name OK，但是有好多输入框怎么处理呢，比如原来的电话输入框、性别输入框……那么在这里我们就可以用装饰者模式来装饰我们原有的方法。

12.2、装饰已有的功能对象

考虑我们可以用原来对象上绑定的方法，又可以无损添加新的方法，可以这么写我们的装饰器方法。

（是可以用事件绑定器，不过这里主要是讲了装饰器的应用场景）

var decorator = function (even, fn) {

   // 获取事件源

   var dom = document.getElementById(even);

   

   // 如果已有事件

   if (typeof dom.onclick === 'function') {

       var oldOnclick = dom.onclick;

       dom.onclick = function() {

           oldOnclick();

           fn()

       }

   } else {

       dom.onclick = fn

   }

}

12.3、为输入框添砖加瓦

用法如下：

decorator('nameInput', function() {

   var nameTipsInput = document.getElementById('nameTips');

   nameTipsInput.style.display = 'none';

})

本章 End，学习进度 11/40，加油加油

D1n910 于2021年02月19日 21:08 在福永