JS 异步按需载入和异步编程总结
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- 授权: 共同创作2.0
- 作者: trydofor
本文使用了[[a9text => http://a9text.sf.net]]格式.
目标读者为,有一定js基础,并对异步按需载入有需求的人群.
0. 目录
^^^^^^^
[[<=$INDEX]]
1. 为什么异步按需载入
^^^^^^^^^^^^^^^^^^^^^
在web应用上,经常会根据需要来载入不同的JS/CSS/TEXT/HTML等.
在粗放型web开发,被用户体验取代的今天,按需载入也被用来榨干代码中的油水.
之所以我过多的关注按需载入,是因为sourceforge.net的访问速度有点可怜.
而且我一直努力的a9text有太多的area需要实时载入parser和render.
开发和本地使用,使用了XMLHttpRequest同步,但web应用中同步就等于死机
曾经和JSI的金大卫调侃说:知道浏览器厂商,啥时候能改善同步的体验不?
异步按需载入迫在眉睫,但JSI又不适合a9text.
JSI的着眼点在于已知,而a9text在于运行时和线程功能.
尽管老金告诉我JSI2.0瘦身版才5k,代码才500行.
无奈,只能自力更生 ...
2. 如何异步按需载入和异步编程
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
js不支持线程功能,更不用指望sleep和wait等功能.异步编程的不可预测性在js上徒增.
(http://www.neilmix.com/narrativejs/doc/设想不错,大家可以学习下)
挣扎过程中,考虑过timeout和interval,但不是最佳,也不是有效的方法.
解铃还得系令人,着眼点还得回到XMLHttpRequest的使用上来.
为此,a9text废除了a9engine,写了个专一的a9loader,用来提供异步开发的模式.
首先亮相的是a9loader提供了以下2个异步载入和编程的方法.
...........................................................
void A9Loader.asyncImportClass(String clzz)
async import an js and export like java
@param clzz (String) eg:'com.trydofor.a9text.parser.a9text'
void A9Loader.runAfterImport(Function func)
run the func when all class imported
@param func (Function)
...........................................................
asyncImportClass 用来 异步载入/初始化/包隔离/公共化 一个js类
runAfterImport 用来执行所有等待import完毕后的方法.
================== js : example ========================
A9Loader.asyncImportClass('com.trydofor.a9text.parser.a9text');
A9Loader.asyncImportClass('com.trydofor.a9text.render.html.a9text');
A9Loader.runAfterImport(function(){
for(var i=0; i<a9PreText.length;i++){
var a9dom = new A9Dom(null,A9Dom.type.root); //com.trydofor.a9text.A9Dom
a9dom.setText(a9PreText[i]);
a9dom.putInfo(A9Dom.type.root$path,A9Loader.getPagePath());
a9DomHtml[a9dom.getId()] = a9PreHtml[i];
new A9TextParser().parse(a9dom,function(){
new A9TextRender().render(a9dom,function(){
var a9htm = a9dom.getData();
var preHtml = a9DomHtml[a9dom.getId()];
var prePos = bodyHtml.indexOf(preHtml);
var headPos = bodyHtml.lastIndexOf('<',prePos);
var footPos = bodyHtml.indexOf('>',prePos+preHtml.length)+1;
bodyHtml = bodyHtml.substring(0,headPos) + a9htm + bodyHtml.substr(footPos);
if(document.body) document.body.innerHTML="";
document.write(bodyHtml);
document.close();
});
});
}
});
========================================================
上面的代码中,runAfterImport中还间接的调用了runAfterImport.
但结果都是缓存在一个队列中,等待import结束后顺序执行.
实现手法是这样的:
有一个task队列,里面有引用计数和几个队列.
发送一个async request的时候,计数加1,callback的时候,计数减1
同时呼叫一个检查计数的方法.
当最后一个callback执行时,计数等于0,于是开始处理各种队列.
3. 应用范围与不足
^^^^^^^^^^^^^^^^^
本应用属于另类,仅在特殊场合应用或学习使用,
一般的web开发,最好使用script tag或通常的ajax手法.
因为没有使用timeout和interval,框架完全基于一个基本假设,
就是所有async请求都能正常返回,如果其中有一个出现问题,
runAfterImport中排队的方法将永远不被执行.
其中的危险,主要来自浏览器的缓存,网络条件.
异步JS开发,请尽量回避.
希望a9loader和本文对需要的人有帮助.
分享到:
相关推荐
在JavaScript编程中,动态插入脚本是一种常见的技术,用于在页面加载后或者根据某些条件按需加载外部的JavaScript文件。这种技术在处理大型应用、优化页面性能或实现异步加载时非常有用。本文将详细介绍如何让动态...
本WebBrowser编程技术包括Delphi、C#、VC++、VB等编程资料的集合,其中的 实例大多以Delphi为示例讲解,Delphi7 IDE开发环境。 IE_WebBrowser编程技巧 修改WebBrowser的header信息? Delphi查看...
7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 Ajax是正确的选择吗 7.2 为什么Ajax会破坏网站及如何解决 7.2.1 依赖JavaScript生成内容 7.2.2 ...
JQuery是一个轻量级的JavaScript函数库,能够让开发者在网页上快速简单地操作HTML文档添加动画和进行Ajax异步交互,从而提高开发者的编程效率。 在设计静态网页效果时,采用隐藏显示方法实现滑动门效果,采用计时...
AJAX的核心是JavaScript对象XMLHttpRequest,该对象是一种支持异步请求的技术,用户可以使用该对象向服务器提出请求并处理响应,并且还不会影响客户端的信息通信。 ;ASP.NET3.5 和AJAX ASP.NET 3.5之前,ASP.NET自身...
它结合了JavaScript技术、XML、 DOM 等编程技术,可以使得客户端和服务器端交换数据的响应更实时,而不需要每次都重新载入整个页面。 AJAX的工作原理是将JavaScript、XML、DOM等技术组合起来,共同协作发挥各自的...
7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 Ajax是正确的选择吗 7.2 为什么Ajax会破坏网站及如何解决 7.2.1 依赖JavaScript生成内容 7.2.2 ...
7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 Ajax是正确的选择吗 7.2 为什么Ajax会破坏网站及如何解决 7.2.1 依赖JavaScript生成内容 7.2.2 ...
在JavaScript中,Ajax(Asynchronous ...总的来说,理解和掌握如何创建Ajax对象、建立服务器连接、发送请求以及监控请求状态,是进行Ajax编程的基础。通过这些知识点,开发者可以构建出高效、交互性强的Web应用。
Spring 提供了一个全面的编程和配置模型,对服务层的支持包括事务管理、数据访问集成等。它推崇 DI(依赖注入)和 AOP(面向切面编程),并提供了丰富的 MVC(模型-视图-控制器)框架。Spring 还支持多种持久层技术...
总结来说,JavaScript 的模块化通过解决代码组织、复用和作用域隔离等问题,提升了代码质量,简化了项目管理。随着技术的发展,各种模块化方案的出现和改进,使得在JavaScript开发中实现模块化变得越来越简单和高效...
【jQuery 速成教程】是面向初学者的编程教程,旨在快速引导学习者掌握这个流行的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画和Ajax交互等任务,使得前端开发更为高效。通过本教程,你可以深入了解...
在ActionScript和JavaScript之间跨脚本操作 23.14节.本地SQL数据库 23.15节.检测和监控网络连接 23.16节.检测用户是否在线 23.17节.创建系统托盘图标 第二十四章. FlexUnit单元测试(742) 24.1节. 创建应用FlexUnit...
n436 缓存动态载入的用户控件 n44 使用数据源缓存 n441 使用绝对缓存过期策略 n442 使用弹性缓存过期策略 n443 使用ObjectDataSource控件缓存 n444 使用XmlDataSource控件缓存 n445 创建DataSource控件键依赖 n45 ...
10.2.10异步异常事件ErrorEvent、IOErrorEvent、SecurityErrorEvent 218 10.2.11全屏事件FullScreenEvent 219 10.3虚拟键盘示例 220 10.4小结 224 .第11章ActionScript3.0可视对象 225 11.1可视对象类DisplayObject ...
5. 模板和数据绑定:模板和数据绑定在Angular 2.0中得到了深度整合,使得模板编译过程异步化,提升了应用的响应速度。同时,模板指令分为组件指令、装饰指令和模板指令,提供了更多样化的模板操作和复用方式。 6. ...
- 权限按功能划分成颗粒,可以任意配置,例如普通使用者、游客等 - 搜索:支持递归搜索,可选择是否搜索文件内容。 - 增加桌面自定义壁纸。 - 皮肤优化 ok 多色彩支持。 - 应用商店,root用户可以管理应用。安装、...
面向对象的思想方法已经非常流行了,在编程语言(例如java,js)中,都运用面向对象的编程思想。在XML中,就是要将网页也作为一个对象来操作和控制,我们可以建立自己的对象和模板。与对象进行交流,如何命令对象,...