异步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 相关文章推荐
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
vscode 远程调试python的方法
2017/12/01 Python
详解python中*号的用法
2019/10/21 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
挂职自我鉴定
2014/02/26 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android