本文内容

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

本文的目的在于,通过 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; }

 

参考资料


 

下载 Demo

从 bootup.js 学习加载脚本等资源的更多相关文章

  1. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

  2. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

  3. js动态加载脚本

    最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...

  4. JS 动态加载脚本的4种方法

    有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...

  5. 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  6. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  7. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  8. 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)

    文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...

  9. js与jquery的动态加载脚本文件

    jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...

随机推荐

  1. [置顶] android socket 聊天实现与调试

    网上很多基于Socket的聊天实现都是不完整的... 结合自己的经验给大家分享一下,完整代码可以在GitHub里获取https://github.com/zz7zz7zz/android-socket ...

  2. poj1321 棋盘问题(深搜dfs)

    转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:id=1321">http://poj.org/prob ...

  3. php简单浏览目录内容

    <?php $dir = dirname(__FILE__); $open_dir = opendir($dir); echo "<table border=1 borderCo ...

  4. Revit API创建标高,单位转换

    一业内朋友让我写个快速创建标高的插件. ;             ; i <= iNum; i++)             {                 Level level = d ...

  5. 在ASP.NET MVC中使用Log4Net记录异常日志,出错时导向到静态页

    本篇体验在ASP.NET MVC 4中使用Log4Net记录日志. 通过NuGet安装Log4Net. 需求是:当出错时导向到Error.html静态页面,Log4Net记录错误信息. 大致的思路是: ...

  6. (Delphi) Using the Disk Cache 使用磁盘缓存

    The Chilkat Spider component has disk caching capabilities. To setup a disk cache, create a new dire ...

  7. android编译错误“OnClickListener cannot be resolved to a type”

    在android代码编译时可能会出现如下错误: 部分代码: <span style="font-size:18px;">public void onCreate(Bun ...

  8. C#编程(四十五)----------格式字符串

    格式字符串 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) 案例: string str=string.Format("{0:C}",0.2); ...

  9. Swift - 绘制背景线条

    Swift - 绘制背景线条 效果 源码 // // BackgroundLineView.swift // LineBackgroundView // // Created by YouXianMi ...

  10. 在ubuntu中搜索文件或文件夹的方法

    版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/dcrmg/article/details/78000961 1. whereis+文件名 用于程序名的搜索 ...