JavaScript中怎么利用Jscex改善異步編程體驗(yàn)

JavaScript中怎么利用Jscex改善異步編程體驗(yàn)，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

JavaScript是互聯(lián)網(wǎng)時(shí)代編程語言的霸主，統(tǒng)領(lǐng)瀏覽器至今已有許多年頭，而這股風(fēng)潮很可能隨著HTML 5的興起而愈演愈烈。如今JavaScript更是在Node.js的幫助下進(jìn)軍服務(wù)器編程領(lǐng)域?！皢尉€程”和“無阻塞”是JavaScript的天性，因此任何需要“耗時(shí)”的操作，例如等待、網(wǎng)絡(luò)通信、磁盤IO都只能提供“異步”的編程接口。盡管這對服務(wù)器的伸縮性和客戶端的響應(yīng)能力都大有脾益，但是異步接口在使用上要比傳統(tǒng)的線性編程困難許多，因此也誕生了如jQuery Deferred這樣的輔助類庫。Jscex的主要目的也是簡化異步編程，但它使用了一種與傳統(tǒng)輔助類庫截然不同的方式，盡可能地將異步編程體驗(yàn)帶領(lǐng)到新的高度。

開放平臺(tái)之實(shí)踐——來自百度、360、騰訊、盛大的案例分享JavaScript編程幾乎總是伴隨著異步操作，傳統(tǒng)的異步操作會(huì)在操作完成之后，使用回調(diào)函數(shù)傳回結(jié)果，而回調(diào)函數(shù)中則包含了后續(xù)的工作。這也是造成異步編程困難的主要原因：我們一直習(xí)慣于“線性”地編寫代碼邏輯，但是大量異步操作所帶來的回調(diào)函數(shù)，會(huì)把我們的算法分解地支離破碎。此時(shí)我們不能用if來實(shí)現(xiàn)邏輯分支，也不能用while/for/do來實(shí)現(xiàn)循環(huán)，更不用提異步操作之間的組合、錯(cuò)誤處理以及取消操作了。

快速入門：排序動(dòng)畫

我們先來看一個(gè)簡單的例子。“冒泡排序”是最常見的排序算法之一，它的JavaScript實(shí)現(xiàn)如下：

var compare = function (x, y) {      return x - y;  }   var swap = function (array, i, j) {      var t = array[i];      array[i] = array[j];      array[j] = t;  }   var bubbleSort = function (array) {      for (var i = 0; i < array.length; i++) {          for (var j = 0; j < array.length - i; j++) {              if (compare(array[j], array[j + 1]) > 0) {                  swap(array, j, j + 1);              }          }      }  }

由于某些原因——例如教學(xué)所需，我們希望能夠通過動(dòng)畫來直觀地感受不同排序算法之間的差異。將一個(gè)排序算法改寫為動(dòng)畫效果的“基本策略”十分簡單：

◆ 在每次元素“交換”和“比較”操作時(shí)暫停一小會(huì)兒(因?yàn)樗鼈兪桥判蛩惴ǖ闹饕臅r(shí)所在)。

◆ 在元素“交換”過后重繪圖像。

只需增加這樣兩個(gè)“簡單”的功能，便可以形成算法的動(dòng)畫效果。但實(shí)際上，實(shí)現(xiàn)這個(gè)策略并沒有聽上去那么容易。在其它許多語言或是運(yùn)行環(huán)境中，我們可以使用sleep方法來暫停當(dāng)前線程。這對代碼的邏輯結(jié)構(gòu)的影響極小。但是在JavaScript中，我們只有setTimeout可以做到“延遲”執(zhí)行某個(gè)操作。setTimeout需要與回調(diào)函數(shù)配合使用，但這會(huì)嚴(yán)重破壞算法的邏輯結(jié)構(gòu)，例如，我們再也無法使用for來實(shí)現(xiàn)哪怕是最最簡單的循環(huán)操作了。因此，排序算法的動(dòng)畫似乎只能這么寫：

// 異步操作簽名約定：  // function (arg1, arg2, ..., callback) {  //     異步操作完成后使用callback回傳結(jié)果  // }   var compareAsync = function (x, y, callback) {      // 延遲10毫秒返回結(jié)果      setTimeout(10, function () {          callback(x - y);      });  }   var swapAsync = function (a, i, j, callback) {      // 交換元素      var t = a[i]; a[i] = a[j]; a[j] = t;      // 重繪      repaint(a);      // 延遲20毫秒才返回      setTimeout(20, callback);  }   // 外部循環(huán)，從下標(biāo)為i的元素開始處理  var outerLoopAsync = function (array, i, callback) {      // 如果i還在數(shù)組長度范圍內(nèi)      if (i < array.length) {          // 則進(jìn)入內(nèi)部循環(huán)，與下標(biāo)為i的元素進(jìn)行比較          innerLoopAsync(array, i, 0, function () {              // 內(nèi)部循環(huán)結(jié)束以后，在外部循環(huán)中處理i的下一個(gè)元素              outerLoopAsync(array, i + 1, callback);          });      } else {          // i超出數(shù)組長度，表示外層循環(huán)結(jié)束          callback();      }  }   // 內(nèi)部循環(huán)，從下標(biāo)j開始，與下標(biāo)為i的元素進(jìn)行比較  var innerLoopAsync = function (array, i, j, callback) {      // 如果j在合適范圍內(nèi)      if (j < array.length - i) {          // 則比較下標(biāo)j及其相鄰元素          compareAsync(array[j], array[j + 1], function (r) {              // 如果次序不對              if (r > 0) {                  // 則交換及其相鄰元素                  swapAsync(array, j, j + 1, function () {                      // 交換之后，則重復(fù)內(nèi)層循環(huán)比較下標(biāo)j的下一個(gè)元a素                      innerLoopAsync(array, i, j + 1, callback);                  });              } else {                  // 假如次序已經(jīng)正確·，則直接重復(fù)內(nèi)存循環(huán)比較下標(biāo)j的下一個(gè)元a素                  innerLoopAsync(array, i, j + 1, callback);              }          });      } else {          // j已經(jīng)超出范圍，一個(gè)元素已經(jīng)處于合適的位置，內(nèi)層循環(huán)結(jié)束          callback();      }  }   // 冒泡排序主方法  var bubbleSortAsync = function (array, callback) {      // 從***個(gè)元素開始執(zhí)行外部循環(huán)，      // 外部循環(huán)結(jié)束則意味著排序完畢      outerLoop(array, 0, callback || function () { });  }   // 調(diào)用  var array = ...; // 初始化數(shù)組  bubbleSortAsync(array);

相信您也可以看得出來，如果使用傳統(tǒng)回調(diào)的方式來實(shí)現(xiàn)一個(gè)冒泡排序動(dòng)畫會(huì)有多么麻煩。而“支離破碎”所導(dǎo)致的更嚴(yán)重的問題，是代碼“語義”方面的損失。例如，新來一位開發(fā)人員想要維護(hù)這段代碼，他能夠看出上面這段代碼是“冒泡排序”嗎?如果您給出“冒泡排序”的動(dòng)畫，又能輕易地將算法“說明”給別人理解嗎?如果需要簡單補(bǔ)充一些功能，又該將新代碼添加在何處?使用傳統(tǒng)線性編程的優(yōu)勢之一，在于容易快速編寫出邏輯清晰而“內(nèi)聚”的實(shí)現(xiàn)，即使需要補(bǔ)充一些功能，則可以通過局部變量將狀態(tài)修改控制至極小。我們幾乎可以這么說，基于回調(diào)函數(shù)的異步編程，讓許多傳統(tǒng)程序設(shè)計(jì)中總結(jié)出來的實(shí)踐與模式付諸東流。

不過有了Jscex以后世界便大不一樣了，它將編程體驗(yàn)變得“如初見般美好”：

// 異步的比較操作   var compareAsync = eval(Jscex.compile("async", function (x, y) {      $await(Jscex.Async.sleep(10)); // 等待10毫秒      return x - y;  }));   // 異步的交換操作  var swapAsync = eval(Jscex.compile("async", function (array, i, j) {      var t = array[i];      array[i] = array[j];      array[j] = t;       repaint(array); // 重繪       $await(Jscex.Async.sleep(20)); // 等待20毫秒  }));   // 異步的冒泡排序   var bubbleSortAsync = eval(Jscex.compile("async", function (array) {      for (var i = 0; i < array.length; i++) {          for (var j = 0; j < array.length - i; j++) {              // 執(zhí)行異步的比較操作              var r = $await(compareAsync(array[j], array[j + 1]));              if (r > 0) {                  // 執(zhí)行異步的交換操作                  $await(swapAsync(array, j, j + 1));              }          }      }  }));   // 調(diào)用  var array = ...; // 初始化數(shù)組  bubbleSortAsync(array).start();

以上這段代碼幾乎不用做任何解釋，因?yàn)樗耆闶窃跇?biāo)準(zhǔn)的“冒泡排序”算法之上，增加了之前所提到的“基本策略”。這便是Jscex改進(jìn)異步編程體驗(yàn)的手段：程序員編寫最自然的代碼，并使用$await來執(zhí)行其中的異步操作。Jscex提供的編譯器(即compile方法)會(huì)將一個(gè)普通的JavaScript函數(shù)編譯為“回調(diào)函數(shù)”組織起來的異步實(shí)現(xiàn)，做到“線性編碼，異步執(zhí)行”的效果。

您可以在此觀察冒泡排序的動(dòng)畫效果(需要IE9，Chrome，F(xiàn)irefox等支持Canvas的瀏覽器)。這張頁面里還實(shí)現(xiàn)了選擇排序和快速排序算法的動(dòng)畫，都是基于Jscex的優(yōu)雅實(shí)現(xiàn)。如果您感興趣，也可以使用傳統(tǒng)的、基于回調(diào)的方式來編寫這些算法動(dòng)畫，然后跟頁面中的代碼實(shí)現(xiàn)進(jìn)行對比，便可以更好地了解Jscex的優(yōu)勢。

使用Jscex開發(fā)異步程序

Jscex可以在任何支持JavaScript(ECMAScript 3)的運(yùn)行環(huán)境里執(zhí)行，例如，包括IE 6在內(nèi)的現(xiàn)代瀏覽器，服務(wù)器端的Node.js，以及如Rhino一樣的JavaScript引擎等等，它們的區(qū)別僅僅在于“引入Jscex腳本文件”的方式不同而已。Jscex模塊化十分細(xì)致，在使用時(shí)需要引入不少文件，部分原因也是由于JavaScript環(huán)境至今還缺少一個(gè)包管理機(jī)制所造成的：

◆ lib/json2.js：由Douglas Crockfod編寫的JSON生成器，對于原生不支持JSON.stringify方法的JavaScript環(huán)境(例如早期版本的IE)，則需要引入該文件。

◆ lib/uglifyjs-parser.js：UglifyJS項(xiàng)目(jQuery項(xiàng)目官方使用的壓縮工具)所使用的的JavaScript解析器，這是LISP項(xiàng)目parse-js的 JavaScript 移植，它負(fù)責(zé)Jscex中的語法解析工作。

◆ src/jscex.js：JIT編譯器實(shí)現(xiàn)，負(fù)責(zé)在運(yùn)行時(shí)生成代碼。這也是Jscex.compile方法的具體實(shí)現(xiàn)所在。

以上三個(gè)文件構(gòu)成了Jscex的編譯器核心，它們只需在開發(fā)環(huán)境中使用(例如在頁面引用它們)，目的只是為了提供近乎原生JavaScript的開發(fā)體驗(yàn)。對于Jscex來說，它的首要原則(沒有之一)便是“保證JavaScript程序員的傳統(tǒng)開發(fā)體驗(yàn)”。而對于開發(fā)和生產(chǎn)環(huán)境都必不可少的只有以下兩個(gè)文件：

◆ src/jscex.builderBase.js：Jscex中“構(gòu)造器”的公用部分。

◆ src/jscex.async.js：Jscex的“異步構(gòu)造器”，用于支持異步程序開發(fā)。

這兩個(gè)文件在精簡和gzip之后，只有3KB左右大小，幾乎不會(huì)給應(yīng)用程序帶來什么影響。

如果您要編寫一個(gè)Jscex異步函數(shù)，則只需要將一個(gè)普通的函數(shù)定義放到一段“架子”代碼中即可：

// 普通函數(shù)  var giveMeFive = function (arg0, arg1, ..., argN) {      // 實(shí)現(xiàn)      return 5;  };   // Jscex異步函數(shù)  var giveMeFiveAsync = eval(Jscex.compile("async", function (arg0, arg1, ..., argN) {      // 實(shí)現(xiàn)      return 5;  }));

Jscex.compile方法會(huì)根據(jù)它獲得的“構(gòu)造器名稱(即async)”和“函數(shù)對象”生成其對應(yīng)的“新函數(shù)”的代碼，而這段代碼會(huì)立即被eval執(zhí)行。這段“架子代碼”看上去略顯冗余，如果您覺得輸入麻煩也可以將其保存為編輯器的“代碼片段(Code Snippet)”，因?yàn)樗贘scex使用過程中幾乎不會(huì)有任何變化，我們也無需過于關(guān)注其含義。

“架子代碼”的另一個(gè)作用是“區(qū)分”普通函數(shù)和異步函數(shù)。例如上面的代碼中，giveMeFive會(huì)返回5，但giveMeFiveAsync在執(zhí)行后返回的其實(shí)是一個(gè)“將會(huì)返回5”的Future對象——在Jscex中我們將其稱為“任務(wù)”。除非我們通過start方法啟動(dòng)這個(gè)任務(wù)(Jscex異步函數(shù)中使用$await操作在需要時(shí)會(huì)調(diào)用start方法)，則函數(shù)里的代碼永遠(yuǎn)不會(huì)執(zhí)行。因此，普通函數(shù)和異步函數(shù)在功能、含義和表現(xiàn)上都有不同，而通過“架子代碼”的便能很方便地把它們區(qū)分開來。

在一個(gè)Jscex異步函數(shù)中，我們用$await操作來表示“等待任務(wù)返回結(jié)果(或出錯(cuò))，如果它還未執(zhí)行，則同時(shí)啟動(dòng)這個(gè)任務(wù)”。$await的參數(shù)是一個(gè)Jscex任務(wù)對象，我們可以把任意的異步操作輕松地封裝為一個(gè)Jscex任務(wù)。例如在Jscex的異步類庫中就內(nèi)置了Jscex.Async.sleep函數(shù)，它封裝了setTimeout函數(shù)。顯然，執(zhí)行任何一個(gè)Jscex異步函數(shù)，您都可以得到這樣一個(gè)標(biāo)準(zhǔn)的異步任務(wù)對象。

除了在Jscex異步函數(shù)中通過$await來操作之外，我們也可以手動(dòng)調(diào)用任務(wù)的start方法來啟動(dòng)一個(gè)任務(wù)。Jscex異步任務(wù)模型雖然簡單，但它是Jscex異步編程的基石，它讓“編譯器”的核心功能變得小巧、簡單和緊湊，許多功能以及使用模式都能在“類庫”層面擴(kuò)展出來。在今后的文章中，我們也會(huì)了解如何將一個(gè)異步操作封裝為Jscex任務(wù)，以及圍繞這個(gè)任務(wù)模型進(jìn)行開發(fā)和擴(kuò)展。

平易近人的編譯器和eval

從我之前的經(jīng)驗(yàn)來看，一些朋友可能會(huì)被“編譯器”的字樣嚇到，認(rèn)為Jscex是一個(gè)“重型”的解決方案。還有一些朋友在腦海里深深印有“eval很邪惡”的印象，于是同樣望而卻步。其實(shí)這些都是對Jscex的誤解，這里我打算著重解釋一下這方面的問題。

如今“編譯器”其實(shí)并不是什么特別神秘的東西，事實(shí)上可能您早就在使用針對JavaScript的編譯器了。例如，Google的Closure Compiler便是這樣一個(gè)東西。Closure Compiler會(huì)接受一段JavaScript代碼，并輸出其“等價(jià)”并“精簡”后的代碼。Closure Compiler的作用是“減小文件體積”，而Jscex的作用便是將一個(gè)JavaScript函數(shù)轉(zhuǎn)化成一個(gè)新的函數(shù)，以符合某些場景(如異步編程)的需要而已。另一方面，Jscex的轉(zhuǎn)換操作也涉及代碼解析，語法樹的優(yōu)化以及新代碼的輸出，因此無論從功能還是從實(shí)現(xiàn)角度來說，Jscex的核心都是一個(gè)標(biāo)準(zhǔn)的“編譯器”。

傳統(tǒng)的編譯器往往會(huì)給開發(fā)人員在代碼執(zhí)行之前增加一個(gè)額外步驟(編譯)，這對編程體驗(yàn)是一種損害。JavaScript程序員往往習(xí)慣于“修改后刷新頁面”便能立即看到結(jié)果，但是如某些將C#或Java語言轉(zhuǎn)化為JavaScript的解決方案，往往都需要開發(fā)人員在“刷新頁面”之前重新生成一遍JavaScript代碼。Jscex則不然，正如之前提到的那樣，Jscex的首要原則是“盡可能保證JavaScript程序員的傳統(tǒng)開發(fā)體驗(yàn)”。Jscex編譯器的一大特色，便是“在運(yùn)行時(shí)生成代碼”。Jscex只是JavaScript開發(fā)中所使用的類庫，它幾乎不會(huì)對“JavaScript編程”本身有任何改變。換句話說，開發(fā)人員編寫的就是JavaScript代碼，它的載體就是普通的JavaScript文件，文件加載也好，代碼執(zhí)行行為也罷，都和普通的JavaScript開發(fā)一樣。當(dāng)您修改了Jscex異步函數(shù)的實(shí)現(xiàn)之后，Jscex.compile方法在代碼執(zhí)行時(shí)自然會(huì)生成新的函數(shù)代碼，因此并不會(huì)給開發(fā)人員增加任何額外負(fù)擔(dān)。

Jscex.compile生成的代碼會(huì)由eval執(zhí)行，有朋友會(huì)認(rèn)為這么做會(huì)影響性能或是安全性。但事實(shí)上，無論是eval還是Jscex.compile，都只是為了保證開發(fā)過程中的體驗(yàn)(修改后立即生效)。真正在生產(chǎn)環(huán)境里執(zhí)行的代碼，是不會(huì)出現(xiàn)eval和Jscex.compile的，因?yàn)镴scex還提供了一個(gè)AOT編譯器(相對于在運(yùn)行時(shí)生成代碼的JIT編譯器而言)。

AOT編譯器也是一段JavaScript代碼，使用Node.js執(zhí)行。使用方法為：

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

AOT編譯器會(huì)靜態(tài)分析輸入的腳本文件，找出其中的eval與Jscex.compile函數(shù)調(diào)用，直接將“動(dòng)態(tài)編譯”的結(jié)果寫入eval處。例如compareAsync的原始代碼：

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

編譯后的代碼便會(huì)成為如下形式，目前您無需理解這段代碼的含義。Jscex對最終編譯輸出的代碼經(jīng)過精心設(shè)計(jì)，盡可能地讓其保留可讀性及可調(diào)式性，這點(diǎn)在今后的文章中也會(huì)加以說明和演示。

var compareAsync = (function (x, y) {      var $_b = Jscex.builders["async"];      return $_b.Start(this,          $_b.Delay(function () {              return $_b.Bind(Jscex.Async.sleep(10), function () {                  return $_b.Return(x - y);              });          })      );  });

原始代碼在經(jīng)過AOT編譯之后，不僅在運(yùn)行性能方面有所提高(節(jié)省了編譯和動(dòng)態(tài)執(zhí)行的開銷，并可以在ECMAScript 5的Strict Mode下運(yùn)行)，還能讓代碼擺脫Jscex編譯器執(zhí)行。在排除了編譯器代碼之后，Jscex的異步類庫在精簡和壓縮后只有3KB左右大小，十分適合互聯(lián)網(wǎng)產(chǎn)品使用。

總結(jié)

異步編程的困難有目共睹，因此為了輔助異步程序開發(fā)出現(xiàn)過許多嘗試。在JavaScript編程領(lǐng)域，大部分解決方案都是設(shè)法通過提供一些API來更好地組織錯(cuò)綜復(fù)雜的回調(diào)函數(shù)，但Jscex走的是另外一條道路。Jscex的目的，是希望盡可能保留JavaScript程序員原有的編程習(xí)慣及邏輯組織方式，讓“編譯器”來生成那些包含了回調(diào)函數(shù)的代碼。類似的功能已經(jīng)在F#和Scala中獲得了成功，也即將在下個(gè)版本的C#里出現(xiàn)，而Jscex則是將其引入至JavaScript編程中。

Jscex基于BSD授權(quán)協(xié)議開源，代碼庫放置在GitHub上，并同步至SNDA Code。

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么利用Jscex改善異步編程體驗(yàn)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！