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 相关文章推荐
javascript中call和apply方法浅谈
Sep 27 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
Vue formData实现图片上传
Aug 20 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
vue-loader教程介绍
2017/06/14 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python实现从web抓取文档的方法
2014/09/26 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
深入浅析python的第三方库pandas
2020/02/13 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
日语系毕业生推荐信
2013/11/11 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
学校宣传标语
2014/06/18 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书