异步JS框架的作用以及实现方法


Posted in Javascript onOctober 29, 2015

从异步JS的重要性开始说起,再引入异步js框架,一步步的深入了解异步JS。

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

JavaScript是一门单线程语言,因此一旦有某个API阻塞了当前线程,就相当于阻塞了整个程序,所以“异步”在JavaScript编程中占有很重要的地位。异步编程对程序执行效果的好处这里就不多谈了,但是异步编程对于开发者来说十分麻烦,它会将程序逻辑拆分地支离破碎,语义完全丢失。

你是不是也曾因为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(2000);
        Response.Write(val + "返回结果");
        Response.End();
      }
    }

效果图:

异步JS框架的作用以及实现方法

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

以上就是介绍了异步JS框架的作用以及实现方法,希望对大家的学习有所帮助,真正理解异步js的重要性。

Javascript 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JavaScript中window和document用法详解
Jul 28 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
图解JavaScript中的this关键字
May 28 #Javascript
jquery validate demo 基础
Oct 29 #Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 #Javascript
jquery实现的伪分页效果代码
Oct 29 #Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 #Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 #Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript实现轮显新闻标题链接
2007/08/13 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
中间件分为哪几类
2012/03/14 面试题
成功的餐厅经营创业计划书
2014/01/15 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
交通安全教育心得体会
2016/01/15 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
MySQL sql模式设置引起的问题
2022/05/15 MySQL