JavaScript AOP编程实例


Posted in Javascript onJune 16, 2015

本文实例讲述了JavaScript AOP编程。分享给大家供大家参考。具体如下:

/*
// aop({options});
// By: adamchow2326@yahoo.com.au
// Version: 1.0
// Simple aspect oriented programming module
// support Aspect before, after and around
// usage:
    aop({
      context: myObject,   // scope context of the target function.
      target: "test",     // target function name
      before: function() {  // before function will be run before the target function
        console.log("aop before");
      },
      after: function() {   // after function will be run after the target function
        console.log("aop after");
      },
      around: function() {  // around function will be run before and after the target function
        console.log("aop around");
      }
    });
*/
var aop = (function() {
  var options = {},
    context = window,
    oFn,
    oFnArg,
    targetFn,
    targetFnSelector,
    beforeFn,
    afterFn,
    aroundFn,
    cloneFn = function(Fn) {
      if (typeof Fn === "function") {
        return eval('[' +Fn.toString()+ ']')[0];
      }
      return null;
    },
    checkContext = function() {
      if (options.context) {
        context = options.context;
      }
      if (typeof context[(options.target).name] === "function") {
        targetFnSelector = (options.target).name;
        targetFn = context[targetFnSelector];
      }
      else if (typeof context[options.target] === "function") {
        targetFnSelector = options.target;
        targetFn = context[targetFnSelector];
      }
      if (targetFn) {
        oFn = cloneFn(targetFn);
        oFnArg = new Array(targetFn.length);
        return true;
      }
      else {
        return false;
      }
    },
    run = function() {
      context[targetFnSelector] = function(oFnArg) {
        if (aroundFn){
          aroundFn.apply(this, arguments);
        }
        if (beforeFn){
          beforeFn.apply(this, arguments); // 'this' is context
        }
        oFn.apply(this, arguments);
        if (afterFn){
          afterFn.apply(this, arguments); // 'this' is context
        }
        if (aroundFn){
          aroundFn.apply(this, arguments);
        }
      };
    };
  return function(opt){
    if (opt && typeof opt === "object" && !opt.length) {
      options = opt;
      if (options.target && checkContext()) {
        if (options.before && typeof options.before === "function") {
          beforeFn = options.before;
        }
        if (options.after && typeof options.after === "function") {
          afterFn = options.after;
        }
        if (options.around && typeof options.after === "function") {
          aroundFn = options.around;
        }
        run();
      }
    }
  };
})();
// test examples
// ----------------- aop modify global function ---------------//
function test(name, age) {
  console.log("test fn. name = " + name + " age: " + age);
}
aop({
  target: "test",
  before: function() {
    console.log("aop before");
  },
  after: function() {
    console.log("aop after");
  },
  around: function() {
    console.log("aop around");
  }
});
// run
test("adam", 6);
// ----------------- aop test modify method in an object ---------------//
var myobj = {
  myName: "testName",
  sayName: function() {
    console.log(this.myName);
  },
  childObj: {
    age: 6,
    say: function() {
      console.log(this.age);
    }
  }
};
aop({
  context: myobj,
  target: "sayName",
  before: function() {
    console.log("aop before say name = " + this.myName);
  },
  after: function() {
    console.log("aop after say name = " + this.myName);
  },
  around: function() {
    console.log("aop around say name = " + this.myName);
  }
});
// run
myobj.sayName();
aop({
  context: myobj.childObj,
  target: "say",
  before: function() {
    console.log("aop before say name = " + this.age);
  },
  after: function() {
    console.log("aop after say name = " + this.age);
  },
  around: function() {
    console.log("aop around say name = " + this.age);
  }
});
myobj.childObj.say();

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 #Javascript
动态加载jQuery的方法
Jun 16 #Javascript
详解AngularJS中的表格使用
Jun 16 #Javascript
js+HTML5实现视频截图的方法
Jun 16 #Javascript
AngularJS中的过滤器使用详解
Jun 16 #Javascript
简述AngularJS的控制器的使用
Jun 16 #Javascript
详解AngularJS中的表达式使用
Jun 16 #Javascript
You might like
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
koa源码中promise的解读
2018/11/13 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
初一生物教学反思
2014/01/18 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js