异步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 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
使用JS读秒使用示例
Sep 21 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
vue设置默认首页的操作
Aug 12 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
php中substr()函数参数说明及用法实例
2014/11/15 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python统计文本文件内单词数量的方法
2015/05/30 Python
小小聊天室Python代码实现
2016/08/17 Python
Python 专题一 函数的基础知识
2017/03/16 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python3中数组逆序输出方法
2020/12/01 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
初婚未育证明样本
2015/06/18 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
pytorch实现ResNet结构的实例代码
2021/05/17 Python