快速使用Jscex改进JavaScript异步编程体验代码

景光赫

2023-12-01

JavaScript是互联网时代编程语言的霸主，统领浏览器至今已有许多年头，而这股风潮很可能随着HTML 5的兴起而愈演愈烈。如今JavaScript更是在Node.js的帮助下进军服务器编程领域。“单线程”和“无阻塞”是JavaScript的天性，因此任何需要“耗时”的操作，例如等待、网络通信、磁盘IO都只能提供“异步”的编程接口。尽管这对服务器的伸缩性和客户端的响应能力都大有脾益，但是异步接口在使用上要比传统的线性编程困难许多，因此也诞生了如jQuery Deferred这样的辅助类库。Jscex的主要目的也是简化异步编程，但它使用了一种与传统辅助类库截然不同的方式，尽可能地将异步编程体验带领到新的高度。

JavaScript编程几乎总是伴随着异步操作，传统的异步操作会在操作完成之后，使用回调函数传回结果，而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因：我们一直习惯于“线性”地编写代码逻辑，但是大量异步操作所带来的回调函数，会把我们的算法分解地支离破碎。此时我们不能用if来实现逻辑分支，也不能用while/for/do来实现循环，更不用提异步操作之间的组合、错误处理以及取消操作pdf了。

快速入门：排序动画

我们先来看一个简单的例子。“冒泡排序”是最常见的排序算法之一，它的JavaScript实现如下：

 
    01var compare = function (x, y) { 
 
    02    return x - y; 
 
    03} 
 
    04  
 
    05var swap = function (array, i, j) { 
 
    06    var t = array[i]; 
 
    07    array[i] = array[j]; 
 
    08    array[j] = t; 
 
    09} 
 
    10  
 
    11var bubbleSort = function (array) { 
 
    12    for (var i = 0; i < array.length; i++) { 
 
    13        for (var j = 0; j < array.length - i; j++) { 
 
    14            if (compare(array[j], array[j + 1]) > 0) { 
 
    15                swap(array, j, j + 1); 
 
    16            } 
 
    17        } 
 
    18    } 
 
    19}

由于某些原因——例如教学所需，我们希望能够通过动画来直观地感受不同排序算法之间的差异。将一个排序算法改写为动画效果的“基本策略”十分简单：

在每次元素“交换”和“比较”操作时暂停一小会儿（因为它们是排序算法的主要耗时所在）。
在元素“交换”过后重绘图像。

只需增加这样两个“简单”的功能，便可以形成算法的动画效果。但实际上，实现这个策略并没有听上去那么容易。在其它许多语言或是运行环境中，我们可以使用sleep方法来暂停当前线程。这对代码的逻辑结构的影响极小。但是在JavaScript中，我们只有setTimeout可以做到“延迟”执行某个操作。setTimeout需要与回调函数配合使用，但这会严重破坏算法的逻辑结构，例如，我们再也无法使用for来实现哪怕是最最简单的循环操作了。因此，排序算法的动画似乎只能这么写：

 
    01// 异步操作签名约定： 
 
    02// function (arg1, arg2, ..., callback) { 
 
    03//     异步操作完成后使用callback回传结果 
 
    04// } 
 
    05  
 
    06var compareAsync = function (x, y, callback) { 
 
    07    // 延迟10毫秒返回结果 
 
    08    setTimeout(10, function () { 
 
    09        callback(x - y); 
 
    10    }); 
 
    11} 
 
    12  
 
    13var swapAsync = function (a, i, j, callback) { 
 
    14    // 交换元素 
 
    15    var t = a[i]; a[i] = a[j]; a[j] = t; 
 
    16    // 重绘 
 
    17    repaint(a); 
 
    18    // 延迟20毫秒才返回 
 
    19    setTimeout(20, callback); 
 
    20} 
 
    21  
 
    22// 外部循环，从下标为i的元素开始处理 
 
    23var outerLoopAsync = function (array, i, callback) { 
 
    24    // 如果i还在数组长度范围内 
 
    25    if (i < array.length) { 
 
    26        // 则进入内部循环，与下标为i的元素进行比较 
 
    27        innerLoopAsync(array, i, 0, function () { 
 
    28            // 内部循环结束以后，在外部循环中处理i的下一个元素 
 
    29            outerLoopAsync(array, i + 1, callback); 
 
    30        }); 
 
    31    } else { 
 
    32        // i超出数组长度，表示外层循环结束 
 
    33        callback(); 
 
    34    } 
 
    35} 
 
    36  
 
    37// 内部循环，从下标j开始，与下标为i的元素进行比较 
 
    38var innerLoopAsync = function (array, i, j, callback) { 
 
    39    // 如果j在合适范围内 
 
    40    if (j < array.length - i) { 
 
    41        // 则比较下标j及其相邻元素 
 
    42        compareAsync(array[j], array[j + 1], function (r) { 
 
    43            // 如果次序不对 
 
    44            if (r > 0) { 
 
    45                // 则交换及其相邻元素 
 
    46                swapAsync(array, j, j + 1, function () { 
 
    47                    // 交换之后，则重复内层循环比较下标j的下一个元a素 
 
    48                    innerLoopAsync(array, i, j + 1, callback); 
 
    49                }); 
 
    50            } else { 
 
    51                // 假如次序已经正确·，则直接重复内存循环比较下标j的下一个元a素 
 
    52                innerLoopAsync(array, i, j + 1, callback); 
 
    53            } 
 
    54        }); 
 
    55    } else { 
 
    56        // j已经超出范围，一个元素已经处于合适的位置，内层循环结束 
 
    57        callback(); 
 
    58    } 
 
    59} 
 
    60  
 
    61// 冒泡排序主方法 
 
    62var bubbleSortAsync = function (array, callback) { 
 
    63    // 从第一个元素开始执行外部循环， 
 
    64    // 外部循环结束则意味着排序完毕 
 
    65    outerLoop(array, 0, callback || function () { }); 
 
    66} 
 
    67  
 
    68// 调用 
 
    69var array = ...; // 初始化数组 
 
    70bubbleSortAsync(array);

相信您也可以看得出来，如果使用传统回调的方式来实现一个冒泡排序动画会有多么麻烦。而“支离破碎”所导致的更严重的问题，是代码“语义”方面的损失。例如，新来一位开发人员想要维护这段代码，他能够看出上面这段代码是“冒泡排序”吗？如果您给出“冒泡排序”的动画，又能轻易地将算法“说明”给别人理解吗？如果需要简单补充一些功能，又该将新代码添加在何处？使用传统线性编程的优势之一，在于容易快速编写出逻辑清晰而“内聚”的实现，即使需要补充一些功能，则可以通过局部变量将状态修改控制至极小。我们几乎可以这么说，基于回调函数的异步编程，让许多传统程序设计中总结出来的实践与模式付诸东流。

不过有了Jscex以后世界便大不一样了，它将编程体验变得“如初见般美好”：

 
    01// 异步的比较操作  
 
    02var compareAsync = eval(Jscex.compile("async", function (x, y) { 
 
    03    $await(Jscex.Async.sleep(10)); // 等待10毫秒 
 
    04    return x - y; 
 
    05})); 
 
    06  
 
    07// 异步的交换操作 
 
    08var swapAsync = eval(Jscex.compile("async", function (array, i, j) { 
 
    09    var t = array[i]; 
 
    10    array[i] = array[j]; 
 
    11    array[j] = t; 
 
    12  
 
    13    repaint(array); // 重绘 
 
    14  
 
    15    $await(Jscex.Async.sleep(20)); // 等待20毫秒 
 
    16})); 
 
    17  
 
    18// 异步的冒泡排序  
 
    19var bubbleSortAsync = eval(Jscex.compile("async", function (array) { 
 
    20    for (var i = 0; i < array.length; i++) { 
 
    21        for (var j = 0; j < array.length - i; j++) { 
 
    22            // 执行异步的比较操作 
 
    23            var r = $await(compareAsync(array[j], array[j + 1])); 
 
    24            if (r > 0) { 
 
    25                // 执行异步的交换操作 
 
    26                $await(swapAsync(array, j, j + 1)); 
 
    27            } 
 
    28        } 
 
    29    } 
 
    30})); 
 
    31  
 
    32// 调用 
 
    33var array = ...; // 初始化数组 
 
    34bubbleSortAsync(array).start();

以上这段代码几乎不用做任何解释，因为它完全便是在标准的“冒泡排序”算法之上，增加了之前所提到的“基本策略”。这便是Jscex改进异步编程体验的手段：程序员编写最自然的代码，并使用$await来执行其中的异步操作。Jscex提供的编译器（即compile方法）会将一个普通的 JavaScript函数编译为“回调函数”组织起来的异步实现，做到“线性编码，异步执行”的效果。

您可以在此观察冒泡排序的动画效果（需要IE9，Chrome，Firefox等支持Canvas的浏览器）。这张页面里还实现了选择排序和快速排序算法的动画，都是基于Jscex的优雅实现。如果您感兴趣，也可以使用传统的、基于回调的方式来编写这些算法动画，然后跟页面中的代码实现进行对比，便可以更好地了解Jscex的优势。

使用Jscex开发异步程序

Jscex可以在任何支持JavaScript（ECMAScript 3）的运行环境里执行，例如，包括IE 6在内的现代浏览器，服务器端的Node.js，以及如Rhino一样的JavaScript引擎等等，它们的区别仅仅在于“引入Jscex脚本文件”的方式不同而已。Jscex模块化十分细致，在使用时需要引入不少文件，部分原因也是由于JavaScript环境至今还缺少一个包管理机制所造成的：

lib/json2.js：由Douglas Crockfod编写的JSON生成器，对于原生不支持JSON.stringify方法的JavaScript环境（例如早期版本的IE），则需要引入该文件。
lib/uglifyjs-parser.js：UglifyJS项目（jQuery项目官方使用的压缩工具）所使用的的JavaScript解析器，这是LISP项目parse-js的 JavaScript 移植，它负责Jscex中的语法解析工作。
src/jscex.js：JIT编译器实现，负责在运行时生成代码。这也是Jscex.compile方法的具体实现所在。

以上三个文件构成了Jscex的编译器核心，它们只需在开发环境中使用（例如在页面引用它们），目的只是为了提供近乎原生JavaScript的开发体验。对于Jscex来说，它的首要原则（没有之一）便是“保证JavaScript程序员的传统开发体验”。而对于开发和生产环境都必不可少的只有以下两个文件：

src/jscex.builderBase.js：Jscex中“构造器”的公用部分。
src/jscex.async.js：Jscex的“异步构造器”，用于支持异步程序开发。

这两个文件在精简和gzip之后，只有3KB左右大小，几乎不会给应用程序带来什么影响。

如果您要编写一个Jscex异步函数，则只需要将一个普通的函数定义放到一段“架子”代码中即可：

 
    01// 普通函数 
 
    02var giveMeFive = function (arg0, arg1, ..., argN) { 
 
    03    // 实现 
 
    04    return 5; 
 
    05}; 
 
    06  
 
    07// Jscex异步函数 
 
    08var giveMeFiveAsync = eval(Jscex.compile("async", function (arg0, arg1, ..., argN) { 
 
    09    // 实现 
 
    10    return 5; 
 
    11}));

Jscex.compile方法会根据它获得的“构造器名称（即async）”和“函数对象”生成其对应的“新函数”的代码，而这段代码会立即被 eval执行。这段“架子代码”看上去略显冗余，如果您觉得输入麻烦也可以将其保存为编辑器的“代码片段（Code Snippet）”，因为它在Jscex使用过程中几乎不会有任何变化，我们也无需过于关注其含义。

“架子代码”的另一个作用是“区分”普通函数和异步函数。例如上面的代码中，giveMeFive会返回5，但giveMeFiveAsync在执行后返回的其实是一个“将会返回5”的Future对象—— 在Jscex中我们将其称为“任务”。除非我们通过start方法启动这个任务（Jscex异步函数中使用$await操作在需要时会调用start方法），则函数里的代码永远不会执行。因此，普通函数和异步函数在功能、含义和表现上都有不同，而通过“架子代码”的便能很方便地把它们区分开来。

在一个Jscex异步函数中，我们用$await操作来表示“等待任务返回结果（或出错），如果它还未执行，则同时启动这个任务”。$await的参数是一个Jscex任务对象，我们可以把任意的异步操作轻松地封装为一个Jscex任务。例如在Jscex的异步类库中就内置了 Jscex.Async.sleep函数，它封装了setTimeout函数。显然，执行任何一个Jscex异步函数，您都可以得到这样一个标准的异步任务对象。

除了在Jscex异步函数中通过$await来操作之外，我们也可以手动调用任务的start方法来启动一个任务。Jscex异步任务模型虽然简单，但它是Jscex异步编程的基石，它让“编译器”的核心功能变得小巧、简单和紧凑，许多功能以及使用模式都能在“类库”层面扩展出来。在今后的文章中，我们也会了解如何将一个异步操作封装为Jscex任务，以及围绕这个任务模型进行开发和扩展。

平易近人的编译器和eval

从我之前的经验来看，一些朋友可能会被“编译器”的字样吓到，认为Jscex是一个“重型”的解决方案。还有一些朋友在脑海里深深印有“eval很邪恶”的印象，于是同样望而却步。其实这些都是对Jscex的误解，这里我打算着重解释一下这方面的问题。

如今“编译器”其实并不是什么特别神秘的东西，事实上可能您早就在使用针对JavaScript的编译器了。例如，Google的Closure Compiler便是这样一个东西。Closure Compiler会接受一段JavaScript代码，并输出其“等价”并“精简”后的代码。Closure Compiler的作用是“减小文件体积”，而Jscex的作用便是将一个JavaScript函数转化成一个新的函数，以符合某些场景（如异步编程）的需要而已。另一方面，Jscex的转换操作也涉及代码解析，语法树的优化以及新代码的输出，因此无论从功能还是从实现角度来说，Jscex的核心都是一个标准的“编译器”。

传统的编译器往往会给开发人员在代码执行之前增加一个额外步骤（编译），这对编程体验是一种损害。JavaScript程序员往往习惯于“修改后刷新页面”便能立即看到结果，但是如某些将C#或Java语言转化为JavaScript的解决方案，往往都需要开发人员在“刷新页面”之前重新生成一遍 JavaScript代码。Jscex则不然，正如之前提到的那样，Jscex的首要原则是“尽可能保证JavaScript程序员的传统开发体验”。 Jscex编译器的一大特色，便是“在运行时生成代码”。Jscex只是JavaScript开发中所使用的类库，它几乎不会对“JavaScript编程”本身有任何改变。换句话说，开发人员编写的就是JavaScript代码，它的载体就是普通的JavaScript文件，文件加载也好，代码执行行为也罢，都和普通的JavaScript开发一样。当您修改了Jscex异步函数的实现之后，Jscex.compile方法在代码执行时自然会生成新的函数代码，因此并不会给开发人员增加任何额外负担。

Jscex.compile生成的代码会由eval执行，有朋友会认为这么做会影响性能或是安全性。但事实上，无论是eval还是 Jscex.compile，都只是为了保证开发过程中的体验（修改后立即生效）。真正在生产环境里执行的代码，是不会出现eval和 Jscex.compile的，因为Jscex还提供了一个AOT编译器（相对于在运行时生成代码的JIT编译器而言）。

AOT编译器也是一段JavaScript代码，使用Node.js执行。使用方法为：

`1`	`node scripts/jscexc.js --input input_file --output output_file`

AOT编译器会静态分析输入的脚本文件，找出其中的eval与Jscex.compile函数调用，直接将“动态编译”的结果写入eval处。例如compareAsync的原始代码：

 
    1var compareAsync = eval(Jscex.compile("async", function (x, y) { 
 
    2    $await(Jscex.Async.sleep(10));  
 
    3    return x - y; 
 
    4}));

编译后的代码便会成为如下形式，目前您无需理解这段代码的含义。Jscex对最终编译输出的代码经过精心设计，尽可能地让其保留可读性及可调式性，这点在今后的文章中也会加以说明和演示。

 
    01var compareAsync = (function (x, y) { 
 
    02    var $_b = Jscex.builders["async"]; 
 
    03    return $_b.Start(this, 
 
    04        $_b.Delay(function () { 
 
    05            return $_b.Bind(Jscex.Async.sleep(10), function () { 
 
    06                return $_b.Return(x - y); 
 
    07            }); 
 
    08        }) 
 
    09    ); 
 
    10});

转载于:https://www.cnblogs.com/aspxnets/archive/2011/08/04/2126830.html

快速使用Jscex改进JavaScript异步编程体验代码

快速入门：排序动画

使用Jscex开发异步程序

平易近人的编译器和eval

相关阅读

相关文章

相关问答

相关文档