随笔-57  评论-129  文章-0  trackbacks-0

何谓安需装载?

脚本程序一般都是下载后执行 ,当脚本库非常庞大时,一次性下载起来非常费时,传统的解决方式是,按功能模块把脚本写在不同的文件中,页面上手动加入script标签装载指定内容,但 是这有一些缺点,类库的使用者需要知道没个脚本之间的关系,顺序要求等等,而不可能要求每个类库使用者都对其非常熟悉,出错的可能性很大。于是很多框架开 始支持导入指令,想使用什么一个导入函数就完了,不必一堆堆的script文件,不用小心翼翼的关注着他们的依赖关系。

安需装载可分如下三种模式:

  • 即时同步按需装载阻塞,JSI、JSVM、dojo)
    最简单的按需装载实现,通过XMLHttpRequest同步装载脚本文件实现。问题是,浏览器使用这种方式同步获取资源时将导致浏览器阻塞:停止响应用户事件、停止页面重画操作。所以,虽然编程最为简单,但是用户体验最差。
  • 异步装载无阻塞,JSI2.0+)。
    异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。
  • 延迟同步按需装载无阻塞,JSI2.0+)
    JSI通过动态预装载功能实现的一种同步获取资源的方法,虽然也是同步,但没有阻塞,可以算时兼顾易用性和用户体验的机决方按。缺点时
    有一定延迟,当前脚本标签中不可用。

使用方法(JSI示例)

以一个代码语法着色程序为例:
类库位置:example/codedecorator/code.js
页面位置:example/xxx.html
  • 即时同步按需装载
    $import("example.codedecorator.Code");

    var code1 = new Code();
    code1.id 
    = "libCode";
    code1.decorate(); 

  • 异步装载
    $import("example.codedecorator.Code",function(Code){
     
    var code1 = new Code();
     code1.id 
    = "libCode";
     code1.decorate();
    }) 

  • 延迟同步按需装载无阻塞,JSI2.0+)
    <script>"../scripts/boot.js"></script>
    <script>
    $import(
    "example.codedecorator.Code",true);
    </script>

    <script>
    var code1 = new Code();
    code1.id 
    = "libCode";
    code1.decorate();
    </script>

示例说明:

在线测试

http://jsintegration.sourceforge.net/example/code.html

http://www.xidea.org/project/jsi/example/code.html

参考:

JSI 导入函数: function $import(path, callbackOrLazyLoad, target )

posted on 2007-06-25 09:24 金大为 阅读(608) 评论(0)  编辑  收藏 所属分类: JSIJavaScript

只有注册用户登录后才能发表评论。


网站导航: