您的位置：首页 > Web前端 > JavaScript

超轻量级异步JS框架，别再让嵌套影响我们的优雅代码！

2015-10-29 13:51 851 查看
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(2000);
Response.Write(val + "返回结果");
Response.End();
}
}


效果图



可以看到完全是按顺序执行，并且线程无阻塞。

异步JS文件地址
https://github.com/ProjectDInitial/AsyncJS
完整Demo
https://github.com/ProjectDInitial/AsyncJSDemo
如需要调试，请将AsyncJS文件中的_debug改为true，则会输入自动生成的嵌套语句，然后仍入JS中执行调试即可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航