smartjs 0.2發佈 - 新增oop模塊&AOP加強

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地址