超輕量級異步JS框架，別再讓嵌套影響咱們的優雅代碼！

時間 2019-11-09

原文原文鏈接

1.異步JS的重要性html

隨着Web平臺地位的提高，霸佔着瀏覽器的JavaScript語言也成爲了世界上最流行的語言之一，甚至經過Node.js進入了服務器編程領域。JavaScript的一個重要特性即是「不能阻塞」，這裏的「不能」是指「不該該」而不是「沒法」的意思（只要提供阻塞的API）。JavaScript是一門單線程語言，所以一旦有某個API阻塞了當前線程，就至關於阻塞了整個程序，因此「異步」在JavaScript編程中佔有很重要的地位。異步編程對程序執行效果的好處這裏就很少談了，可是異步編程對於開發者來講十分麻煩，它會將程序邏輯拆分地支離破碎，語義徹底丟失。(摘自趙姐夫wind.js介紹)jquery

你是否是也曾由於ajax異步,只能在回調函數裏嵌套邏輯而發狂？這樣的代碼看起來很是糟糕。若是使用同步，代碼能夠不用嵌套。但若是請求時間過長，又會由於線程阻塞，致使遊覽器假死。真是很是苦惱。看來優雅的代碼和良好的用戶體驗不能兼得了。git

2.異步JS框架登場github

假如如今有3個ajax請求，分別爲A,B,C。A執行完後才能執行B，B執行完後才能執行C。這樣咱們就不得不嵌套了，在A的回調函數裏執行B，而後在B的回調函數裏執行C。這樣的代碼很是不友好。ajax

本着‘專業造輪子’的原則，個人異步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#的Thread，我開多一個線程去執行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();
            }
        }