装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但继承的方式会带来问题:当父类改变时,他的所有子类都将随之改变。

当JavaScript脚本运行时,在一个对象中(或他的原型上)增加行为会影响该对象的所有实例,

装饰者是一种实现继承的替代方案,它通过重载方法的形式添加新功能,该模式可以在被装饰者前面(before)或者后面(after)加上自己的行为以达到特定的目的。

装饰者模式是为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函数对象,因此,当需要执行特殊行为的时候,调用代码就可以根据需要有选择地、按顺序地使用装饰功能来包装对象。优点是把类(函数)的核心职责和装饰功能区分开了。

我们可以定义工具函数,如下:

Function.prototype.before = function (beforeFn) {
var self = this; //保存原函数的引用
return function () { //返回包含了新函数和原函数的代理函数
beforeFn.apply(this,arguments); //执行新函数,且保证this不被劫持
return self.apply(this,arguments); //执行原函数,并返回原函数的执行结果,并保证this不被劫持
}
};
Function.prototype.after = function (afterFn) {
var self = this;
return function () {
var ret = self.apply(this,arguments);
afterFn.apply(this,arguments);
return ret;
}
};

这里的参数beforeFn、afterFn即为要为原函数扩展新功能的新函数(添加装饰),它们的唯一区别是执行顺序的不同。如果不想污染Function的原型,可以用下面的方法:

var before = function (fn, beforeFn) {
return function () {
beforeFn.apply(this,arguments);
return fn.apply(this,arguments);
}
};
var after = function (fn, afterFn) {
return function () {
var ret = fn.apply(this,arguments);
afterFn.apply(this,arguments);
return ret;
}
};

例子:给HTTP请求中带上一个参数防止CSRF攻击

var ajax = function (type, url, param) {
console.log(param); //发送ajax请求代码略...
};
var beforeFn = function (type, url, param) {
param.Token = 'Token';
};
ajax = ajax.before(beforeFn);
ajax('get','http://...com/userinfo',{name:'SuFa'});
//{ name: 'SuFa', Token: 'Token' }

通过给ajax函数动态装饰上Token参数,而不是直接在原函数上修改参数,保证了ajax函数仍然是一个纯净的函数,提高了它的可复用性,它可在无需做任何修改的情况下直接拿到别的项目中使用。

例子:表单验证(把验证输入和表单提交的代码分离开来,然后动态的把验证输入功能装饰到表单提交之前,这样一来,我们就可以把验证输入部分写成一个插件的形式,用在不同的项目中)

//验证输入函数
var validata = function () {
if(username.value === ''){
alert('用户名不能为空');
return false;
}
if(password.value === ''){
alert('密码不能为空');
return false;
}
};
//表单提交函数
var formSubmit = function () {
var param = {
username: username.value,
password: password.value
};
ajax('http://xxx.com/login',param);
}; formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
formSubmit();
};

参考文献: 《JavaScript模式》 《JavaScript设计模式与开发实践》

轻松掌握:JavaScript装饰者模式的更多相关文章

  1. javascript装饰器模式

    装饰器模式 什么是装饰器 原名decorator 被翻译为装饰器 可以理解为装饰 修饰 包装等意 现实中的作用 一间房子通过装饰可以变得更华丽,功能更多 类似一部手机可以单独使用 但是很多人都愿意家个 ...

  2. JavaScript——装饰者模式

    今天打算开始系统的学习设计模式,虽然之前有看过<大话设计模式>但是没能够静下心来写学习笔记导致很多内容都只是有一个概念而不会去应用.这次要记下学习的过程.接下来进入主题. 何为设计模式?设 ...

  3. JavaScript装饰者模式

    这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法 ...

  4. JavaScript 装饰者模式(this运用)

    例: function ConcreteClass() { this.performTask = function () { this.preTask(); console.log('doing so ...

  5. Javascript设计模式之装饰者模式详解篇

    一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改 ...

  6. JavaScript高级---装饰者模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  7. 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)

    装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...

  8. 【读书笔记】读《JavaScript设计模式》之装饰者模式

    一.定义 装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中.这样一来,你可以给一个方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者对象是一种更灵活的选择(装 ...

  9. javascript设计模式学习之十五——装饰者模式

    一.装饰者模式定义 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.这种为对象动态添加职责的方式就称为装饰者模式.装饰者对象和它所装饰的对象拥有一致的接口,对于用 ...

随机推荐

  1. unity3d中 刚体(Rigidbody) 碰撞体(Collider) 触发器(Is Trigger)

      刚体(Rigidbody)的官方(摘自Unity3d的官方指导书<Unity4.x从入门到精通>)解释如下: Rigidbody(刚体)组件可使游戏对象在物理系统的控制下来运动,刚体可 ...

  2. Anliven - 解决问题的一些方法

    How to resolve the problem? 获取基本的相关信息(后续处理问题的基础)  在怎样的背景环境下?发生了怎样的问题? 如果无法清楚地辨别或陈述问题的基本信息,那么,此时要面对的将 ...

  3. AngularJS in Action读书笔记2——view和controller的那些事儿

    今天我们来818<angularjs in action>的第三章controller和view. 1.Big Picture概览图 View是angularjs编译html后呈现出来的, ...

  4. ListView:The content of the adapter has changed but ListView did not receive a notification终极解决方法

    使用ListView时遇到如下的异常信息: 10-26 18:30:45.085: E/AndroidRuntime(7323): java.lang.IllegalStateException: T ...

  5. Windows Azure HandBook (8) Azure性能测试(1)

    <Windows Azure Platform 系列文章目录> 我们在项目上线之前,常常需要对部署在微软云上的应用软件做压力测试. 一般的压力测试,常常在本地计算机安装压力测试软件 (比如 ...

  6. Windows Azure Cloud Service (41) 修改云服务IIS托管管道模式为4.0经典模式

    <Windows Azure Platform 系列文章目录> 这是笔者在之前的项目中遇到的问题,做一下总结,给网友做参考. 在一般情况下,Visual Studio开发的Cloud Se ...

  7. Elaticsearch REST API常用技巧

    在Elasticsearch的REST API中,有很多使用技巧,这里针对官方文档给出的介绍,总结了几个常用的例子. 更多内容参考:Elastisearch文档总结 多索引 ES支持在一次请求中指定多 ...

  8. 关于Entity Framework中的Attached报错的完美解决方案

    我们在使用Entity Framework进行CRUD时,为了提升查询效率,一般均会启动NoTracking,即不追踪变化,设置代码如下: //这是DB First模式下设置方法: aTestEnti ...

  9. 【转载】关于BooleanQuery在搜索中的用处

    我们在搜索中可能会遇到要搜索索引文件中不同字段,不同字段之间就存在了与或非的运算关系,如:这个xx字段中必须存在什么什么关键词,而另一个 XXX字段可以存在或不存在什么什么关键词等等等.这就需要有Bo ...

  10. 观察者模式(Observer pattern)

    知识点 使对象之间达到松耦合的效果. 观察者模式定义了对象之间一对多的关系.主题用一个共同的接口来更新观察者. 观察者和被观察者之间通过松耦合的方式结合,被观察者不用理会观察者的实现细节,只需要观察者 ...