用headjs来管理和加载js 提高网站加载速度

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

就像刚刚说的，我只想有一个js文件加载器，我只需提供给它一个js文件的地址就行了的那种呢？那就进入我们的主题了，使用headjs吧。headjs其实是一整套的工具，但我只想介绍的是它其中的Javascript Loader功能。以下是它的基本用法：

head.js("/path/to/file.js");

最简单的用法，提供一个js的文件的地址给它作为参数，然后它就会默默的在背后进行无阻塞的加载了，至于什么时候加载完可用了，谁也不知道。

head.js("/path/to/file.js", function() { /*js加载完成*/});

最基本的用法，除了提供一个地址参数外，还提供一个回调函数作为第二个参数。在js加载完成后，回调用回调函数，你可以把依赖该js的代码写在回调函数里。

head.js("file1.js", "file2.js", ... "fileN.js");

提供多个js文件地址，这些js会并行的加载，但会按照参数给定的先后顺序执行这些文件，例如即使file2.js比file1.js先加载完成，但它还会一直等到在file1.js加载和执行完后再执行。

head.js("file1.js", "file2.js", function() { });

并行加载多个js,并按参数顺序执行，所有js准备完成时，执行回调函数。

head.js("file1.js");head.js("file2.js");head.js("file3.js");

多个js并行加载，并且谁先加载完就先执行谁

head.js("file1.js").js("file1.js").js("file3.js");

上一种方法的链式调用法

这样的话用headjs来加载js文件基本都够用了，而且还能处理依赖关系。当是如果你继续装B,弄一个网站，巴不得什么特效都用上，这里找一个jquery插件，那里再找一个，总之就是弄非常多的文件，其中又有复杂的依赖关系，那该肿么办？这还用问吗，以上的那几个用法完全能解决。但转念一想，既然装B那就一装到底吧，现在不是流行模块什么的吧，那咱也整个模块吧，但不是像commonJS说的那么复杂，就是定义一个模块，然后规定这个模块是有那几个js文件组成的，其中的依赖关系又如何等等。那就动手吧，headjs使用的是MTI协议，修改下它应该也是没问题的吧。屌丝又装高富帅了，其实说是修改，倒不如说是增加几段代码进去，而且加载依赖等功能完全是用headjs的api实现的。

这里，我给headjs的新增了两个方法，一个是add(name,file,preload)添加模块，参数name是模块名称，file是要用到的js文件地址,如果有多个文件，并且存在依赖关系，则file可以是一个数组，这个数组的里元素就是用到的文件地址，并且按数组元素的顺序进行依赖。第三个参数preload用指定是否预加载模块文件，如果为false,则在使用该模块的时候才会加载文件，为true时则在定义模块时就会立即加载所用到的文件，默认为false