超軽量級の異ステップJSフレームは、入れ子が私達の優雅なコードに影響を与えないようにしてください.

8070 ワード

1.非同期JSの重要性
Webプラットフォームの地位が向上するにつれて、ブラウザを独占しているJavaScript言語は世界で最も流行している言語の一つとなり、Node.jsを通じてサーバープログラミングの領域にも進出しました.JavaScriptの重要な特性は「ブロックできない」です.ここの「できない」は「できない」ではなく「できない」という意味です.JavaScriptは単一スレッド言語であるため、あるAPIが現在のスレッドをブロックすると、プログラム全体がブロックされていることに相当するので、「非同期」はJavaScriptプログラミングにおいて重要な位置を占めている.非同期プログラミングはプログラムの実行効果のメリットについてはここでは多く説明しませんが、非同期プログラミングは開発者にとって非常に面倒で、プログラム論理を分割してばらばらにして、意味が全く失われます.(趙お兄さんwind.jsから紹介します)
あなたもajaxの非同期のせいで、エコー関数に論理を入れ込んで発狂したことがありますか?このようなコードは非常に悪いように見えます.同期を使うとコードが入れ子なくてもいいです.しかし、要求時間が長すぎると、スレッドが詰まり、遊覧器が仮死してしまうこともあります.本当に悩んでいます.優雅なコードと良いユーザー体験は両立できないようです.
 
2.非同期JSフレーム登場
もし今3つのajax要求があれば、それぞれA、B、Cです.A実行が終わったらBを実行できます.B実行が終わったらCを実行できます.これで私たちは入れ子をしなければなりません.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(){})C〓〓のThreadとして理解できます.もう一つのスレッドを開いて、function()を実行します. (JSはシングルスレッドです.これは強調してください.)
       new Thread(() =>
            {
                //dosomething
            });
4.簡単で広がりやすい.(実行する方法をすべて_ドルAyncで包んでください)
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.テストコードと効果

    
    
    <script src="jquery-1.8.2.min.js"/>
    <script src="AsyncJavaScript.js"/>
    <script>
        <span style="color:#0000ff;">function</span><span style="color:#000000;"> Show() {
            </span><span style="color:#0000ff;">var</span> js = <span style="color:#0000ff;">new</span><span style="color:#000000;"> AsyncJs();
            </span><span style="color:#0000ff;">var</span> url = "WebForm1.aspx"<span style="color:#000000;">;
            </span><span style="color:#0000ff;">var</span> func = js.Build(<span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                _$Async(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                    alert(</span>"        ajax  "<span style="color:#000000;">);
                });
                _$Async({
                    url: url,
                    data: { val: </span>"   ajax  "<span style="color:#000000;"> },
                    success: </span><span style="color:#0000ff;">function</span><span style="color:#000000;"> (data) {
                        alert(</span>"       ,  :" +<span style="color:#000000;"> data);
                    }
                });
                _$Async(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                    alert(</span>"        ajax  "<span style="color:#000000;">);
                });
                </span><span style="color:#0000ff;">var</span> result =<span style="color:#000000;"> _$Async({
                    url: url,
                    data: { val: </span>"   ajax  "<span style="color:#000000;"> },
                    success: </span><span style="color:#0000ff;">function</span><span style="color:#000000;"> (data) {
                        </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> data;
                    }
                });
                _$Async(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
                    alert(</span>"       ,  :" +<span style="color:#000000;"> result);
                });

            });
            eval(func);
        }
    </span></script>


    </code></pre><form id="form1" runat="server">
        <div>
            <input type="button" value="  "/>
            <input type="text"/>
        </div>
    </form>

</div></div></div></div></div></div>