惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 三生石上(FineUI控件)
Hugging Face - Blog
Hugging Face - Blog
M
MIT News - Artificial intelligence
T
Tailwind CSS Blog
Webroot Blog
Webroot Blog
S
Secure Thoughts
N
News and Events Feed by Topic
月光博客
月光博客
TaoSecurity Blog
TaoSecurity Blog
Microsoft Azure Blog
Microsoft Azure Blog
B
Blog RSS Feed
N
News | PayPal Newsroom
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
小众软件
小众软件
Recent Commits to openclaw:main
Recent Commits to openclaw:main
P
Privacy & Cybersecurity Law Blog
GbyAI
GbyAI
K
Kaspersky official blog
WordPress大学
WordPress大学
P
Proofpoint News Feed
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 叶小钗
W
WeLiveSecurity
Jina AI
Jina AI
The Cloudflare Blog
Project Zero
Project Zero
Simon Willison's Weblog
Simon Willison's Weblog
V
Vulnerabilities – Threatpost
L
LangChain Blog
Forbes - Security
Forbes - Security
PCI Perspectives
PCI Perspectives
Engineering at Meta
Engineering at Meta
Google DeepMind News
Google DeepMind News
Recorded Future
Recorded Future
博客园 - 【当耐特】
H
Heimdal Security Blog
A
About on SuperTechFans
Cisco Talos Blog
Cisco Talos Blog
T
Threat Research - Cisco Blogs
云风的 BLOG
云风的 BLOG
Spread Privacy
Spread Privacy
L
LINUX DO - 最新话题
L
Lohrmann on Cybersecurity
Last Week in AI
Last Week in AI
Google DeepMind News
Google DeepMind News
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
I
Intezer
Martin Fowler
Martin Fowler
S
Securelist
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint

博客园 - Roy Zhang

让文档和Demo生成更加简单和强大 - SmartDoc 0.1.1 说明 SmartDoc(YUIDoc) 注释编写 JS文档和Demo自动化生成工具 - SmartDoc发布 smartjs - DataManager 场景示例分析 - 数据懒加载 smartjs - DataManager API smartjs 0.3 DataManager 发布&介绍 SmartJS 系列规划分享和背景介绍 smartjs 0.2 OOP讲解 - factory smartjs 0.2 OOP讲解 - Klass 类继承 smartJS 0.1 API 讲解 - FlowController smartJS 0.1 API 讲解 - Trigger smartJS 0.1 API 讲解 - PromiseEvent SmartJS 第一期(0.1)发布 - AOP三剑客 SmartUI2.0后续声明 JQuery SmartUI 2.0 方案启动 JQuery Smart UI 开发规范&API文档发布 JQuery Smart UI与Moss结合演示 JQuery Smart UI 快捷开发实例应用(二)— 开发模式【从项目开发流程说起】 告别aspx,高性能快捷开发 — JQuery Smart UI 快捷开发实例应用(一)入门【后篇】
smartjs 0.2发布 - 新增oop模块&AOP增强
Roy Zhang · 2014-06-14 · via 博客园 - Roy Zhang

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