轻松掌握JavaScript装饰者模式

网络编程 2025/1/16 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

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

当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设计模式与开发实践》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,装饰者模式

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“轻松掌握JavaScript装饰者模式”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年01月16日

轻松掌握JavaScript装饰者模式

js select实现省市区联动选择

node.js实现快速截图

评论“轻松掌握JavaScript装饰者模式”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接