zoukankan      html  css  js  c++  java
  • smartjs 0.2发布

    SmartJS2.0发布,更新内容如下:

    1.  新增oop(klass,factory)模块;
    2.  promiseEvent加入非阻塞模式noBlock;
    3.  trigger加入属性监听;
    4.  smartjs主模块优化,支持requirejs和seajs;
    5.  单元测试页面优化;

    先介绍一下针对AOP的优化部分:

    PromiseEvent - noBlock 非阻塞回调模式

    在前面0.1版中介绍了PromiseEvent这个对象,类似于JQuery的Callbacks,但是加入了Promise,Event参数管理,优先级控制等功能。

    在正常情况下执行fire方法会根据优先级依次去执行各个回调。但在回调中存在多个promise,那么整个PromiseEvent执行的效率就会很低;

    举个例子:

    有三个回调事件event1,event2,event3. 每个都是异步而且需要1s才能执行完毕。那么使用正常的promise来处理,整个执行就需要3s+;

    如果三个回调是有关联关系的话,这样则是必须的。但如果是彼此没关系,那么等待所需的时间就没必要。

    那么使用noBlock模式,每个回调在返回promise的时候,就会执行下一个,而不需要等到resolve时。那么执行上述三个回调的时间则只需1s+;

    代码示例

    整体noBlock模式

    //创建一个noBlock模式的promiseEvents;
                var noBlockCalls = st.promiseEvent("noBlock");
    
                //第一个回调延迟100
                noBlockCalls.add("c1", function(d) {
                    setTimeout(function() {
                        result.push('c1');
                        d.resolve();
                    }, 100);
                    return d.promise();
                });
    
                //第二个正常执行
                noBlockCalls.add("c2", function(d) {
                    result.push('c2');
                });
    
                //第三个回调延迟50
                noBlockCalls.add("c3", function(d) {
                    setTimeout(function() {
                        result.push('c3');
                        d.resolve();
                    }, 50);
                    return d.promise();
                });
    
                $.when(noBlockCalls.fire()).done(function(data) {
                    //最终执行顺序是c2-c3-c1
                    expect(result + '').toBe('c2,c3,c1');
                    testCall();
                });


    单个回调事件noBlock模式

    var noBlockCalls2 = st.promiseEvent();
                //第一个回调延迟100
                noBlockCalls2.add("c1", function(d) {
                    setTimeout(function() {
                        result.push('c1');
                        d.resolve();
                    }, 100);
                    //在返回promise的时候,指定noBlock模式
                    return d.promise("noBlock");
                });
                //第二个正常执行
                noBlockCalls2.add("c2", function(d) {
                    result.push('c2');
                });
                //第三个回调延迟100
                noBlockCalls2.add("c3", function(d) {
                    setTimeout(function() {
                        result.push('c3');
                        d.resolve();
                    }, 100);
                    return d.promise();
                });
    
                $.when(noBlockCalls2.fire()).done(function(data) {
                    //最终执行顺序是c2-c1-c3
                    expect(result + '').toBe('c2,c1,c3');
                    testCall();
                });
            })

    Trigger的属性监听(需IE9+支持)

    0.1中的trigger只支持方法的注入。0.2版中加入了对于属性的监听功能。

    属性监听只有before,after两种方法注入类型,不支持round环绕模式。

    before:主要使用在做值变化的控制,比如是否需要更新,或者改变更新的值等等。

    after:在after则是无法干预值的变化,因此只是做监听使用;

    代码示例

    基础使用

          var obj = st.attachTrigger({
                    test: 1
                });
                //回调方法中有三个参数,事件参数e;更新的值value;原来的值oldValue
                obj.onBefore('test', 'testBefore', function(e, value,oldValue) {
                    result.push(value + '-before-' + oldValue);
                })
    
                obj.on('test', 'testAfter', function(e, value,oldValue) {
                    result.push(value + '-after-' + oldValue);
                })
    
    
                expect(obj.test).toBe(1);
    
                obj.test = 2;
                //输出前后置监听
                expect(result.join(',')).toBe('2-before-1,2-after-1');
                expect(obj.test).toBe(2);


    阻止更新方法

    var obj = st.attachTrigger({
                    test: 1
                });
    
                obj.onBefore('test', 'testBefore', function(d, value) {
                    result.push(value + '-before');
                    //停止方法,阻止赋值行为
                    d.stop();
                })
    
                obj.on('test', 'testAfter', function(d, value) {
                    result.push(value + '-after');
                })
    
                obj.test = 2;
                //最终更新失败,输出前置的监听内容
                expect(result.join(',')).toBe('2-before');
                expect(obj.test).toBe(1);


    更新值变更和值传递例子

    var obj = st.attachTrigger({
                    test: 1
                });
    
                //改变传递值只有在前置中有效
                obj.onBefore('test', 'testBefore', function(d, value,oldValue) {
                    result.push('before:[' + value + ',' + oldValue + ',' + d.result +']');
                    return ++value;
                })
    
                obj.onBefore('test', 'testBefore2', function(d, value,oldValue) {
                    result.push('before2:[' + value + ',' + oldValue + ',' + d.result +']');
                    return ++d.result;
                })
    
                //后置得到前面正确修改的值
                obj.on('test', 'testAfter', function(d, value,oldValue) {
                    result.push('after:[' + value + ',' + oldValue + ',' + d.result +']');
                })
    
                obj.test = 2;
    
                expect(result.join(',')).toBe('before:[2,1,undefined],before2:[2,1,3],after:[4,1,4]');
                expect(obj.test).toBe(4);


    aop的更新内容介绍到这,下一篇介绍oop

    SmartJS的GitHub地址

  • 相关阅读:
    HTML与css语法笔记
    HTML标记含义
    HTML-入门篇day01
    计算器
    九宫格
    5.28第十三周
    5.21 不用交得作业及答案
    5.22 上交作业
    5.15作业
    5.7作业
  • 原文地址:https://www.cnblogs.com/zhh8077/p/3788401.html
Copyright © 2011-2022 走看看