zoukankan      html  css  js  c++  java
  • 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还有其他方法定义否?

  • 相关阅读:
    Web移动端项目适配(适用于原生JavaScript,Vue,React等项目中)
    Vue——实现一键复制
    解决报错Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
    解决h5嵌入app后video标签poster不能显示视频第一帧(表现为空白)
    Vue——长按元素实现某种操作
    小程序生命周期
    解决 mpvue 项目使用 vant-weapp 组件库 Uploader 时其中的 after-read 方法回调函数调用不成功
    我的考场vimrc的配置
    ubuntu vim solarized vimrc配置
    HNOI 2015 亚瑟王 概率期望DP
  • 原文地址:https://www.cnblogs.com/shsgl/p/3934387.html
Copyright © 2011-2022 走看看