从 bootup.js 学习加载脚本等资源
本文内容
- 如何使用
- 示例
- 参考资料
本文的目的在于，通过 bootup.js 的源代码，认识如何从客户端加载服务器的文件，特别是 JavaScript 文件，注入到页面，并存储在本地缓存，以扩展对 JavaScript 的认识，这对你构建自己的 JavaScript 很有意义。尤其是现在的 Web 应用程序，JavaScript 代码越来越多，一个页面有十万行代码都不奇怪，JavaScript 代码不再可能写在一个文件中，而这些 JavaScript 文件加载的顺序至关重要。现在的 Ajax 框架都有其加载自己资源的代码，可说是“集大成者”，从其中“挖掘”特定功能的代码不容易。
缓存和加载静态文件。这使得管理 Javascript 及其他离线使用的文件，更容易，或是只是为了提高你 Web 应用程序的启动时间。
如何使用
简单地通过一个要加载的文件数组来实例化一个新的 BootUp 对象。
new BootUp(files, options);
其中：
- files： 要加载的 URL 数组
- options： 一个对象的字面意义（可选的）
Options
success: function(Object BootUp)
当所有文件已加载成功时的一个回调。
error: function(Object BootUp)
当至少一个文件加载失败时的一个回调。
loaded: function(Object BootUp, Number downloadedCount, Number fileCount, String path, String data)
该回调再一个文件成功下载后将触发。
- downloadedCount 返回目前为止已经下载的项的数量。
- fileCount 返回剩余文件数量。
- path 是文件路径。
- data 是文件内容。
threads: Number
同时下载文件的最大数量。默认为 8。
debug: Boolean
若设置为 true，则向控制台输出日志。
refresh: Boolean
若设置为 true，则删除本地缓存，重新下载所有文件。
Functions
getFile(string)
获得指定文件的内容。
示例
简单示例
使用 Bootup 最简单的方式是制定一个要下载的文件数组。
new BootUp(["jquery.js", "backbone.js", "site.js"]);
该代码以你指定的顺序加载 jQuery、Backbone 和你网站的代码 site.js，并且把它们加载到 localStorage （如果文件可用的话）。下次访问时，将直接从 localStorage 加载。
回调
有三个回调函数，并可指定 options 对象。
当数组中所有指定的文件都已下载，就会调用 success 回调函数，它的执行类似于 window.onload 事件处理。
new BootUp(
["jquery.js", "backbone.js", "site.js"],
{
success: function() {
init();
// call the init function if specified somewhere
}
}
);
如果下载任何一个文件出现问题，就会调用 error 回调函数。注意，但是，如果 localStorage 不可用，或早已过期，则不调用该回调函数。这些由 Bootup 默默地处理，你不会有任何感觉。
new BootUp(
["jquery.js", "backbone.js", "site.js"],
{
error: function() {
alert("There was an error loading the files. Please try again later.");
}
}
);
loaded 回调函数用来指示所有文件的下载进度，当一个文件完成下载时，就会被调用。该回调函数为你提供已经下载的文件数量，文件总数量，甚至是，如果需要的话，最后下载文件的内容。
<div id="Progress"></div>
<script>
new BootUp(
["jquery.js", "backbone.js", "site.js"],
{
loaded: function(obj, current, maximum) {
document.getElementById("Progress").innerText = current + " of " + maximum + " downloaded...";
}
}
);
</script>
高级文件加载
BootUp 不只是加载 Javascript 文件 - 它能加载任何文件，并存储在 localStorage。当它把 JavaScript 自动注入到页面时，你必须使用 getFile 函数来获得文件。
var cachedFiles = new BootUp(
["jquery.js", "main_template.html"],
{
success: function() {
init();
}
}
);
function init() {
// we have a reference to the BootUp object in cachedFiles
var source = cachedFiles.getFile("main_template.html");
// you must use the exact file name that you used to get the file
// otherwise it will return null
// we now have the contents of main_template.html in our source variable
if (source) {
$("body").append(source);
}
}
参考资料