动态加载范围库

Question

正如此处建议< /a> 并在此处举例说明， rangy 库可用于突出显示选定的文本。

我无法直接访问该页面，我想突出显示一些文本，因此我尝试动态加载它：

var HLScripts=new Array(
'lib/log4javascript.js',
'src/js/core/core.js',
'src/js/core/dom.js',
'src/js/core/domrange.js',
'src/js/core/wrappedrange.js',
'src/js/core/wrappedselection.js',
'src/js/modules/rangy-serializer.js',
'src/js/modules/rangy-cssclassapplier.js',
'src/js/modules/rangy-selectionsaverestore.js',
'src/js/modules/rangy-highlighter.js'
)

for(var i=0; i<HLScripts.length; i++) {
var e=document.createElement('script');
e.type='text/javascript';
e.src='http://rangy.googlecode.com/svn/trunk/'+HLScripts[i];
document.body.appendChild(e);
}

但是，当我调用 init 方法时 rangy.init(); 我得到rangy is undefined。 我该如何纠正这个错误？

Answer 1

首先，我建议下载 Rangy 的发布版本并将其放在您的服务器上，而不是直接链接到 SVN 主干中的文件，这些文件不如正确的版本稳定，并且充满了日志记录调用，这会增加代码大小会损害性能并且需要 log4javascript，而 log4javascript 本身就相当庞大。

其次，像这样动态加载脚本将异步加载它们，这意味着单个脚本可能会在它所依赖的先前脚本完成加载之前完成加载并执行。脚本加载和正确获取依赖项是一个有点棘手的领域。我不是这个领域的专家，但就其价值而言，我建议使用脚本加载器，例如 LABjs去做它。