视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
异步JS框架的作用以及实现方法_javascript技巧
2020-11-27 21:45:00 责编:小采
文档
 从异步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框架出发了!
大致结构- 



a,b,c会按顺序执行,且线程不会阻塞。

优势
1.良好的体验。全程异步,线程不会阻塞。
2.代码优雅。不需要复杂的嵌套,框架帮你自动完成嵌套工作,你只需要关注编码本身,易于维护。
3.简单易用。build(function(){ }) 你可以理解成C#的Thread,我开多一个线程去执行function(){} (JS是单线程的,这点要强调下!) 



4.简单易扩展。(请将所有要执行的方法用_$Async‘包住')
5.易于调试。
缺点
1.build(function(){ }),函数内不支持自定义局部变量,如var a=1;
 如果想使用局部变量,只能:        



2._$Async();必须要以‘;'结尾。
3.build(function(){ }) 函数内不能直接调用外部函数,如  



请使用 



也许大家会好奇,到底如何实现的?又或者为什么不将eval(r)封装起来?

实现原理其实就是分析Build内的函数,然后将它动态的组合、嵌套起来,然后执行。至于eval不封装起来的原因是如果封装起来,将无法使用外部变量,因此必须将它放出来。

3.测试代码及效果


 
 
 
 
 

后台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();
 }
 }

效果图:

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

下载本文
显示全文
专题