前言
最近项目有一个需求，如下： 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