Nat*_*ate 10 javascript twitter-bootstrap twitter-bootstrap-3
我没有长时间使用Bootstrap,并且不确定它是否需要在<head>页面构建目的中非异步加载.
Google建议使用此代码异步加载JS文件:
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
我可以bootstrap.min.js这种方式加载,还是应该非异步加载？
Pat*_*ick 26
Bootstrap.js需要运行jquery.如果您希望获得加载异步脚本的好处,那么您可能希望加载jquery(以及可能的其他库)async ...这个问题是你不能保证jquery async在之前完成使用上面的示例代码的bootstrap.我也确定你有自己想要编写的javascript来使用bootstrap.js功能.这意味着更多的依赖.您可以编写逻辑来手动连接依赖项和异步加载,但随着您可能需要包含的脚本数量的增加,这将成为很多工作.
Requirejs是一个为您负责所有这些依赖管理的库,可以异步加载您的文件(并按正确的顺序).该库的另一个好处是优化器,它可以跟踪依赖关系并将它们"烧"成单个(可选缩小的)文件.使用优化器优化"主"js文件(具有页面所需的所有依赖项的文件)后,requireJS可以异步加载该文件.只需要一个脚本包括!
一个例子如下:
/app/main.js:
requirejs.config({
paths: {
jquery: "lib/jquery-1.11.0",
bootstrap: "lib/bootstrap"
},
shim: {
bootstrap: {
deps: ['jquery']
}
}
});
//Define dependencies and pass a callback when dependencies have been loaded
require(["jquery", "bootstrap"], function ($) {
//Bootstrap and jquery are ready to use here
//Access jquery and bootstrap plugins with $ variable
});
在这种情况下,jquery.js和bootstrap.js将存在于/ app/lib下(以及require.js).
在您的HTML中,您将拥有此脚本标记:
<script src="/app/lib/require.js" data-main="/app/main"></script>
这将加载bootstrap和jquery(按正确的顺序),然后将这些模块作为参数传递(只需要jquery/$,因为bootstrap只是jquery上的一个插件)到你的回调函数.
| 归档时间： |
|
| 查看次数： |
11742 次 |
| 最近记录： |