现在有许多成熟的js模块加载器，比如requirejs和seajs等，但是对一些小的项目来说，它们的功能可能太过于“强大”，也许我们只是想要有一个能动态加载js的功能，或许我们只是想装B一下，让自己写出的页面没有一大堆的这样的东西。前面说的两种js加载器都是更强调模块性，也就是更强调js文件的组织和管理，更适用于大的项目。

就像刚刚说的，我只想有一个js文件加载器，我只需提供给它一个js文件的地址就行了的那种呢？那就进入我们的主题了，使用headjs吧。

首先，我想说一下Javascript的装载和执行。通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。于是，如果有多个js文件被引入，那么对于浏览器来说，这些js文件被被串行地载入，并依次执行。 而headjs可以异步地把js文件下载到用户的本地，但是不执行，仅当在我们想要执行的时候去执行 。

基本用法

以下是它的基本用法：

// 最简单的例子，异步加载jshead.js("/path/to/file.js");// 异步加载js，只在js加载成功之后执行后面的函数head.js("/path/to/file.js", function() {});// 并行下载下面的js，并且按顺序加载执行jshead.js("file1.js", "file2.js", ... "fileN.js");// 并行下载js，并且按顺序加载执行js，加载完成后执行后面的函数head.js("file1.js", "file2.js", function() {});// 类似head.js("file1.js", "file2.js","fileN.js");写法不一样而已head.js("file1.js");head.js("file2.js");head.js("file3.js");// 还可以这么写head.js("file1.js").js("file1.js").js("file3.js");

脚本回调

上面的例子说明了最基本的使用，并且回调函数基本和加载放在一起，当我们需要把脚本写在页面底部，而回调函数却在其他地方定义了，不期望在回调函数依赖的脚本还未加载之前执行，我们可以用到head.ready，基本用法如下：

//只有在页面所有head.js加载完成之后才会执行head.ready(function() {});// 简洁的写法如下head(function(){});// 在页面所有head.js加载完成之后才加载file1.jshead.ready("file1.js",function(){});

脚本别名

可以通过给脚本一个别名方便管理维护理解，使用方法如下：

// 按headjs中的脚本顺序，下载并加载里面脚本，在脚本tool加载完成之后执行下面的回调head.ready("tools", function() { // 调用 $(".tip").tooltip();});// 给脚本起别名head.js( {jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"}, {tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"}, {heavy: "http://a.heavy.library/we/dont/want/to/wait/for.js"}, // 别名可选 "http://can.be.mixed/with/unlabeled/files.js");

使用心得

顺便介绍一下小林的一点点使用心得，先把网页全部输出，这时候全部的内容都未依赖脚本，然后再用headjs加载需要的脚本，来使页面动态化，并应用了window.onload事件，防止脚本加载不成功页面一直打转让用户误以为页面还没加载完，下面是详细代码：

<script type="text/javascript" src="http://linjunlong.com/wp-content/themes/L/js/head.min.js" ></script><script type="text/javascript"> window.onload=function() { head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", function() { }); }</script>

这样做即使无法加载jquery等其他脚本也不会影响网页的使用

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持！