异步JS框架的作用以及实现方法
从异步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中同步与异步处理的方法和区别总结
在使用异步请求时,有时需要将异步请求的结果返回给另一个js函数,此种情况下会出现未等异步请求返回请求结果,该发送请求所在js函数已经执行完后续操作,即已经执行return ,这样会导致return的结果为空字符. 总结:若要在使用ajax请求后处理发送请求返回的结果,最好使用同步请求. 例如:以下例子会出现返回结果不正确的情况,因为ajax异步请求还未执行完,函数已经执行return了, 复制代码 代码如下: function fn(){ var result = " "; $.aja
-
详谈nodejs异步编程
目前需求中涉及到大量的异步操作,实际的页面越来越倾向于单页面应用.以后可以会使用backbone.angular.knockout等框架,但是关于异步编程的问题是首先需要面对的问题.随着node的兴起,异步编程成为一个非常热的话题.经过一段时间的学习和实践,对异步编程的一些细节进行总结. 1.异步编程的分类 解决异步问题方法大致包括:直接回调.pub/sub模式(事件模式).异步库控制库(例如async.when).promise.Generator等. 1.1 回调函数 回调函数是常用的解决异
-
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I
-
我的Node.js学习之路（三）--node.js作用、回调、同步和异步代码 以及事件循环
一,node.js的作用, I/O的意义,(I/O是输入/输出的简写,如:键盘敲入文本,输入,屏幕上看到文本显示输出.鼠标移动,在屏幕上看到鼠标的移动.终端的输入,和看到的输出.等等) node.js想解决的问题,(处理输入,输入,高并发 .如 在线游戏中可能会有上百万个游戏者,则有上百万的输入等等)(node.js适合的范畴:当应用程序需要在网络上发送和接收数据时Node.js最为适合.这可能是第三方的API,联网设备或者浏览器与服务器之间的实时通信) 并发的意义,(并发这个术语描述的
-
angularjs 处理多个异步请求方法汇总
在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码 代码如下: $http.get('url1').success(function (d1) { $http.get('url2').success(function (d2) { //处理逻辑 }); }); 解决方法二: then中的方法会按顺序执行. 复制代码 代码如下: var app = ang
-
详谈 Jquery Ajax异步处理Json数据.
所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml
-
js异步加载的三种解决方案
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的. (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本
-
jquery的ajax异步请求接收返回json数据实例
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
-
jQuery Ajax异步处理Json数据详解
先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); });
-
js 异步操作回调函数如何控制执行顺序
需求: fun A() { asyn(parm1, parm2, onsuccess(){ }) ;} fun B() {asyn(paem1, parm2, onsuccess(){}) ;} 函数B要求执行在函数A之后 异步执行 如果直接使用 A(); B(); 是不能够满足执行条件的. 考虑将B作为回调函数传递给A,然后A再执行的onsucess中执行B函数 A(B); 即可实现功能需求. js是单线程的. 1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的
-
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主
-
使用jquery.upload.js实现异步上传示例代码
相关资源下载:upload 1:jsp代码: 导入jquery.upload.js和jquery-1.7.2.js 添加调用js的代码:<a href="javascript:void(0)" rel="external nofollow" onclick="doUpload()">上传</a> 在底部写: <iframe style="position:absolute;top:-9999px"
-
js 异步处理进度条
1.先上图,效果如下: 2.使用方法 复制代码 代码如下: var loader=new Ajaxloader(this._ContentID,{Text:'loading......',Top:50}); loader.Show(); 3.代码列出: 复制代码 代码如下: /* 处理进度条,异步加载器 */ var Ajaxloader=new Class(); Ajaxloader.prototype= { Text:'数据加载中......', Parent:null, Left:0, T
-
ajax 异步获取数据实现代码 （js创建ajax对象）
复制代码 代码如下: <script type="text/javascript"><!-- var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request =
-
asp.net+ajaxfileupload.js 实现文件异步上传代码分享
由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码 代码如下: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val("");