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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
简单的js计算器实现
Oct 26 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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出错界面
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
基于Jquery的简单&简陋Tabs插件代码
2010/02/09 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python模拟登录12306的方法
2014/12/30 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
小学生运动会报道稿
2014/09/12 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
建国大业电影观后感
2015/06/01 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python