非同期 JS フレームワークの役割と実装方法_javascript スキル-jsチュートリアル-php.cn

非同期 JS フレームワークの役割と実装方法_javascript スキル

WBOY

リリース： 2016-05-16 15:34:35

オリジナル

1243 人が閲覧しました

非同期 JS の重要性から始めて、次に非同期 JS フレームワークを紹介し、非同期 JS について段階的に理解を深めていきましょう。

1. 非同期 JS の重要性
Web プラットフォームの地位の向上に伴い、ブラウザーを支配する JavaScript 言語は世界で最も人気のある言語の 1 つとなり、Node.js を通じてサーバープログラミングの分野にも参入しました。 JavaScript の重要な機能は「ブロックできない」です。「ブロックできない」は、(ブロック API が提供されている限り) 「できない」というよりは「すべきではない」という意味です。

JavaScript はシングルスレッド言語であるため、API が現在のスレッドをブロックすると、プログラム全体がブロックされるのと同じことになるため、「非同期」は JavaScript プログラミングにおいて非常に重要な位置を占めます。プログラム実行における非同期プログラミングの利点についてはここでは説明しませんが、非同期プログラミングは開発者にとって非常に厄介であり、プログラムロジックが断片化され、セマンティクスが完全に失われます。

ajax は非同期であり、ロジックをコールバック関数にのみ埋め込むことができるため、気が狂ったことがありますか?このようなコードは非常に悪く見えます。同期を使用する場合、コードをネストする必要はありません。ただし、リクエストに時間がかかりすぎると、スレッドのブロックによりブラウザがフリーズします。本当に悲惨です。エレガントなコードと優れたユーザーエクスペリエンスを両立させることはできないようです。

2. 非同期 JS フレームワークのデビュー
A、B、C という 3 つの ajax リクエストがあるとします。 B は A の実行後にのみ実行でき、C は B の実行後にのみ実行できます。このように、ネストして A のコールバック関数で B を実行し、次に B のコールバック関数で C を実行する必要があります。このようなコードは非常に不親切です。
「プロフェッショナルなホイール構築」の原則に基づいて、私の非同期 JS フレームワークが始動しました。
一般構造 -

 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 は順番に実行され、スレッドはブロックされません。

メリット
1. 良い経験。プロセス全体は非同期であり、スレッドはブロックされません。
2. コードがエレガントです。複雑なネストは必要なく、フレームワークによってネスト作業が自動的に完了するため、コーディング自体に集中するだけで済みます。
3. シンプルで使いやすい。 build(function(){ }) これは C# のスレッドとして理解できます。 function(){} を実行するために追加のスレッドを開きます (JS はシングルスレッドなので、この点を強調する必要があります)

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

ログイン後にコピー

4. シンプルで拡張が簡単。 (_$Async で実行されるすべてのメソッドを「ラップ」してください)
5. デバッグが簡単。
デメリット
1.build(function(){ })、関数は var a=1;
などのカスタムローカル変数をサポートしていません。ローカル変数を使用したい場合は、

のみ可能です。

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

ログイン後にコピー

2._$Async(); は「;」で終わる必要があります。
3. Build(function(){ })

などの外部関数を関数内で直接呼び出すことはできません。

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

ログイン後にコピー

ご利用ください

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

ログイン後にコピー

おそらく興味があるかもしれませんが、それはどのように達成されるのでしょうか?あるいは、なぜ eval(r) をカプセル化しないのでしょうか?

実装原理実際には、Build で関数を分析し、それらを動的に組み合わせ、ネストして実行します。 eval をカプセル化しない理由は、カプセル化すると外部変数が使用できなくなるため、解放する必要があるためです。

3. テストコードとエフェクト

<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("点击后开始第一次ajax请求");
        });
        _$Async({
          url: url,
          data: { val: "第一次ajax请求" },
          success: function (data) {
            alert("第一次请求结束，结果:" + data);
          }
        });
        _$Async(function () {
          alert("点击后开始第二次ajax请求");
        });
        var result = _$Async({
          url: url,
          data: { val: "第二次ajax请求" },
          success: function (data) {
            return data;
          }
        });
        _$Async(function () {
          alert("第二次请求结束，结果:" + 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>

ログイン後にコピー

バックエンド C# コード

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

ログイン後にコピー

レンダリング: