超轻量级异步JS框架，别再让嵌套影响我们的优雅代码！
1.异步JS的重要性
随着Web平台地位的提升，霸占着浏览器的JavaScript语言也成为了世界上最流行的语言之一，甚至通过Node.js进入了服务器编程领域。JavaScript的一个重要特性便是“不能阻塞”，这里的“不能”是指“不应该”而不是“无法”的意思（只要提供阻塞的API）。JavaScript是一门单线程语言，因此一旦有某个API阻塞了当前线程，就相当于阻塞了整个程序，所以“异步”在JavaScript编程中占有很重要的地位。异步编程对程序执行效果的好处这里就不多谈了，但是异步编程对于开发者来说十分麻烦，它会将程序逻辑拆分地支离破碎，语义完全丢失。(摘自赵姐夫wind.js介绍)
你是不是也曾因为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();
Response.Write(val + "返回结果");
Response.End();
}
}
效果图
可以看到完全是按顺序执行，并且线程无阻塞。
异步JS文件地址
https://github.com/ProjectDInitial/AsyncJS
完整Demo
https://github.com/ProjectDInitial/AsyncJSDemo
如需要调试，请将AsyncJS文件中的_debug改为true，则会输入自动生成的嵌套语句，然后仍入JS中执行调试即可。
超轻量级异步JS框架，别再让嵌套影响我们的优雅代码！的更多相关文章
- 在html页面添加一个隐藏域,并渲染一个需要保存的数值,在js中需要再获取,而不影响页面结构
<div style="display:none">可以将需要保存的数值放在文本内容中,也可以放在标签的属性当中, 如果放在文本内容中,注意换行后 \n 的存在< ...
- Android Native层异步消息处理框架
*本文系作者工作学习总结,尚有不完善及理解不恰当之处,欢迎批评指正* 一.前言 在NuPlayer中,可以发现许多类似于下面的代码: //============================== ...
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画
Xuijs超轻量级的框架+Emile CSS动画效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- 分享自己的超轻量级高性能ORM数据访问框架Deft
Deft 简介 Deft是一个超轻量级高性能O/R mapping数据访问框架,简单易用,几分钟即可上手. Deft包含如下但不限于此的特点: 1.按照Transact-SQL的语法语义风格来设计,只 ...
- 不要再使用JS框架了
停止编写Javascript框架吧. Javascript框架就好像死亡和税收一样:终究不可避免它的存在.我确信如果我是那面墙上的一只苍蝇,每次有人开始一个新的网页项目时,第一个问题肯定是我们用的是哪 ...
- 13 款惊艳的 Node.js 框架——第2部分
[编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 API 以及实时应用的开发流程.本文系国内 ITOM 管理平台 OneAPM ...
- 异步JS：$.Deferred的使用
异步JS:$.Deferred的使用 原文链接:http://www.html5rocks.com/en/tutorials/async/deferred/ 当我们构建一个平稳的,响应式的HTML5应 ...
随机推荐
- 关于Mysql中文乱码问题该如何解决(乱码问题完美解决方案)（转）
这篇文章给大家介绍关于Mysql中文乱码问题该如何解决(乱码问题完美解决方案)的相关资料,还给大家收集些关于MySQL会出现中文乱码原因常见的几点,小伙伴快来看看吧 最近两天做项目总是被乱码问题困 ...
- do..while(false)的用法总结
首先要注意: do..while(0) 代表do里面的东西至少被执行一次,在这里仅仅执行一次. 此种用法有三个用处: 代替{}代码块,实现局部作用域.在某些宏定义时非常有用: #define f(x) ...
- windows 右健添加cmd快捷通道
windows 右健添加cmd快捷 - Windows - geektown极客堂 - Powered by Discuz!. 把横线下面的文本copy保存到一个注册表文件中,比如cmd.reg,然后 ...
- 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
- IOS 数据加密方式（加盐，MD5加密，）
加密方式封装 @interface NSString (Hash) @property (readonly) NSString *md5String; @property (readonly) NSS ...
- mysql的慢查询实战+sql优化
背景:使用A电脑安装mysql,B电脑通过xshell方式连接,数据内容我都已经创建好,现在我已正常的进入到mysql中 步骤1:设置慢查询日志的超时时间,先查看日志存放路径查询慢日志的地址,因为有慢 ...
- linux flushing file system caches
We may drop the file system caches on Linux to free up memory for applications. Kernels 2.6.16 and n ...
- Python2.x 和 3.x 的区别
Python有两个版本,2.x 和 3.x ,两个版本不兼容,3.x 不不考虑对2.x代码的向后兼容. 在3.x中,一些语法,内建函数和对象的行为都有所调整. 大部分的python库都支持 pytho ...
- ILSVRC2014检测总结
ILSVRC 2014结束一段时间了.从下面的表格来看,基本都是RCNN的路子,但是这些牛队都做了改进.自己和人家比差的太远啊,努力. team results Spotlights and impr ...
- lambda表达式的使用
lambda表达式和可遍历的datatable结合使用,把表中某一列中的数据转成字符串,用“|”隔开,代码如下: obj = tableName.AsEnumerable();if(tableName ...