从 bootup.js 学习加载脚本等资源

本文内容

• 如何使用
• 示例
• 参考资料

本文的目的在于，通过 bootup.js 的源代码，认识如何从客户端加载服务器的文件，特别是 JavaScript 文件，注入到页面，并存储在本地缓存，以扩展对 JavaScript 的认识，这对你构建自己的 JavaScript 很有意义。尤其是现在的 Web 应用程序，JavaScript 代码越来越多，一个页面有十万行代码都不奇怪，JavaScript 代码不再可能写在一个文件中，而这些 JavaScript 文件加载的顺序至关重要。现在的 Ajax 框架都有其加载自己资源的代码，可说是“集大成者”，从其中“挖掘”特定功能的代码不容易。

缓存和加载静态文件。这使得管理 Javascript 及其他离线使用的文件，更容易，或是只是为了提高你 Web 应用程序的启动时间。

如何使用

---

简单地通过一个要加载的文件数组来实例化一个新的 BootUp 对象。

    new BootUp(files, options);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

其中：

• 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"]);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

该代码以你指定的顺序加载 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

        }

    }

);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

如果下载任何一个文件出现问题，就会调用 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.");

        }

    }

);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

高级文件加载

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);

    }

}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

参考资料

---

• github bootup.js

 

下载 Demo