何谓安需装载？ 脚本程序一般都是下载后执行，当脚本库非常庞大时，一次性下载起来非常费时，传统的解决方式是，按功能模块把脚本写在不同的文件中，页面上手动加入 script标签装载指定内容，但是这有一些缺点，类库的使用者需要知道没个脚本之间的关系，顺序要求等等，而不可能要求每个类库使用者都对其非常熟悉，出错的可能性很大。于是很多框架开始支持导入指令，想使用什么一个导入函数就完了，不必一堆堆的script文件，不用小心翼翼的关注着他们的依赖关系。 安需装载的困境： 早期安需装载（即时同步按需装载）有一个致命的弱点，浏览器阻塞问题。当按需装载某些类库时，通常通过XMLHttpRequest同步装载脚本文件实现，这种情况下，在资源下载完成之前，浏览器将停止响应用户事件、停止页面重画操作。如果网速很慢，这段时间将非常让人讨厌，就像是死机似的。 以前的解决办法是，将常用类库资源直接打包到框架文件中，而按需导入就成了一个宣传的幌子，没有太多实际的价值。 安需装载可分如下三种模式： l 即时同步按需装载 （阻塞，JSI、JSVM、dojo）。 最简单的按需装载实现，通过XMLHttpRequest同步装载脚本文件实现。问题是，浏览器使用这种方式同步获取资源时将导致浏览器阻塞：停止响应用户事件、停止页面重画操作。所以，虽然编程最为简单，但是用户体验最差。 2 异步按需装载（无阻塞，JSI2.0+）。 异步导入，不必多做解释，用户体验好，但是因为其异步特征，处理起来比较麻烦。 3 延迟同步按需装载（无阻塞，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://jsintegration.sourceforge.net/example/code.html http://www.xidea.org/project/jsi/example/code.html 示例都是jsi的默认示例，可以下载到本地运行，下载后最好能放到一个能受到网速限制的服务器上，只有这样才能看到阻塞的问题。 参考： JSI 导入函数： function $import(path, callbackOrLazyLoad, target ) JSI2 预览版下载：http://groups.google.com/group/jsier/files

　　推荐阅读

　　firefox中用javascript实现鼠标位置的定位

/** * 取得鼠标坐标 * @return Position */ function getMouseLocation(){ if(ns4||ns6){ mouseX = e.pageX; mouseY = e.pageY; } else{ mouseX = event.x + document.body.scrollLeft; mouseY = event>>>详细阅读

本文标题：脚本安需导入(装载)的三种模式的对比

地址：http://www.17bianji.com/kaifa2/JS/30357.html

 1/2    1