當耐特

有人問我，不用Jscex是怎么把算法拆爛拆散的？為什么要用Jscex？

為什么不用？ 那么就從高中演講冒泡培訓說起吧···

【冒泡排序】

基本思想（以升序舉例）：

§形象比喻：像水面冒泡一樣每次從水底浮到水面.

§具體而言：比較相鄰的兩個數據元素，反序則交換。經過一趟排序后，最小值元素移到最上位置，其他較小的元素也向最上端位置移動(一趟起泡) 。

§代碼實現：對于有n個數據元素的數據序列，共需n-1趟排序，第i趟對從位置n-1到位置i的數據元素進行比較、交換(最小下標從0開始)，因此用二重循環實現

【過程舉例】

【代碼實現】

var array = new Array(44, 20, 17, 26, 15, 7, 17, 58);
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > 0; i--) {
if (array[i] < array[i - 1]) {
var temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
}
document.write("第" + (j+1) + "趟排序后：")
for (var p = 0; p < array.length; p++) {
document.write(array[p] + " ");
}
document.write("<br/>")
}

【輸出結果】

如果這樣看不到冒泡的過程話，我們可以把每一次對比和交換后的結果輸出：

var array = new Array(44, 20, 17, 26, 15, 7, 17, 58);
var count = 0;
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > 0; i--) {
if (array[i] < array[i - 1]) {
var temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
count++
document.write("第" + count+ "次對比交換后")
for (var p = 0; p < array.length; p++) {
document.write(array[p] + " ");
}
document.write("<br/>")
}
}

學生說：我還是看不到冒泡的過程啊·····························

然后我想了想，大概寫出了下面這段代碼，然后卡住了······

function showArray(sortingArray) {
var html = "";
for (var q = 0; q < sortingArray.length; q++) {
html += sortingArray[q] + " ";
}
document.getElementById("show").innerHTML = html;
//怎么辦呢？我要把這個算法拆開顯示?！?！?！?無助啊?！?！?
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > j; i--) {
if (array[i] < array[i - 1]) {
temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
}
}
setTimeout("showArray(sortingArray)", 50);
}

然后我靈光一現，直接用Jscex

 <script>
var array = new Array(567, 101, 44, 20, 99, 17, 26, 15, 7, 17, 58, 87, 4, 16);
var temp;
var sortAsync = eval(Jscex.compile("async", function (array) {
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > j; i--) {
if (array[i] < array[i - 1]) {
temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
showArray(array);
$await(Jscex.Async.sleep(50));
}
}
}));
function showArray(sortingArray) {
var html = "";
for (var q = 0; q < sortingArray.length; q++) {
html += sortingArray[q] + " ";
}
document.getElementById("show").innerHTML = html;
}
function Button1_onclick() {
sortAsync(array).start();
}
</script>
<div style="font-size:xx-large" id="show">567 101 44 20 99 17 26 15 7 17 58 87 4 16 </div>
<input id="Button1" type="button" value="開a始?冒°泡Y排?序ò" onclick="return Button1_onclick()" />

那么傳統的異步編程遇到了什么困難？

比如那段未寫完的代碼：

function showArray(sortingArray) {
var html = "";
for (var q = 0; q < sortingArray.length; q++) {
html += sortingArray[q] + " ";
}
document.getElementById("show").innerHTML = html;
 for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > j; i--) {
if (array[i] < array[i - 1]) {
temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
}
}
setTimeout("showArray(sortingArray)", 50);
}

【一】函數體違背了單一職責---- 一個函數就干一件事情

我不僅要負責顯示，而且要負責循環，再者要負責什么時候跳出循環；

【二】破壞了算法的完整性

我要把算法拆散顯示，破壞了原有的算法，然后要去構造另外的顯示算法。

編程語法發展了50-60年，抽象級別在不斷的提高。Jscex的這次提升絕對是有歷史意義的。

在21世紀的現在，

如果你是一個前端開發者，

如果你要用HTML5寫游戲或者動畫

如果你不使用Jscex，絕對是你的一大損失。

在以后的系列，我會帶著大家做許多游戲，完全Jscex版本的！Jscex不僅僅是冒泡那么簡單····，它可以干大事。

最新的Jscex 庫，請上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載吧····

【更多javascript異步編程系列】

javascript異步編程系列【一】----用Jscex畫圓

javascript異步編程系列【二】----Jscex模擬重力場與google蘋果logo的比較

javascript異步編程系列【三】----Jscex無創痕切入JqueryUI

javascript異步編程系列【四】----Jscex+Jquery UI打造游戲力度條

javascript異步編程系列【五】----Jscex制作憤怒的小鳥

javascript異步編程系列【六】----Jscex版憤怒的小鳥之沖鋒陷陣鳥