zoukankan      html  css  js  c++  java
  • smartJS 0.1 API 讲解

    Trigger

    在目标对象上加入触发器功能,目标对象的方法就会具有方法注入功能,注入的方式有before(前置执行),after(后置执行)和round(环绕),另外还有一个exception模式,因为异常处理的模块还没完成,暂时先空缺。

    接口方法

    复制代码
        st.attachTrigger(target, mode, fnInterface);
        
        //后置注入方法
        target.on(name, trName, fn, priority, eventMode)
        //前置置注入方法
        target.onBefore(name, trName, fn, priority, eventMode)
        //方法环绕
        target.onRound(name, trName, fn)
        //删除注入方法
        target.off(name, trName) 
        //删除前置注入方法
        target.offBefore(name, trName)
        //替换目标对象的原始方法
        target.extend(prop)
    复制代码

    参数讲解

    target : 目标对象;

    mode:回调模式,同promisEvent的mode设置

    iFace :自定义接口方法;在使用attachTrigger方法后,会在target上附加一些控制方法,为了避免重名和控制对外的方法,使用iFace来自定义

    使用了attachTrigger后,会在target上附加上注入控制的方法,on,onBefore等

    name :需要注入的target的方法名

    trName : 加入触发回调名称

    fn:注入方法,方法参数同PrmiseEvent的回调参数

    priority :权重设置,同PrmiseEvent ;

    eventMode :加入的事件模式,同PrmiseEvent

    需要注意的是on和onBefore注入的方法接口是fn(e,arg,...)

    e同PromiseEvent参数设置,唯一不同的是有两个新加入的控制:

    e.preventDefault 阻止默认的方法,即target的原始方法; 但不会影响回调事件的

    e.stop() 停止方法执行,无论是原始方法还是回调;

    而onRound的是fn(originalFn,arg,..),环绕和前后置不冲突

    originalFn : 需要环绕的方法;

    使用样例

    前后置

    复制代码
        var result = [];
        var obj = {
            test: function(name) {
                result.push(name);
            }
        };
    
        //加入触发器
        st.attachTrigger(obj);
    
        //加入前置方法
        obj.onBefore("test", "addBefore", function(d, name) {
            result.push('before-' + name)
        });
        
        //加入后置方法
        obj.on("test", "addAfter", function(d, name) {
            result.push('after-' + name)
        });
    
        //执行,结果"before-bind,bind,after-bind"
        obj.test('bind');
    复制代码


    自定义接口iFace

    复制代码
     var obj1 = st.attachTrigger({
            test: function(name) {
                result.push(name);
            }
        }, {
            //屏蔽后置方法on
            on: null,
            //将前置方法onBefore设置为bind
            onBefore: "bind"
        })
    
        obj1.bind("test", "addBefore", function(d, name) {
            result.push('before-' + name);
        });
    复制代码


    方法环绕

    复制代码
      var obj3 = st.attachTrigger({
                    test: function(name) {
                        result.push(name);
                    }
                });
    
        obj3.onRound("test", "roundTest", function(fn, name) {
            result.push('before');
            fn(name);
            result.push('after');
        });
    
        obj3.test('round');
        
        expect(result.join(',')).toBe("before,round,after");
    复制代码

    promise控制

    在前置和后置中都是通过promiseEvent的事件参数做promise控制,但在原始方法中,为了避免干预原始方法带来的混乱,则没有加入事件参数,而是通过使用JQuery的deffered来做控制

    复制代码
    var obj = st.attachTrigger({
                    test: function(name) {
                        //原始方法中使用jquery的deferred
                        var d = $.Deferred();
                        setTimeout(function() {
                            result.push(name);
                            d.resolve();
                        }, 100);
                        return d.promise();
                    }
                });
    
                obj.onBefore('test', 'testBefore', function(d, name) {
                    setTimeout(function() {
                        result.push(name + '-before');
                        d.resolve();
                    }, 100);
                    return d.promise();
                })
    
                obj.on('test', 'testAfter', function(d, name) {
                    setTimeout(function() {
                        result.push(name + '-after');
                        d.resolve();
                    }, 100);
                    return d.promise();
                })
    
                $.when(obj.test('call')).done(function() {
                    expect(result.join(',')).toBe('call-before,call,call-after');
                })
    复制代码


    结果传递

    复制代码
    var obj = st.attachTrigger({
        //promise参数传递
        test: function(name) {
            var d = $.Deferred();
            setTimeout(function() {
                d.resolve(name + '-base');
            }, 100);
            return d.promise();
        },
        //return 结果传递
        testReturn: function(name) {
            return name + "-base"
        }
    });
    
    obj.on('test', 'testAfter', function(d, name) {
        setTimeout(function() {
            d.resolve(d.result + '-after');
        }, 100);
        return d.promise();
    })
    
    obj.on('testReturn', 'testAfter', function(d, name) {
        setTimeout(function() {
            d.resolve(d.result + '-after');
        }, 100);
        return d.promise();
    })
    
    $.when(obj.test('call')).done(function(data) {
        expect(data).toBe('call-base-after');
    });
    
    $.when(obj.testReturn('call2')).done(function(data) {
            expect(data).toBe('call2-base-after');
    });
    复制代码

    stop控制

    复制代码
    var obj = st.attachTrigger({
        test: function(name) {
            result.push(name);
        }
    });
    
    obj.onBefore('test', 'testBefore', function(d, name) {
        //停止后续的执行
         d.stop();
        result.push(name + '-before1');
    })
    
    obj.onBefore('test', 'testAfter', function(d, name) {
        result.push(name + '-before2');
    })
    
    obj.on('test', 'testBefore2', function(d, name) {
        result.push(name + '-after');
    })
    
    obj.test('call');
    expect(result.join(',')).toBe('call-before1');
    复制代码

    stopPropagation和preventDefault控制

    复制代码
    var obj = st.attachTrigger({
                    test: function(name) {
                        result.push(name);
                    }
                });
    
                obj.onBefore('test', 'testBefore', function(d, name) {
                    result.push(name + '-before1');
                    //stopPropagation阻止before的回调,preventDefault阻止默认方法
                    d.stopPropagation().preventDefault();
                })
    
                obj.onBefore('test', 'testAfter', function(d, name) {
                    result.push(name + '-before2');
                })
    
                obj.on('test', 'testBefore2', function(d, name) {
                    result.push(name + '-after');
                })
    
                obj.test('call');
                //最终输出第一个before回调和后置回调
                expect(result.join(',')).toBe('call-before1,call-after');
    复制代码


    更多的例子请参考smartjs上的测试用例

  • 相关阅读:
    [转] 接触C# 反射 2
    [转] C#操作Excel文件
    【Leetcode】Path Sum II
    java通用抹去魔,在边界行动,擦除补偿
    python抓取网络内容
    一个合格的程序猿编程
    Android的相关的源代码的方法
    随笔
    使用方便git命令检查记录的版本号
    opengl 扳回一球
  • 原文地址:https://www.cnblogs.com/niuchunjian/p/3777019.html
Copyright © 2011-2022 走看看