新手快速入门JavaScript装饰者模式与AOP


Posted in Javascript onJune 24, 2019

什么是装饰者模式

当我们拍了一张照片准备发朋友圈时,许多小伙伴会选择给照片加上滤镜。同一张照片、不同的滤镜组合起来就会有不同的体验。这里实际上就应用了装饰者模式:是通过滤镜装饰了照片。在不改变对象(照片)的情况下动态的为其添加功能(滤镜)。

需要注意的是:由于 JavaScript 语言动态的特性,我们很容易就能改变某个对象(JavaScript 中函数是一等公民)。但是我们要尽量避免直接改写某个函数,这会导致代码的可维护性、可扩展性变差,甚至会污染其他业务。

什么是 AOP

想必大家对"餐前洗手、饭后漱口"都不陌生。这句标语其实就是 AOP 在生活中的例子:吃饭这个动作相当于切点,我们可以在这个切点前、后插入其它如洗手等动作。

AOP(Aspect-Oriented Programming):面向切面编程,是对 OOP 的补充。利用AOP可以对业务逻辑的各个部分进行隔离,也可以隔离业务无关的功能比如日志上报、异常处理等,从而使得业务逻辑各部分之间的耦合度降低,提高业务无关的功能的复用性,也就提高了开发的效率。

在 JavaScript 中,我们可以通过装饰者模式来实现 AOP,但是两者并不是一个维度的概念。 AOP 是一种编程范式,而装饰者是一种设计模式。

ES3 下装饰者的实现

了解了装饰者模式和 AOP 的概念之后,我们写一段能够兼容 ES3 的代码来实现装饰者模式:

// 原函数
var takePhoto =function(){
console.log('拍照片');
}
// 定义 aop 函数
var after=function( fn, afterfn ){ 
return function(){
let res = fn.apply( this, arguments ); 
afterfn.apply( this, arguments );
return res;
}
}
// 装饰函数
var addFilter=function(){
console.log('加滤镜');
}
// 用装饰函数装饰原函数
takePhoto=after(takePhoto,addFilter);
takePhoto();

这样我们就实现了抽离拍照与滤镜逻辑,如果以后需要自动上传功能,也可以通过aop函数after来添加。

ES5 下装饰者的实现

在 ES5 中引入了Object.defineProperty,我们可以更方便的给对象添加属性:

let takePhoto = function () {
console.log('拍照片');
}
// 给 takePhoto 添加属性 after
Object.defineProperty(takePhoto, 'after', {
writable: true,
value: function () {
console.log('加滤镜');
},
});
// 给 takePhoto 添加属性 before
Object.defineProperty(takePhoto, 'before', {
writable: true,
value: function () {
console.log('打开相机');
},
});
// 包装方法
let aop = function (fn) {
return function () {
fn.before()
fn()
fn.after()
}
}
takePhoto = aop(takePhoto)
takePhoto()

基于原型链和类的装饰者实现

我们知道,在 JavaScript 中,函数也好,类也好都有着自己的原型,通过原型链我们也能够很方便的动态扩展,以下是基于原型链的写法:

class Test {
takePhoto() {
console.log('拍照');
}
}
// after AOP
function after(target, action, fn) {
let old = target.prototype[action];
if (old) {
target.prototype[action] = function () {
let self = this;
fn.bind(self);
fn(handle);
}
}
}
// 用 AOP 函数修饰原函数
after(Test, 'takePhoto', () => {
console.log('添加滤镜');
});
let t = new Test();
t.takePhoto();

使用 ES7 修饰器实现装饰者

在 ES7 中引入了@decorator 修饰器的提案,参考阮一峰的文章。修饰器是一个函数,用来修改类的行为。目前Babel转码器已经支持。注意修饰器只能装饰类或者类属性、方法。三者的具体区别请参考 MDN Object.defineProperty ;而 TypeScript 的实现又有所不同:TypeScript Decorator。

接下来我们通过修饰器来实现对方法的装饰:

function after(target, key, desc) {
const { value } = desc;
desc.value = function (...args) {
let res = value.apply(this, args);
console.log('加滤镜')
return res;
}
return desc;
}
class Test{
@after
takePhoto(){
console.log('拍照')
}
}
let t = new Test()
t.takePhoto()

可以看到,使用修饰器的代码非常简洁明了。

场景:性能上报

装饰者模式可以应用在很多场景,典型的场景是记录某异步请求请求耗时的性能数据并上报:

function report(target, key, desc) {
const { value } = desc;
desc.value = async function (...args) {
let start = Date.now();
let res = await value.apply(this, args);
let millis = Date.now()-start;
// 上报代码
return res;
}
return desc;
}
class Test{
@report
getData(url){
// fetch 代码
}
}
let t = new Test()
t.getData()

这样使用@report修饰后的代码就会上报请求所消耗的时间。扩展或者修改report函数不会影响业务代码,反之亦然。

场景:异常处理

我们可以对原有代码进行简单的异常处理,而无需侵入式的修改:

function handleError(target, key, desc) {
const { value } = desc;
desc.value = async function (...args) {
let res;
try{
res = await value.apply(this, args);
}catch(err){
// 异常处理
logger.error(err)
}
return res;
}
return desc;
}
class Test{
@handleError
getData(url){
// fetch 代码
}
}
let t = new Test()
t.getData()

通过以上两个示例我们可以看到,修饰器的定义很简单,功能却非常强大。

小结

我们一步一步通过高阶函数、原型链、Object.defineProperty和@Decorator分别实现了装饰者模式。接下来在回顾一下:

  • 装饰者模式非常适合给业务代码附加非业务相关功能(如日志上报),就如同给照片加滤镜;
  • 装饰者模式非常适合无痛扩展别人的代码(你经常需要接手别人的项目吧)

有些朋友可能会觉得装饰者模式和 vue 的 mixin 机制很像,其实他们都是“开放-封闭原则”和“单一职责原则”的体现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,

Javascript 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
JavaScript面象对象设计
Apr 28 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 #Javascript
JS字符串常用操作方法实例小结
Jun 24 #Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 #Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 #Javascript
新手如何快速理解js异步编程
Jun 24 #Javascript
简单了解小程序+node梳理登陆流程
Jun 24 #Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 #Javascript
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
tensorflow中next_batch的具体使用
2018/02/02 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
分享vim python缩进等一些配置
2018/07/02 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
艾滋病宣传活动总结
2014/05/08 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
领导参观欢迎词
2015/01/26 职场文书
自荐信格式范文
2015/03/04 职场文书