异步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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
函数式编程入门实践(一)
Apr 20 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
vuex实现购物车功能
Jun 28 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
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python 的类、继承和多态详解
2017/07/16 Python
机器学习python实战之手写数字识别
2017/11/01 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
社区娱乐活动方案
2014/08/21 职场文书
私人委托书格式
2014/09/10 职场文书
小学重阳节活动总结
2015/03/24 职场文书
创业计划书之甜品店
2019/09/18 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL