脚本安需导入(装载)的三种模式的对比
2007-03-31 20:16
197 查看
何谓安需装载?
脚本程序一般都是下载后执行,当脚本库非常庞大时,一次性下载起来非常费时,传统的解决方式是,按功能模块把脚本写在不同的文件中,页面上手动加入 script标签装载指定内容,但是这有一些缺点,类库的使用者需要知道没个脚本之间的关系,顺序要求等等,而不可能要求每个类库使用者都对其非常熟悉,出错的可能性很大。于是很多框架开始支持导入指令,想使用什么一个导入函数就完了,不必一堆堆的script文件,不用小心翼翼的关注着他们的依赖关系。安需装载可分如下三种模式:
即时同步按需装载 (阻塞,JSI、JSVM、dojo)。
最简单的按需装载实现,通过XMLHttpRequest同步装载脚本文件实现。问题是,浏览器使用这种方式同步获取资源时将导致浏览器阻塞:停止响应用户事件、停止页面重画操作。所以,虽然编程最为简单,但是用户体验最差。
异步按需装载(无阻塞,JSI2.0+)。
异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。
延迟同步按需装载(无阻塞,JSI2.0+)。
JSI通过动态预装载功能实现的一种同步获取资源的方法,虽然也是同步,但没有阻塞,可以算时兼顾易用性和用户体验的解决方按。缺点时有一定延迟,当前脚本标签中不可用。
使用方法(JSI示例)
以一个代码语法着色程序为例:类库位置:org/xidea/example/code/code.js
页面位置:example/xxx.html
即时同步按需装载
import("org.xidea.example.code.Code"); var code1 = new Code(); code1.id = "libCode"; code1.decorate(); |
$import("org.xidea.example.code.Code",function(Code){ var code1 = new Code(); code1.id = "libCode"; code1.decorate(); }) |
延迟同步按需装载(无阻塞,JSI2.0+)。
<script>"../scripts/boot.js"></script> <script> $import("org.xidea.example.code.Code",true); </script> <script> var code1 = new Code(); code1.id = "pageCode"; code1.decorate(); </script> |
测试示例:
地址:http://jsi.xidea.org/example/code.html示例都是jsi的默认示例,可以下载到本地运行,下载后最好能放到一个能受到网速限制的服务器上,只有这样才能看到阻塞的问题。
参考:
JSI 导入函数: function $import(path, callbackOrLazyLoad, target )JSI2 预览版下载:http://groups.google.com/group/jsier/files
相关文章推荐
- 脚本安需导入(装载)的三种模式的对比
- 脚本安需导入(装载)的三种模式的对比
- 通过SQL脚本导入数据到不同数据库避免重复导入三种方式
- LVS三种工作模式介绍对比和十种调度算法介绍
- 单例模式在iOS中的应用——三种创建单例方法对比
- 设计模式必知必会:三种工厂方法之对比
- VMware下网络配置三种模式对比(桥接模式|主机模式|网络地址转换)
- 通过SQL脚本导入数据到不同数据库避免重复导入三种方式
- LB负载均衡中LVS搭建三种模式 脚本中8种调度算法
- (转载)VMware下网络配置三种模式对比(桥接模式,主机模式,网络地址转换)
- VMware下网络配置三种模式对比(桥接模式,主机模式,网络地址转换)
- VMware下网络配置三种模式对比(桥接模式,主机模式,网络地址转换)
- linux virtual server 三种模式对比
- 三种工厂模式 和 策略模式 对比
- 网络配置三种模式对比(桥接模式,主机模式,网络地址转换)
- OpenGL 三种滤波模式 效果对比
- EXP常规模式、EXP直接路径模式和EXPDP三种方式导出的性能对比
- 【传统网络】交换机三种端口模式Access、Hybrid和Trunk的报文处理对比
- 云计算的三种服务模式:IaaS,PaaS和SaaS
- Mysql binlog 日志的三种模式