异步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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
javascript call和apply方法
Nov 24 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
javascript+css实现进度条效果
Mar 25 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
OpenCV 模板匹配
2019/07/10 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
《胖乎乎的小手》教学反思
2014/02/26 职场文书
小学生寒假家长评语
2014/04/16 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
公司员工体检通知
2015/04/21 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书