快捷導(dǎo)航

異步JS框架的作用以及實(shí)現(xiàn)方法

更新時(shí)間：2015年10月29日 15:10:13 投稿：lijiao

這篇文章主要介紹了異步JS框架的作用以及使用方法

從異步JS的重要性開始說起，再引入異步j(luò)s框架，一步步的深入了解異步JS。

1.異步JS的重要性
隨著Web平臺(tái)地位的提升，霸占著瀏覽器的JavaScript語(yǔ)言也成為了世界上最流行的語(yǔ)言之一，甚至通過Node.js進(jìn)入了服務(wù)器編程領(lǐng)域。JavaScript的一個(gè)重要特性便是“不能阻塞”，這里的“不能”是指“不應(yīng)該”而不是“無法”的意思（只要提供阻塞的API）。

JavaScript是一門單線程語(yǔ)言，因此一旦有某個(gè)API阻塞了當(dāng)前線程，就相當(dāng)于阻塞了整個(gè)程序，所以“異步”在JavaScript編程中占有很重要的地位。異步編程對(duì)程序執(zhí)行效果的好處這里就不多談了，但是異步編程對(duì)于開發(fā)者來說十分麻煩，它會(huì)將程序邏輯拆分地支離破碎，語(yǔ)義完全丟失。

你是不是也曾因?yàn)閍jax異步，只能在回調(diào)函數(shù)里嵌套邏輯而發(fā)狂？這樣的代碼看起來非常糟糕。如果使用同步，代碼可以不用嵌套。但如果請(qǐng)求時(shí)間過長(zhǎng)，又會(huì)因?yàn)榫€程阻塞，導(dǎo)致瀏覽器假死。真是非?？鄲??？磥韮?yōu)雅的代碼和良好的用戶體驗(yàn)不能兼得了。

2.異步JS框架登場(chǎng)
假如現(xiàn)在有3個(gè)ajax請(qǐng)求，分別為A,B,C。A執(zhí)行完后才能執(zhí)行B，B執(zhí)行完后才能執(zhí)行C。這樣我們就不得不嵌套了，在A的回調(diào)函數(shù)里執(zhí)行B，然后在B的回調(diào)函數(shù)里執(zhí)行C。這樣的代碼非常不友好。
本著‘專業(yè)造輪子'的原則，我的異步JS框架出發(fā)了！
大致結(jié)構(gòu)-　

 var js = new AsyncJs();
      var func = js.Build(function () {
        var a = _$Async({
          url: "",
          success: function () {

          }
        });
        var b = _$Async({
          url: "",
          success: function () {

          }
        });
        var c = _$Async({
          url: "",
          success: function () {

          }
        });
      });
　　　　　　eval(func);

a,b,c會(huì)按順序執(zhí)行，且線程不會(huì)阻塞。

優(yōu)勢(shì)
1.良好的體驗(yàn)。全程異步，線程不會(huì)阻塞。
2.代碼優(yōu)雅。不需要復(fù)雜的嵌套，框架幫你自動(dòng)完成嵌套工作，你只需要關(guān)注編碼本身，易于維護(hù)。
3.簡(jiǎn)單易用。build(function(){ }) 你可以理解成C#的Thread，我開多一個(gè)線程去執(zhí)行function(){} （JS是單線程的，這點(diǎn)要強(qiáng)調(diào)下?。?/p>

      new Thread(() =>
      {
        //dosomething
      });

4.簡(jiǎn)單易擴(kuò)展。（請(qǐng)將所有要執(zhí)行的方法用_$Async‘包住'）
5.易于調(diào)試。
缺點(diǎn)
1.build(function(){ })，函數(shù)內(nèi)不支持自定義局部變量，如var a=1;
　如果想使用局部變量，只能：　　　　　　　　

　        var a = _$Async(function () {
          return 1;
        });

2._$Async();必須要以‘;'結(jié)尾。
3.build(function(){ }) 函數(shù)內(nèi)不能直接調(diào)用外部函數(shù)，如　　

　　   function Test() {
      var TestMethod = function () {
        alert(1);
      };
      var func = js.Build(function () {
        TestMethod();
      });
    }

請(qǐng)使用　

      function Test() {
      var TestMethod = function () {
        alert(1);
      };
      var func = js.Build(function () {
        _$Async(function () {
          TestMethod();
        });
      });
    }

也許大家會(huì)好奇，到底如何實(shí)現(xiàn)的？又或者為什么不將eval(r)封裝起來？

實(shí)現(xiàn)原理其實(shí)就是分析Build內(nèi)的函數(shù)，然后將它動(dòng)態(tài)的組合、嵌套起來，然后執(zhí)行。至于eval不封裝起來的原因是如果封裝起來，將無法使用外部變量，因此必須將它放出來。

3.測(cè)試代碼及效果

<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.8.2.min.js"></script>
  <script src="AsyncJavaScript.js"></script>
  <script>
    function Show() {
      var js = new AsyncJs();
      var url = "WebForm1.aspx";
      var func = js.Build(function () {
        _$Async(function () {
          alert("點(diǎn)擊后開始第一次ajax請(qǐng)求");
        });
        _$Async({
          url: url,
          data: { val: "第一次ajax請(qǐng)求" },
          success: function (data) {
            alert("第一次請(qǐng)求結(jié)束，結(jié)果:" + data);
          }
        });
        _$Async(function () {
          alert("點(diǎn)擊后開始第二次ajax請(qǐng)求");
        });
        var result = _$Async({
          url: url,
          data: { val: "第二次ajax請(qǐng)求" },
          success: function (data) {
            return data;
          }
        });
        _$Async(function () {
          alert("第二次請(qǐng)求結(jié)束，結(jié)果:" + result);
        });

      });
      eval(func);
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <input type="button" onclick="Show()" value="查詢" />
      <input type="text" />
    </div>
  </form>
</body>
</html>

后臺(tái)C#代碼　　

 protected void Page_Load(object sender, EventArgs e)
    {
      string val = Request.QueryString["val"];
      if (!string.IsNullOrEmpty(val))
      {
        Thread.Sleep(2000);
        Response.Write(val + "返回結(jié)果");
        Response.End();
      }
    }

效果圖：