何谓安需装载?
脚本程序一般都是下载后执行 ,当脚本库非常庞大时,一次性下载起来非常费时,传统的解决方式是,按功能模块把脚本写在不同的文件中,页面上手动加入script标签装载指定内容,但 是这有一些缺点,类库的使用者需要知道没个脚本之间的关系,顺序要求等等,而不可能要求每个类库使用者都对其非常熟悉,出错的可能性很大。于是很多框架开 始支持导入指令,想使用什么一个导入函数就完了,不必一堆堆的script文件,不用小心翼翼的关注着他们的依赖关系。
安需装载可分如下三种模式:
-
即时同步按需装载(阻塞,JSI、JSVM、dojo)。
最简单的按需装载实现,通过XMLHttpRequest同步装载脚本文件实现。问题是,浏览器使用这种方式同步获取资源时将导致浏览器阻塞:停止响应用户事件、停止页面重画操作。所以,虽然编程最为简单,但是用户体验最差。
-
异步按需装载(无阻塞,JSI2.0+)。
异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。
-
延迟同步按需装载(无阻塞,JSI2.0+)。
JSI通过动态预装载功能实现的一种同步获取资源的方法,虽然也是同步,但没有阻塞,可以算时兼顾易用性和用户体验的机决方按。缺点时有一定延迟,当前脚本标签中不可用。
使用方法(JSI示例)
以一个代码语法着色程序为例:
类库位置:example/
codedecorator/code.js
页面位置:example/xxx.html
-
即时同步按需装载
js 代码
-
$import("example.codedecorator.Code");
-
- var code1 = new Code();
- code1.id = "libCode";
- code1.decorate();
-
异步按需装载
js 代码
-
$import("example.codedecorator.Code",function(Code){
- var code1 = new Code();
- code1.id = "libCode";
- code1.decorate();
- })
-
延迟同步按需装载(无阻塞,JSI2.0+)。
xml 代码
- <script>"../scripts/boot.js"><\/script>
- <script>
-
$import("example.codedecorator.Code",true);
- <\/script>
-
- <script>
- var code1 = new Code();
- code1.id = "libCode";
- code1.decorate();
- <\/script>
示例说明:
下载后最好能放到一个能受到网速限制的服务器上,只有这样才能看到阻塞的问题。
第一次发布仅再ff上测试通过。
第二次发布修正ie上的错误。
第三次发布修正opera上的错误。
在线测试
http://jsintegration.sourceforge.net/example/code.html
http://www.xidea.org/project/jsi/example/code.html
参考:
JSI 导入函数: function $import(path, callbackOrLazyLoad, target )
JSI2 预览版下载:http://groups.google.com/group/jsier/files
分享到:
相关推荐
于是我在JQ懒加载控件上进行一些改进,改进以后的最大的特点就是调用方便,项目中不需要什么太多更改,而且JS文件也不大。(泡泡网工!转载注明出处,谢谢) 1.给泡泡网开发控件,本来想直接用JQ的延迟控件,但是JQ...
在使用jetty时,如果修改html 或者CSS、JS等代码,发现只要被浏览器加载过的文件,都会被锁住,修改之后无法保存。附件文档就是教你怎么修改这个问题。绝对亲自调试,不是从网上转载
有些网页数据是由js动态生成的,一般我们抓包可以看出真正的数据实体是由哪一个异步请求获取到的,但是获取数据的请求链接也可能由其他js产生,这个时候我们希望直接拿到js加载后的最终网页数据。 解决方法: ...
├easyloader.js:easyui组件加载器(easyui提供了2种组件加载方式,这就是其中一种,当使用该方式的时候可以不必引入jquery.easyui.min.js文件,具体用法请参看api文档。) │ ├jquery.easyui.min.js:easyui的...
使用启用的通过库转译所有JavaScript文件。 项目支持类型注释 在测试中使用实验性ES7代码 组件之间的工作流和通信是使用建立的, 是稍微Flux范例。 单元测试由提供。 将Semantic-UI框架与React组件一起使用( ...
将外部DLL文件编译入ActiveX资源(res),运行时再将DLL释放到指定位置,供ActiveX调用,特别注意:DLL或EXE不能加壳,编译的不要做任何改动,否则IE环境下无法加载。 内附完整JAVASCRIPT与ActiveX互通消息的HTML...
weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条件,音乐随机选择,背景图片,图片预加载,音乐预加载,天气...
13、JS提取到单独的文件中 14、解决首页数据加载的异常 15、实现关注的功能 日期:2011-12-15 1.调整代码错误,数据库连接池爆满 2.抓取页面地址错误,优酷视频地址无法获取问题. 主要功能: 简单调用外链,输入地址...
■ 主题大部分功能可在主题设置中加以控制,但另有少部分功能,需手动修改模版文件才能正常使用,所以建议使用notepad++或EmEditor文本编辑 软件修改模版后,通过FTP软件上传覆盖原文件,或者在Wordpress后台外观→...
转载预览Acrou:特色 :crown: 页面级缓存,浏览器前进后退不刷新秒加载(mac用户使用触控板体验更佳) :card_index_dividers: 多盘切换 :locked_with_key: Http Basic Auth :artist_palette: 网格视图模式(文件预览...
帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱,拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个...