异步JS框架的作用以及实现方法_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

从异步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的重要性。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7725

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。