JavaScript之AOP编程实例


Posted in Javascript onJuly 17, 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 相关文章推荐
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
javascript用rem来做响应式开发
Jan 13 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
react基本安装与测试示例
Apr 27 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 #Javascript
javascript封装的sqlite操作类实例
Jul 17 #Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 #Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 #Javascript
javascript实现树形菜单的方法
Jul 17 #Javascript
JSON与XML优缺点对比分析
Jul 17 #Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Javascript MD4
2006/12/20 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python语言异常处理测试过程解析
2020/01/08 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
虚拟机下载python是否需要联网
2020/07/27 Python
一文读懂Python 枚举
2020/08/25 Python
Python中qutip用法示例详解
2020/10/02 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
小学生考试获奖感言
2014/01/30 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
婚庆主持词大全
2015/06/30 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Python3 如何开启自带http服务
2021/05/18 Python