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同页面多次调用弹出层具体实例代码
Aug 16 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
webpack打包js的方法
Mar 12 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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+mysql扎实个人基本功
2008/03/27 PHP
php中cookie的作用域
2008/03/27 PHP
php遍历目录viewDir函数
2009/12/15 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python3实现弹弹球小游戏
2019/11/25 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
浅谈Python协程
2020/06/17 Python
介绍下static、final、abstract区别
2015/01/30 面试题
4s店机修工岗位职责
2013/12/20 职场文书
工会积极分子个人总结
2015/03/03 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android