aop在js的实现

由于功能上的需求,需要在js的N个方法前执行一些判断代码,M个方法后执行处理代码。如果直接将代码写在具体方法里面增加处理代码,那会导致代码很难维护。对于这个需求,当时想到有2种解决方案。

1.新建一个抽象类,统一入口,然后在入口再分发到具体的方法。但需要对源代码进行不少改动。而且如何分发也是一些问题,如方法参数不一。所以就没坚持这种方案。

2.搬照spring的AOP编程。最后发现是可以实现的。

网上找了一些资料,修改整理了一个util类

Js代码

/*

aop工具类

onedear 2011-06-10

*/

var AOPUtil = {

/*

className:个人称之为作用域,也可称之为类名

fnName:方法名,字符串类型

beforeFn:before function

*/

before : function (className , fnName , beforeFn) {

if(typeof(className) == ‘function‘)

className = className.prototype ;

if(typeof(className[fnName]) != ‘function‘)

return ;

if(typeof(beforeFn) != ‘function‘)

return ;

var target = className[fnName] ;

className[fnName] = function () {

beforeFn.apply(this,arguments);

return target.apply(this, arguments);

}

},

beforeJudge : function (className , fnName , beforeFn) {

if(typeof(className) == ‘function‘)

className = className.prototype ;

if(typeof(className[fnName]) != ‘function‘)

return ;

if(typeof(beforeFn) != ‘function‘)

return ;

var target = className[fnName] ;

className[fnName] = function () {

var result = beforeFn.apply(this,arguments);

if(!result)

return ;

return target.apply(this, arguments);

}

},

//同上

after : function (className , fnName , afterFn ) {

if(typeof(className) == ‘function‘)

className = className.prototype ;

if(typeof(className[fnName]) != ‘function‘)

return ;

if(typeof(afterFn) != ‘function‘)

return ;

var target = className[fnName] ;

className[fnName] = function () {

var returnValue = target.apply(this, arguments);

afterFn.apply(this,arguments);

return returnValue;

}

}

};

调用sample

Js代码

function before(){

alert("before");

}

function after() {

alert("after");

}

本人习惯的方法定义有这么几种:

1.handle = {

testHandle : function() {

alert("testHandle");

}

}

则调用方法为

AOPUtil.before(window.handle,"testHandle" , after);

2.function test2() {

alert("test2");

}

则调用方法为:

AOPUtil.before(window,"test2" , before);

3.var t = function(){};

t.prototype.test = function(param1 , param2) {

alert(param1+"_"+param2);

}

则调用方法为:

AOPUtil.before(t, "test" , before);

js还有其他方法定义否?

时间: 2024-11-06 11:03:34

aop在js的实现的相关文章

js 实现 aop

Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用. 1, 防止window.onload被二次覆盖.2,无侵入的统计代码.3, 分离表单请求和校验.4,给ajax请求动态添加参数.5,职责链模式.6, 组合代替继承. 先给出before和after这2个“切面”函数. 顾名思义,就是让一个函数在另一个函数之前或者之后执行,巧妙的是,before或者after都可以和当前的函数公用th

用AOP改善javascript代码

Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用. 1, 防止window.onload被二次覆盖. 2,无侵入的统计代码. 3, 分离表单请求和校验. 4,给ajax请求动态添加参数. 5,职责链模式. 6, 组合代替继承. 先给出before和after这2个“切面”函数. 顾名思义,就是让一个函数在另一个函数之前或者之后执行,巧妙的是,这2个函数可以公用this和argumen

JS中AOP的实现和运用

在编写js的时候,我们有时会遇到针对某种场景做处理,比如在方法开始的时候校验参数,执行方法前检查权限,或是删除前给出确认提示等等.这些校验方法.权限检测.确认提示,规则可能都是相同的,在每个方法前去调用,显得麻烦,而且不利于统一管理,于是我们想到了面向切面编程(AOP). 1. 简单AOP实现 简单的AOP实现,就是在原函数执行的前后,增加运行before和after两个增强方法,用这个新函数替换原函数,为此,我编写了一个类似于构造器的函数(后文就称它为构造器),代码如下: // originF

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能, 你相信么,在JavaScript只需一个函数5行代码即可实现完整的面向方面AOP编程功能.这5行代码的功能包括: 无限层次的函数无害拦截 函数执行前拦截 检查函数的参数值 重新设定函数的参数值 函数执行后拦截 检查函数执行后的返回结果 重新设定函数的返回结果 虽然动态函数式语言的效率是一个存在的问题,但是对于它的高度灵活性,简直让人令人惊叹不已,剧赞. 这个小小的函数源自于和爱明兄的一次讨论:在javascri

JS实现AOP

JS实现AOP <script> function actsAsAspect(obj,handlers) {         if(typeof obj == 'function'){             obj = obj.prototype;         }                  for(var methodName in handlers){             var _handlers = handlers[methodName];             f

js实现面向切面的编程(AOP)

js实现面向切面的编程(AOP) 面向切面的编程(AOP) 还是有点意思的,可以在不修改原有代码的情况下增加新功能.有一些js框架实现AOP功能,但是有些时候我们并不能依赖于框架写程序(框架可能很笨重), 我们需要自己实现一些适合我们的功能模块.下面是我自己实现的js AOP,实现了before和after功能,仅供抛砖. 如下是aspect.js,是实现AOP的全过程. (function(window, undefined){  function aspect(type){   return

JS实现AOP拦截方法调用

//JS实现AOP拦截方法调用function jsAOP(obj,handlers) {    if(typeof obj == 'function'){        obj = obj.prototype;    }    for(var methodName in handlers){        var _handlers = handlers[methodName];        for(var handler in _handlers){            if((hand

JS模式--装饰者模式(用AOP动态改变函数的参数)

Function.prototype.before = function (beforefn) { var _self = this; return function () { beforefn.apply(this, arguments); return _self.apply(this, arguments); }; }; var func = function (param) { console.log(param); }; func =func.before( function (par

js 实现 di

前些时候有使用过AngularJS一些时间,最大的感受就是Angular完全颠覆了我们开发Web应用的方式,自己被其许多耳目一新的设计思想所折服. 首先想说的就是依赖注入(DI),这也意味着,你在使用某一个模块时,不需要去手动require()一下,你需要的模块会自己注入到的函数所在的作用域中,如: JavaScript 1 2 3 4 5 app.service('PersonService', function ($http) {     this.addPerson = function