1.异步JS的重要性

随着Web平台地位的提升，霸占着浏览器的JavaScript语言也成为了世界上最流行的语言之一，甚至通过Node.js进入了服务器编程领域。JavaScript的一个重要特性便是“不能阻塞”，这里的“不能”是指“不应该”而不是“无法”的意思（只要提供阻塞的API）。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(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();

                Response.Write(val + "返回结果");

                Response.End();

            }

        }

效果图

可以看到完全是按顺序执行，并且线程无阻塞。

异步JS文件地址

https://github.com/ProjectDInitial/AsyncJS

完整Demo

https://github.com/ProjectDInitial/AsyncJSDemo

如需要调试，请将AsyncJS文件中的_debug改为true，则会输入自动生成的嵌套语句，然后仍入JS中执行调试即可。

超轻量级异步JS框架，别再让嵌套影响我们的优雅代码！的更多相关文章

  1. 在html页面添加一个隐藏域,并渲染一个需要保存的数值,在js中需要再获取,而不影响页面结构

    <div style="display:none">可以将需要保存的数值放在文本内容中,也可以放在标签的属性当中, 如果放在文本内容中,注意换行后 \n 的存在< ...

  2. Android Native层异步消息处理框架

     *本文系作者工作学习总结,尚有不完善及理解不恰当之处,欢迎批评指正* 一.前言 在NuPlayer中,可以发现许多类似于下面的代码: //============================== ...

  3. 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

    Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  4. 跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画

    Xuijs超轻量级的框架+Emile CSS动画效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  5. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  6. 分享自己的超轻量级高性能ORM数据访问框架Deft

    Deft 简介 Deft是一个超轻量级高性能O/R mapping数据访问框架,简单易用,几分钟即可上手. Deft包含如下但不限于此的特点: 1.按照Transact-SQL的语法语义风格来设计,只 ...

  7. 不要再使用JS框架了

    停止编写Javascript框架吧. Javascript框架就好像死亡和税收一样:终究不可避免它的存在.我确信如果我是那面墙上的一只苍蝇,每次有人开始一个新的网页项目时,第一个问题肯定是我们用的是哪 ...

  8. 13 款惊艳的 Node.js 框架——第2部分

    [编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 API 以及实时应用的开发流程.本文系国内 ITOM 管理平台 OneAPM ...

  9. 异步JS：$.Deferred的使用

    异步JS:$.Deferred的使用 原文链接:http://www.html5rocks.com/en/tutorials/async/deferred/ 当我们构建一个平稳的,响应式的HTML5应 ...

随机推荐

  1. Sundy_Android开发深入浅出和高级开发视频教程

    Sundy_Android开发深入浅出和高级开发视频教程 放于播音员的网盘中又名:android零基础到高级软件开发工程师培训课程全集(400多讲) 1.课程介绍 2.java重点难点 3.版本控制- ...

  2. socks v5 协议解析

    socks v5是一种用于代理的协议,就是说client用这种协议与server沟通,让server帮忙代访问remote后再将结果通过此协议返给client,所以一般是涉及到3个端,分别是clien ...

  3. Altium_Designer-PCB的覆铜步骤

    1.覆铜的意义     覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:还有,与地线相连,减小环路 ...

  4. Python 类的高级属性（可选）

    1.slots实例:限制类的实例有合法的属性集,只有__slots__属性列表中的属性才可能成为实例属性. 对象的实例通常没有一个属性字典,可以在__slots__列表中包含一个属性字典__dict_ ...

  5. mysql轮廓总结

    架构＝数据类型.索引.分片.主从复制原理.数据备份 学习软件,都应该先从架构入手,每一层掌握就行.mysql难吗?从其架构层开始,就不难啦. 架构结构:http://www.cnblogs.com/h ...

  6. POJ-3669 Meteor Shower---BFS+预处理

    题目链接: https://vjudge.net/problem/POJ-3669 题目大意: 巨大流星雨即将袭来.每个流星会对击中的地方以及周围(上下左右四格)造成破坏.Bessie开始时位于(0, ...

  7. 认识http客户端

    最简单的http客户端就是我们的浏览器,浏览器地址输入baidu.com,就会返回响应内容,打开network,都是http请求,第一个就是www.baidu.com的请求,旁边第一个General就 ...

  8. P2375 动物园

    入口 题目的大意就是输出以任意一个字符结尾,既是前缀,又是后缀,且长度不超过总长度的一半的方案书的乘积. 考虑使用kmp 在处理失配数组的同时,处理出来以每个字符结尾的时的,能有多少个前缀和后缀相同的 ...

  9. Latex 使用笔记，取消目录

    不使用标准模板(如ieee或者acm的模板)的前提下: \usepackage{hyperref} \hypersetup{bookmarks={false}} 或者 \usepackage[book ...

  10. 【杂题总汇】HDU-6406 Taotao Picks Apples

    [HDU 6406]Taotao Picks Apples 多校赛的时候多写了一行代码就WA了……找了正解对拍,在比赛结束后17分钟AC了