包装者模式

Hello 大家好！我是小苏、这是我第一次来CSDN撰写自己的博客

这个框架我采用了YDUI的移动端框架，做弹窗还有提示窗处理

最近一直在研究JS的设计模式中的包装者模式，研究了许久都没搞懂，然后今天实际操作了一把，才发现原来包装者模式是这样理解的…可能我理解的有点不对，请大家多多指点

在一个Web项目中，可能存在非常多的表单，如注册、登录、修改用户信息等。在表单数据提交给后台之前，常常要做一些校验，比如登录的时候需要验证用户名和密码是否为空，

这是没有经过包装者模式书写的表单代码

这样的代码是不是自己也觉得写得很基础很LOW逼，这种代码一来会造成函数臃肿，职责混乱，二来谈不上任何可复用性。
下面我们来看看用包装者模式包装之后的代码

1.提取出表单验证的判断，单独封装成一个函数

2.将表单提交成功执行的代码也单独封装成一个函数

接下来我们来到重点部分了，我们如何在不修改函数源代码的同时，给函数的源代码添加上一些额外的功能呢？JS的继承能够做到这一点，但是JS的继承是有缺陷的：
一方面会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；另一方面，继承这种功能复用方式通常被称为“白箱复用”，“白箱”是相对可见性而言的，在继承方式中，超类的内部细节是对子类可见的，继承常常被认为破坏了封装性
3.下面我们来用包装者模式来给函数添加功能


校验输入和提交表单的代码完全分离开来，它们不再有任何耦合关系，formSubmit=formSubmit.before(validata)这句代码，如同把校验规则动态接在formSubmit函数之前，validata成为一个即插即用的函数，它甚至可以被写成配置文件的形式，这有利于分开维护这两个函数。再利用策略模式稍加改造，就可以把这些校验规则都写成插件的形式，用在不同的项目当中。
值得注意的是，因为函数通过Function.prototype.before或者Function.prototype.after被装饰之后，返回的实际上是一个新的函数，如果在原函数上保存了一些属性，那么这些属性会丢失。