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 event使用方法详解
Apr 28 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
Vue form表单动态添加组件实战案例
Sep 02 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
php 操作符与控制结构
2012/03/07 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
少女风vue组件库的制作全过程
2019/05/15 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
"引用"与多态的关系
2013/02/01 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
办公室主任职责范文
2013/11/08 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
《桥》教学反思
2014/04/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书