从 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; }
参考资料
从 bootup.js 学习加载脚本等资源的更多相关文章
- JS 动态加载脚本 执行回调
JS 动态加载脚本 执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...
- JS 动态加载脚本 执行回调_转
关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...
- js动态加载脚本
最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...
- JS 动态加载脚本的4种方法
有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...
- 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)
文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...
- js与jquery的动态加载脚本文件
jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...
随机推荐
- [置顶] android socket 聊天实现与调试
网上很多基于Socket的聊天实现都是不完整的... 结合自己的经验给大家分享一下,完整代码可以在GitHub里获取https://github.com/zz7zz7zz/android-socket ...
- poj1321 棋盘问题(深搜dfs)
转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:id=1321">http://poj.org/prob ...
- php简单浏览目录内容
<?php $dir = dirname(__FILE__); $open_dir = opendir($dir); echo "<table border=1 borderCo ...
- Revit API创建标高,单位转换
一业内朋友让我写个快速创建标高的插件. ; ; i <= iNum; i++) { Level level = d ...
- 在ASP.NET MVC中使用Log4Net记录异常日志,出错时导向到静态页
本篇体验在ASP.NET MVC 4中使用Log4Net记录日志. 通过NuGet安装Log4Net. 需求是:当出错时导向到Error.html静态页面,Log4Net记录错误信息. 大致的思路是: ...
- (Delphi) Using the Disk Cache 使用磁盘缓存
The Chilkat Spider component has disk caching capabilities. To setup a disk cache, create a new dire ...
- android编译错误“OnClickListener cannot be resolved to a type”
在android代码编译时可能会出现如下错误: 部分代码: <span style="font-size:18px;">public void onCreate(Bun ...
- C#编程(四十五)----------格式字符串
格式字符串 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) 案例: string str=string.Format("{0:C}",0.2); ...
- Swift - 绘制背景线条
Swift - 绘制背景线条 效果 源码 // // BackgroundLineView.swift // LineBackgroundView // // Created by YouXianMi ...
- 在ubuntu中搜索文件或文件夹的方法
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/dcrmg/article/details/78000961 1. whereis+文件名 用于程序名的搜索 ...