js加载脚
[Web] 被遗忘的知识点 - JavaScript加载管理最佳实践
前言
最近项目有一个需求，如下： HTML页面一般来说可以由CSS、JavaScript、Dom(通常为Div)以及一些JS初始化页面函数组成，现在需要将一个页面拆分为CSS、JavaScript、Dom和JS init函数四部分，通过从服务端分别获取这四部分，经过拼凑后，渲染出完整的页面。这里面CSS、DOM节点比较好处理，但是JavaScript的加载以及JS init的执行，就要考虑到很多问题。如果有谁遇到类似的问题，可以讨论下，毕竟想要将这个做成一个完善的框架会遇到很多问题。这篇文章，我将介绍一些加载管理JavaScript的一些实践，希望对你有所帮助。
原生的JavaScript实现
此处为不希望借助框架的朋友们，提供一种方案。
function loadScript(url, callback) {
var script = document.createElement("script" )
script.type = "text/javascript" ;
if (script.readyState) { // IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete" ) {
script.onreadystatechange = null ;
callback();
}
};
} else { // Others
script.onload = function () {
callback();
};
}
script.src = url;
document.getElementsByTagName( "head")[0 ].appendChild(script);
}
LAB实现
$LAB.setOptions({
AlwaysPreserveOrder: true
})
.script( "script1.js") // script1, script2, script3, and script4 *DO* depend on each
.script("script2.js") // other, and will execute serially in order after all 4 have have
.script("script3.js") // loaded in parallel
.script("script4.js" )
.wait( function () {
initFunction();
});
$LAB.setOptions({
AllowDuplicates: true
})
.script( "script1.js" ).wait()
.script( "script2.js" )
.script( "script3.js" ).wait()
.script( "script4.js" )
.wait( function () {
initFunction();
});
RequireJS实现
( function (require) {
var urlArgs = ''; // used for browser cache
if (CNBlogs.isProduct) {
urlArgs = 'v=1' ;
} else {
urlArgs = "dev=" + ( new Date()).getTime();
}
require.config({
baseUrl: '/scripts', // By default load any module IDs from baseUrl
urlArgs: urlArgs,
paths: {
'hello1': 'hello1.min' ,
'hello2': '/document/11111-11100-010101/latest?' // append ? to avoid .js extension
},
shim: {
'hello3': ['hello1', 'hello2' ],
'hello4': ['hello3', 'bootstrap' ]
},
waitSeconds: 200
});
})(require);
require([ 'jqueryui', 'hello4'], function () {
initFunction();
});
参考文档
LABJS官网文档： http://labjs.com/documentation.php
RequireJS官网文档： http://requirejs.org/docs/api.html
后续
LABJS和RequireJS没有绝对的好差，只看你使用哪一种比较方便而已，这篇文章中很多问题没有细细说明，如果有疑问可以联系，相互探讨。
js动态加载脚本之同步加载
首先在一个固定文件夹下创建一个package.js，打开后在里面写一个方法functionOne，代码如下：
function functionOne(){
alert( "成功加载" );
}
后面的html文件都创建在同一个目录下。
方法一：直接document.write
在同一个文件夹下面创建一个function1.html，代码如下：
< html >
< head >
< title ></ title >
< script type ="text/javascript" >
function init()
{
// 加载js脚本
document.write( " <script src='package.js'><\/script> " );
// 加载一个按钮
document.write( " <input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/> " );
// 如果马上使用会找不到，因为还没有加载进来，此处会报错
functionOne();
}
function operation()
{
// 可以运行，显示“成功加载”
functionOne();
}
</ script >
</ head >
< body >
< input type ="button" value ="初始化加载" onclick ="init()" />
</ body >
</ html >
通过document.write的方式可以往页面写入脚本，如代码所示，点击按钮“初始化加载”后可以加载package.js文件，但是立即运行里面的方法functionOne会找不到此方法，报告错误，而点击第二个按钮（通过document.write动态创建的“测试运行效果”）发现可以执行，因为这种方式是异步加载（一边继续执行后面的代码，一边额外开一个线程执行需要加载的脚本），并且document.write会重写界面，明显不实用。
方法二：动态改变已有script的src属性
在同一个文件夹下面创建一个function2.html，代码如下：
< html >
< head >
< title ></ title >
< script type ="text/javascript" id ="yy" src ="" ></ script >
< script type ="text/javascript" >
function init()
{
yy.src = " package.js " ;
// 如果马上使用会找不到，因为还没有加载进来，此处会报错
functionOne();
}
function operation()
{
// 可以运行，显示“成功加载”
functionOne();
}
</ script >
</ head >
< body >
< input type ="button" value ="测试按钮" onclick ="init()" />
< input type ="button" value ="测试运行效果" onclick ="operation()" />
</ body >
</ html >
此种方法的好处在于不会改变界面元素，不至于重写界面元素，但是同样是异步加载，会有同样的问题。
方法三：动态创建script元素（异步）
在同一个文件夹下面创建一个function3.html，代码如下：
< html >
< head >
< title ></ title >
< script type ="text/javascript" >
function init()
{
var myScript = document.createElement( " script " );
myScript.type = " text/javascript " ;
myScript.src = " package.js " ;
document.body.appendChild(myScript);
// 如果马上使用会找不到，因为还没有加载进来
functionOne();
}
function operation()
{
// 可以运行，显示“成功加载”
functionOne();
}
</ script >
</ head >
< body >
< input type ="button" value ="测试按钮" onclick ="init()" />
< input type ="button" value ="测试运行效果" onclick ="operation()" />
</ body >
</ html >
此办法的又是相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载，存在同样的问题。
这三种方法都是异步执行的，所以在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。
不过可以在functionOne前面加一个alert就可以堵塞一下主页面脚本的运行，然后你发现functionOne就可以运行了，不过在项目里面肯定不可能使用这种方法。
其实第三种方法改一点就变成同步加载了。
方法四：动态创建script元素（同步）
在同一个文件夹下面创建一个function4.html，代码如下：
< html >
< head >
< title ></ title >
< script type ="text/javascript" >
function init()
{
var myScript = document.createElement( " script " );
myScript.type = " text/javascript " ;
myScript.appendChild(document.createTextNode( " function functionOne(){alert(\"成功运行\"); } " ));
document.body.appendChild(myScript);
// 此处发现可以运行
functionOne();
}
</ script >
</ head >
< body >
< input type ="button" value ="测试按钮" onclick ="init()" />
</ body >
</ html >
此方法并没有加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码可以正常运行。但是在IE8以及以下的版本中会导致错误。IE将<script>视为一个特殊的元素，不允许DOM访问其子节点。不过可以用<script>元素的text属性来制定js代码，想下面的例子这样：
var myScript= document.createElement("script" );
myScript.type = "text/javascript" ;
myScript.text = "function functionOne(){alert(\"成功运行\"); }" ;
document.body.appendChild(myScript);
// 此处可以运行
functionOne();
经过这样修改之后的代码可以在IE、Firefox、Opera和Safari3及之后版本中运行。Safari3.0之前的版本虽然不能正确地支持text属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari，可以使用下面代码：
var myScript= document.createElement("script" );
myScript.type = "text/javascript" ;
var code = "function functionOne(){alert(\"成功运行\"); }" ;
try {
myScript.appendChild(document.createTextNode(code));
}
catch (ex){
myScript.text = code;
}
document.body.appendChild(myScript);
// 此处发现可以运行
functionOne();
这里，首先尝试标准的DOM文本节点方法，因为除了IE8以及以下，所有浏览器都支持这种方式。 如果这行代码抛出了错误，那么说明是IE8以及以下，于是就必须使用text属性了。整个过程可以用以下函数来表示：
function loadScriptString(code)
{
var myScript= document.createElement("script" );
myScript.type = "text/javascript" ;
try {
myScript.appendChild(document.createTextNode(code));
}
catch (ex){
myScript.text = code;
}
document.body.appendChild(myScript);
}
然后你可以在其他地方使用此方法来加载需要使用的代码。实际上，这样执行代码与在全局作用于中把相同字符串传递给eval()是一样的。但是我们这里只能使用字符串形式的代码，也有局限性，用户一般希望提供的方法形如loadScriptAddress("package.js")的方式，所以我们还需要继续讨论。
方法五：
在同一个文件夹下面创建一个function5.html，代码如下：
< html >
< head >
< title ></ title >
< script type ="text/javascript" >
function init()
{
// 加载package.js文件，设置script的id为yy
ajaxPage( " yy " , " package.js " );
// 此方法为package.js里面的方法，此处执行方法成功
functionOne();
}
function ajaxPage(sId,url)
{
var oXmlHttp = getHttpRequest();
oXmlHttp.onreadystatechange = function ()
{
// 4代表数据发送完毕
if ( oXmlHttp.readyState == 4 )
{
// 0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存
if (oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304 )
{
includeJS(sId,oXmlHttp.responseText);
}
else
{
}
}
}
oXmlHttp.open( " GET " ,url, false );
oXmlHttp.send( null );
}
function getHttpRequest()
{
if (window.ActiveXObject) // IE
{
return new ActiveXObject( " MsXml2.XmlHttp " );
}
else if (window.XMLHttpRequest) // 其他
{
return new XMLHttpRequest();
}
}
function includeJS(sId,source)
{
if ((source != null ) && ( ! document.getElementById(sId)))
{
var myHead = document.getElementsByTagName( " HEAD " ).item( 0 );
var myScript = document.createElement( " script " );
myScript.language = " javascript " ;
myScript.type = " text/javascript " ;
myScript.id = sId;
try {
myScript.appendChild(document.createTextNode(source));
}
catch (ex){
myScript.text = source;
}
myHead.appendChild( myScript );
}
}
</ script >
</ head >
< body >
< input type ="button" value ="测试按钮" onclick ="init()" />
</ body >
</ html >
ActiveXObject只有IE里面才有，其他浏览器大部分支持XMLHttpRequest，通过此办法我们可以实现动态加载脚本了，并且是同步的，而且很方便，但是可惜的是在IE、Firefox、Opera下可以运行，在Safari、Chrome下会出错，错误如下：
这个错误好像是浏览器的问题，但是chrome那么多人使用，不解决这个问题是不行的！不知道有没有大神对于chrome下有别的方式可以实现同步的脚本加载，求教！
标签: js
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息