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图片切换效果实现代码
Sep 24 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
js转html实体的方法
Sep 27 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python中os.path用法分析
2015/01/15 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python上selenium的弹框操作实现
2020/07/13 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
大二自我鉴定范文
2013/10/05 职场文书
委托书的格式
2014/08/01 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
代理词怎么写
2015/05/25 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL