[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没有绝对的好差，只看你使用哪一种比较方便而已，这篇文章中很多问题没有细细说明，如果有疑问可以联系，相互探讨。

QQ： 1321518080