JavaScript实现AOP详解(面向切面编程,装饰者模式)

 更新时间:2017年12月19日 09:50:34   作者:三十亿少女的梦  
下面小编就为大家分享一篇JavaScript实现AOP的方法(面向切面编程,装饰者模式),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

什么是AOP?

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后, 再通过“动态织入”的方式掺入业务逻辑模块中。

AOP能给我们带来什么好处?

AOP的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块。

JavaScript实现AOP的思路?

通常,在 JavaScript 中实现 AOP,都是指把一个函数“动态织入”到另外一个函数之中,具体的实现技术有很多,下面我用扩展 Function.prototype 来做到这一点。请看下面代码:

Function.prototype.before = function (beforefn) {
  var _self = this; //保存原函数引用
  return function () { //返回包含了原函数和新函数的"代理函数"
   beforefn.apply(this, arguments); //执行新函数,修正this
   return _self.apply(this, arguments); //执行原函数
  }
 };
 Function.prototype.after = function (afterfn) {
  var _self = this;
  return function () {
   var ret = _self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 var func = function () {
  console.log("2")
 }
 func = func.before(function () {
  console.log("1");
 }).after(function () {
  console.log("3");
 } )
 func();

执行结果如下:

我把负责打印数字1和打印数字3的两个函数通过AOP的方式动态植入func函数。通过执行上面的代码,我们看到控制台顺利地返回了执行结果1、2、3。

这种使用AOP的方式来给函数添加职责,也是JavaScript语言中的一种非常特别的巧妙的装饰者模式实现,下面我们来试试Function.prototype.before的威力,请看下面代码:

Function.prototype.before = function (beforefn) {
  var __self = this; // 保存原函数的引用
  return function () { // 返回包含了原函数和新函数的"代理"函数
   beforefn.apply(this, arguments); // 执行新函数,且保证 this 不被劫持,新函数接受的参数 // 也会被原封不动地传入原函数,新函数在原函数之前执行
   return __self.apply(this, arguments); // 执行原函数并返回原函数的执行结果, 2 // 并且保证 this 不被劫持
  }
 }
 Function.prototype.after = function (afterfn) {
  var __self = this;
  return function () {
   var ret = __self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 document.getElementById = document.getElementById.before(function(){ alert (1);
 });
 var button = document.getElementById( 'button' );

执行结果:

我们给document.getElementById()做了一些装饰,以后我们每次调用这个方法之前都会先执行alert("1")这条语句,但是请注意我们这条语句并不是写在了document.getElementById()这个方法的源码中,而只是在他的外部给他加了装饰,这样带来好处就是我们可以在不改变原方法的源码的情况下为他添加一些新的行为。国际惯例,举个栗子:

我的同事写了一个函数可以输出当前时间,而我现在的需求是输出当前天气之后再输出当前时间,下面有两种解决思路:

(1)传统解决办法: 拿同事的函数过来,找到他输出时间的代码,在这些代码之前加入输出当前天气的代码

(2)装饰者模式解决办法:拿同事的函数过来,不用看他的源码,直接给他的函数装饰一下,装饰的东西也就是输出当前天气的代码。

两种方法都解决了问题,但是他们的出发点是完全不同的:

(1)方法是改造原函数的内部,我们就需要去理解源代码,然后做修改。

(2)方法是给原函数添加了一层外套,我们根本不用管原本函数的内部实现。

现在又有了新的需求:在输出当前时间之前,先输出当前温度

(1)方法,我们在第一个需求已经把同事的代码改的面目全非了,现在又要重新理解函数内部,并加以修改(删除输出当前天气的代码,然后加入输出当前温度的代码)。

(2)方法,同事原本的函数是没有变的,我们现在给同事的函数换一件套(输出当前温度)就可以了。

以上这篇JavaScript实现AOP详解(面向切面编程,装饰者模式)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 深入浅出es6模板字符串

    深入浅出es6模板字符串

    这篇文章主要介绍了深入浅出es6模板字符串,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • URL中“#” “?” &“”号的作用浅析

    URL中“#” “?” &“”号的作用浅析

    这篇文章主要介绍了URL中“#” “?” &“”号的作用浅析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • JS图片无缝、平滑滚动代码

    JS图片无缝、平滑滚动代码

    这篇文章主要介绍了JS图片无缝、平滑滚动的实现,需要的朋友可以参考下
    2014-03-03
  • 给easyui datebox扩展一个清空的实例

    给easyui datebox扩展一个清空的实例

    下面小编就为大家带来一篇给easyui datebox扩展一个清空按钮的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JavaScript制作楼层导航效果流程详解

    JavaScript制作楼层导航效果流程详解

    项目中遇到比较多的的文档内容,为了方便查找里面的小内容,一般都会在左侧或者右侧放一个固定楼层的导航栏,今天就来说一下这个固定楼层导航栏的思路以及实现的方法
    2021-10-10
  • 编写兼容IE和FireFox的脚本

    编写兼容IE和FireFox的脚本

    编写兼容IE和FireFox的脚本确定的件很烦人的事,今日又经历了一次。
    2009-05-05
  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    本文介绍一个简单可行的办法,来做基于gulp构建的中小型项目中的seajs合并压缩,感兴趣的朋友一起看看详情吧
    2016-06-06
  • Bootstrap输入框组件使用详解

    Bootstrap输入框组件使用详解

    这篇文章主要为大家详细介绍了Bootstrap输入框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS数组方法reverse()用法实例分析

    JS数组方法reverse()用法实例分析

    这篇文章主要介绍了JS数组方法reverse()用法,结合实例形式分析了JS数组reverse()方法基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • Js利用console计算代码运行时间的方法示例

    Js利用console计算代码运行时间的方法示例

    最近看了一本书,发现了个计算代码执行时间的方法,感觉还挺有用的,所以这篇文章主要给大家介绍了关于Javascript利用console计算代码运行时间的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-09-09

最新评论