js同步程序是如何向異步程序演變的

　　js的異步調用很重要，凡是涉及到網絡調用和事件機制的代碼都會用到它。第一眼看上去的時候異步調用很特別，和之前設計程序使用的同步調用方法很不一樣。實質上他們之前的區(qū)別沒有相像中那么大。本文嘗試用幾個例子說明同步程序是如何向異步程序演變的。

　　從C/C++的同步調用開始

　　1 使用C語言的編碼方式實現調用訪問遠程的接口

　　view plaincopy to clipboardprint?

　　int get_data()

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 socket s = new Socket();

　　 Connnect(s, ip, port);

　　 send(s, bufCmd);

　　 recv(s, bufRcv);

　　 use(bufRcv);

　　 return 0;

　　}

　　int get_data()

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 socket s = new Socket();

　　 Connnect(s, ip, port);

　　 send(s, bufCmd);

　　 recv(s, bufRcv);

　　 use(bufRcv);

　　 return 0;

　　}

　　2 將通信過程封裝成獨立的函數，簡化業(yè)務流程代碼

　　view plaincopy to clipboardprint?

　　// 發(fā)包收包的過程

　　int send_and_recv(struct addr, char* bufCmd, char* bufRcv)

　　{

　　 socket s = new Socket();

　　 Connnect(s, addr.ip, addr.port);

　　 send(s, bufCmd);

　　 recv(s, bufRcv);

　　}

　　// 原來的業(yè)務流程

　　int get_data_v2()

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 // addr={ip, port}

　　 send_and_recv(addr, bufCmd, bufRcv);

　　 use(bufRcv);

　　 return 0;

　　}

　　// 發(fā)包收包的過程

　　int send_and_recv(struct addr, char* bufCmd, char* bufRcv)

　　{

　　 socket s = new Socket();

　　 Connnect(s, addr.ip, addr.port);

　　 send(s, bufCmd);

　　 recv(s, bufRcv);

　　}

　　// 原來的業(yè)務流程

　　int get_data_v2()

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 // addr={ip, port}

　　 send_and_recv(addr, bufCmd, bufRcv);

　　 use(bufRcv);

　　 return 0;

　　}

　　3 將通信過程變成異步調用

　　view plaincopy to clipboardprint?

　　// 變成異步調用以后，原來的調用過程分成了兩段

　　// 前半段組裝參數調用發(fā)包過程

　　// 后半段處理返

　　// 這里假設send_and_recv是一個異步的網絡通信函數

　　void get_data_v3()

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv_async(addr, bufCmd, bufRcv, callback); } // end of get_data_v4

　　// definition of call back function

　　int callback(char* bufRcv) {

　　 use(bufRcv);

　　 return 0;

　　}

　　// 變成異步調用以后，原來的調用過程分成了兩段

　　// 前半段組裝參數調用發(fā)包過程

　　// 后半段處理返

　　// 這里假設send_and_recv是一個異步的網絡通信函數

　　void get_data_v3()

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv_async(addr, bufCmd, bufRcv, callback); } // end of get_data_v4

　　// definition of call back function

　　int callback(char* bufRcv) {

　　 use(bufRcv);

　　 return 0;

　　}

　　4 假設處理結果的時候依賴外部參數

　　view plaincopy to clipboardprint?

　　// 這里原來的業(yè)務流程需要外部傳進來的兩個參數（a，b）來決定如何處理結果

　　int get_data_v4(int a, int b)

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv(addr, bufCmd, bufRcv);

　　 use(bufRcv, a, b);

　　 return 0;

　　}

　　// 這里原來的業(yè)務流程需要外部傳進來的兩個參數（a，b）來決定如何處理結果

　　int get_data_v4(int a, int b)

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv(addr, bufCmd, bufRcv);

　　 use(bufRcv, a, b);

　　 return 0;

　　}

　　5 加上參數依賴后再變成異步調用

　　view plaincopy to clipboardprint?

　　// 需要參數的異步調用需要將參數透傳到后半段的回調函數中

　　void get_data_v5(int a, int b)

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv_async(addr, bufCmd, bufRcv, callback); } // end of get_data_v5

　　// definition of call back function

　　int callback(char* bufRcv, int a, int b) {

　　 use(bufRcv, a, b);

　　 return 0;

　　}

　　// 需要參數的異步調用需要將參數透傳到后半段的回調函數中

　　void get_data_v5(int a, int b)

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv_async(addr, bufCmd, bufRcv, callback); } // end of get_data_v5

　　// definition of call back function

　　int callback(char* bufRcv, int a, int b) {

　　 use(bufRcv, a, b);

　　 return 0;

　　}

　　6 使用一個closure對象打包過程中的參數

　　view plaincopy to clipboardprint?

　　// 為了統(tǒng)一回調函數的形式并且縮短回調的參數列表，將這種需要透傳的參數只有一個

　　// 統(tǒng)一的數據結構打包

　　void get_data_v6(int a, int b)

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv(addr, bufCmd, bufRcv, callback); } // end of get_data_v6

　　// definition of call back function

　　int callback(char* bufRcv, struct closure) {

　　 use(bufRcv, closure.a, closure.b);

　　 return 0;

　　}

　　// 為了統(tǒng)一回調函數的形式并且縮短回調的參數列表，將這種需要透傳的參數只有一個

　　// 統(tǒng)一的數據結構打包

　　void get_data_v6(int a, int b)

　　{

　　 char bufCmd[]="cmd=1001&uin=123456¶m=abc";

　　 char bufRcv[4096];

　　 send_and_recv(addr, bufCmd, bufRcv, callback); } // end of get_data_v6

　　// definition of call back function

　　int callback(char* bufRcv, struct closure) {

　　 use(bufRcv, closure.a, closure.b);

　　 return 0;

　　}

　　7 JS的異步調用

　　view plaincopy to clipboardprint?

　　//

　　// 寫成JS代碼就變成現在這個樣子

　　// url對應之前的addr

　　// 使用匿名函數代替原來命名的callback定義

　　// 原生支持閉包closure

　　//

　　function get_data_js(a, b)

　　{

　　 var bufCmd = "cmd=1001&uin=123456¶m=abc";

　　 var bufRcv;

　　 send_and_recv_with_xhr(/*addr*/url, bufCmd, bufRcv, /*callback/* //); } // end of get_data_js

　　 function(bufRcv/*, closure*/) {

　　 use(bufRcv, /*closure.*/a, /*closure.*/b);

　　 return 0;

　　 }

　　 );

　　}

　　//

　　// 寫成JS代碼就變成現在這個樣子

　　// url對應之前的addr

　　// 使用匿名函數代替原來命名的callback定義

　　// 原生支持閉包closure

　　//

　　function get_data_js(a, b)

　　{

　　 var bufCmd = "cmd=1001&uin=123456¶m=abc";

　　 var bufRcv;

　　 send_and_recv_with_xhr(/*addr*/url, bufCmd, bufRcv, /*callback/* //); } // end of get_data_js

　　 function(bufRcv/*, closure*/) {

　　 use(bufRcv, /*closure.*/a, /*closure.*/b);

　　 return 0;

　　 }

　　 );

　　}

　　總結

　　1 JS的異步調用的編寫，其實和同步編寫的過程是一樣的。只不過是因為異步調用的時候并不阻塞等待一個網絡調用的完成或者事件的發(fā)生，所以將原來完整的過程分成了兩個割裂的兩塊。

　　2 分割成兩塊以后，本來也沒什么問題，不過就是存在后半段處理的過程需要依賴前半段的中間結果或者參數，這些參數很可能是外部傳入的。所以為了讓這個中間參數的傳遞變得方便一些，不用為了同樣的事情編寫代碼，于是引入了閉包。最終，閉包的作用是使得代碼的后半段和前半段的運行環(huán)境完全一致，以使得這種參數傳遞透明化。由于，當前的流程本來就可能是更大的流程的后半段，所以使得閉包具有了可傳遞性，也就是閉包變成了閉包鏈。

　　所以，最終將異步調用看成是同步調用的上下兩段即可，之前設計優(yōu)美的同步程序的各種方法和經驗都可以用于異步調用中。