海水正蓝

面朝大海,春暖花开
posts - 145, comments - 29, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
随笔- 50  文章- 0  评论- 180 

一种模仿线程的Javascript异步模型设计&实现

jQuery中所支持的异步模型为:

  • Callbacks,回调函数列队。
  • Deferred,延迟执行对象。
  • Promise,是Deferred只暴露非状态改变方法的对象。

这些模型都很漂亮,但我想要一种更帅气的异步模型。

 

Thread?

我们知道链式操作是可以很好的表征运行顺序的(可以参考我的文章《jQuery链式操作》),然而通常基于回调函数或者基于事件监听的异步模型中,代码的执行顺序不清晰。

Callbacks模型实际上类似一个自定义事件的回调函数队列,当触发该事件(调用Callbacks.fire())时,则回调队列中的所有回调函数。

Deferred是个延迟执行对象,可以注册Deferred成功、失败或进行中状态的回调函数,然后通过触发相应的事件来回调函数。

这两种异步模型都类似于事件监听异步模型,实质上顺序依然是分离的。

当然Promise看似能提供我需要的东西,比如Promise.then().then().then()。但是,Promise虽然成功用链式操作明确了异步编程的顺序执行,但是没有循环,成功和失败分支是通过内部代码确定的。

个人认为,Promise是为了规范化后端nodejs中I/O操作异步模型的,因为I/O状态只有成功和失败两种状态,所以他是非常成功的。

但在前端,要么只有成功根本没有失败,要么不止只有两种状态,不应当固定只提供三种状态的方案,我觉得应该提供可表征多状态的异步方案。

这个大家可以在something more看到。

我想要一种类似于线程的模型,我们在这里称为Thread,也就是他能顺序执行、也能循环执行、当然还有分支执行。

 

顺序执行

线程的顺序执行流程,也就是类似于:

do1(); do2(); do3();

这样就是依次执行do1,do2,do3。因为这是异步模型,所以我们希望能添加wait方法,即类似于:

do1(); wait(1000);    //等待1000ms 
do2(); wait(1000);    //等待1000ms 
do3(); wait(1000);    //等待1000ms

不使用编译方法的话,使用链式操作来表征顺序,则实现后的样子应当是这样的:

1 Thread().    //获取线程
2 then(do1).    //然后执行do1
3 wait(1000).    //等待1000ms
4 then(do2).    //然后执行do2
5 wait(1000).    //等待1000ms
6 then(do3).    //然后执行do3
7 wait(1000);    //等待1000ms

 

循环执行

循环这很好理解,比如for循环:

1 for(; true;){
2     dosomething();
3     wait(1000);
4 }

进行无限次循环执行do,并且每次都延迟1000ms。则其链式表达应当是这样的:

1 Thread().    //获取线程
2 loop(-1).    //循环开始,正数则表示循环正数次,负数则表示循环无限次
3     then(dosomething).    //然后执行do
4     wait(1000).    //等待1000ms
5 loopEnd();    //循环结束

这个可以参考后面的例子。 

 

分支执行

分支也就是if...else,比如:

1 if(true){
2     doSccess();
3 }else{
4     doFail();
5 }
6 
7 

那么其链式实现应当是:

 

1 Thread().    //获得线程
2 right(true).    //如果表达式正确
3     then(doSccess).    //执行doSccess
4 left().    //否则
5     then(doFail).    //执行doFail
6 leftEnd().    //left分支结束
7 rightEnd();    //right分支结束

声明变量

声明变量也就是:

var a = "hello world!";

可被其它函数使用。那么我们的实现是:

 

1 Thread().    //得到线程
2 define("hello world!").    //将回调函数第一个参数设为hello world!
3 then(function(a){alert(a);});    //获取变量a,alert出来

顺序执行实现方案

Thread实际上是一个打包函数Fn队列。

所谓打包函数就是将回调函数打包后产生的新的函数,举个例子:

1 function package(callback){
2     return function(){
3         callback();
4         // 干其他事情
5     }
6 }

这样我们就将callback函数打包起来了。

Thread提供一个fire方法来触发线程取出一个打包函数然后执行,打包函数执行以后回调Thread的fire方法。

那么我们就可以顺序执行函数了。

现在只要打包的时候设置setTimeout执行,则这个线程就能实现wait方法了。

 

循环执行实现方案

循环Loop是一个Thread的变形,只不过在执行里面的打包函数的时候使用另外一种方案,通过添加一个指针取出,执行完后触发Loop继续,移动指针取出下一个打包函数。

 

分支执行实现方案

分支Right和Left也是Thread的一种变形,开启分支的时候,主Thread会创建两个分支Right线程和Left线程,打包一个触发分支Thread的函数推入队列,然后当执行到该函数的时候判断触发哪个分支执行。

其中一个队列执行结束后回调主Thread,通知进行下一步。 

 

例子

由于该方案和wind-asycn非常相似,所以我们拿wind.js中的clock例子进行改造看看其中的差别吧。

wind.js中的例子:

  

我的例子:

  

Something more?

  • 将事件当成分支处理

我们提供了on方法将事件转成分支来执行。

举个例子页面有个按钮“点我”,但是我们希望打开页面5秒内单击没有效,5秒后显示“请点击按钮”后,单击才会出现“你成功点击了”。

使用on分支是这样的:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3 <head>
 4     <title>on - asThread.js Sample</title>
 5     <meta http-equiv="X-UA-Compatible" content="IE=9" />    
 6     <script src="asThread.js"></script>
 7 </head>
 8 <body>
 9     <button id = "b">点我</button>
10     <script>
11         var ele = document.getElementById("b");
12     
13         Thread().    // 获得线程
14         then(function(){alert("请点击按钮")}, 5000).    //然后等5秒显示"请点击按钮"
15         on(ele, "click").    // 事件分支On开始,如果ele触发了click事件
16             then(function(){alert("你成功点击了")}).    //那么执行你成功点击了
17         onEnd().    // 事件分支On结束
18         then(function(){alert("都说可以的了")}).    // 然后弹出"都说可以的了"
19         run();    //启动线程
20     </script>
21 </body>
22 </html>

自定义事件也可以哦,只要在.on时候传进去注册监听函数,和删除监听函数就行了。比如:

 1 function addEvent(__elem, __type, __handler){
 2     //添加监听
 3 }
 4 
 5 function removeEvent(__elem, __type, __handler){
 6     //删除监听
 7 }
 8 
 9 Thread().
10 on(ele, "success", addEvent, removeEvent).
11     then(function(){alert("成功!")}).
12 onEnd().
13 run();

当然实际上我们还可以注册多个事件分支。事件分支是并列的,也就是平级的事件分支没有现有顺序,所以我们能这样:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3 <head>
 4     <title>on - asThread.js Sample</title>
 5     <meta http-equiv="X-UA-Compatible" content="IE=9" />    
 6     <script src="asThread.js"></script>
 7 </head>
 8 <body>
 9     <button id = "b">点我</button>
10     <button id = "c">点我</button>
11     <script>
12         var ele0 = document.getElementById("b"),
13               ele1 = document.getElementById("c");
14     
15         Thread().    // 获得线程
16         then(function(){alert("请点击按钮")}, 5000).    //然后等5秒显示"请点击按钮"
17         on(ele0, "click").    // 事件分支On开始,如果ele0触发了click事件
18             then(function(){alert("你成功点击了")}).    //那么执行你成功点击了
19         onEnd().    // 事件分支On结束
20         on(ele1, "click").    // 事件分支On开始,如果ele1触发了click事件
21             then(function(){alert("你成功点击了")}).    //那么执行你成功点击了
22         onEnd().    // 事件分支On结束
23         then(function(){alert("都说可以的了")}).    // 然后弹出"都说可以的了"
24         run();    //启动线程
25     </script>
26 </body>
27 </html>
  • 开辟多个线程

一个线程不够用?只要输入名字就能开辟或者得到线程了。

系统会自动初始化一个主线程,当不传参数时就直接返回主线程:

Thread() //得到主线程

但如果主线程正在用想开辟一个线程时,只要给个名字就行,比如:

Thread("hello")    //得到名字是hello的线程

那么下次再想用该线程时只要输入相同的名字就行了:

Thread("hello")    //得到hello线程

默认只最多只提供10个线程,所以用完记得删掉:

Thread("hello").del();
  • setImmediate

IE10已经提供了setImmediate方法,而其他现代浏览器也可以模拟该方法,其原理是推倒线程末端,使得浏览器画面能渲染,得到比setTimeout(0)更快的响应。

我们通过接口.imm来提供这一功能。比如:

Thread(). imm(function(){alert("hello world")}). run();

这方法和.then(fn)不太一样,.then(fn)是可能阻塞当前浏览器线程的,但.imm(fn)是将处理推到浏览器引擎列队末端,排到队了在运行。

所以如果你使用多个Thread(伪多线程),而又希望确保线程是并行运行的,那么请使用.imm来替代.then。

当然对于老版IE,只能用setTimeout(0)替代了。

  • 分支参数可以是函数

分支Right传的参数如果只是布尔值肯定很不爽,因为这意味着分支是静态的,在初始化时候就决定了,但我们希望分支能在执行到的时候再判断是走 Right还是Left,所以我们提供了传参可以是函数(但是函数返回值需要是布尔值,否则……╮(╯▽╰)╭也会转成布尔值的……哈哈)。比如:

 1 fucntion foo(boolean){
 2     return !boolean;
 3 }
 4 
 5 Thread().
 6 define(true).
 7 right(foo).
 8     then(function(){/*这里不会运行到*/}).
 9 rightEnd().
10 run();

Enjoy yourself!!

 

项目地址

https://github.com/miniflycn/asThread

原问出自:
http://www.cnblogs.com/justany/archive/2013/01/25/2874602.html

只有注册用户登录后才能发表评论。


网站导航: