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


Posted in Javascript onNovember 29, 2016

现在有许多成熟的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协议,修改下它应该也是没问题的吧。?潘坑肿案吒凰Я耍?涫邓凳切薷模?共蝗缢凳窃黾蛹付未?虢?ィ??壹釉匾览档裙δ芡耆?怯?eadjs的api实现的。

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

另一个是use(name,callback),这个方法用来使用模块。name是用add()方法定义的模块名,callback是该模块已经加载完成后调用的回调函数。

于是我们就可以这样来使用headjs了:

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦 
});

如果模块很多,则模块的定义代码可以单独写在一个文件里,并且引入了headjs的后,就立即加载该模块定义文件。这个过程可以很简单的像这样来实现:

<script src="head.js" init="init"></script>

看到那个init属性没有,我把它叫做初始化属性,init的值表示文件名,例如上面init就代表与headjs同目录的init.js这个文件。所谓的初始化就是在使用use()之前,init文件一定是已经加载好了的。所以可以把模块的定义写在初始化文件中。

<script src="head.js" init="init" main="main"></script>

尼玛,这是要闹哪样啊,怎么又多了个main属性,好吧,我承认是看到别人有这个东西于是手贱也跟风弄了一个。这个main属性代表的是模块名,就是head.js与init.js文件都加载完成后,就会自动执行main属性指定的模块(当然要先在init中定义该模块)。所以有了这两个东东后,我们就可以在页面没有一句js代码的情况下(除了引入headjs那段标签),执行很复杂的代码了。

还有一个要说明的地方,就是模块文件的存放位置。模块文件应该和head.js存放在同一个目录,比如head.add(‘a','a.js'),这里的a.js的路径是和head.js相同的,就是说模块文件的路径是相对于head.js存放的路径的,而且只可以往下走,不可以往上走,比如:

head.add(‘a','a/a.js')//正确

head.add(‘a','../a.js')//错误,不能往上定位

最后,放上修改过后的head.js源文件,不是压缩版,里面改的地方都有注释。

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
巧用数组制作图片切换js代码
Nov 29 #Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 #Javascript
文件上传插件SWFUpload的使用指南
Nov 29 #Javascript
jquery结合html实现中英文页面切换
Nov 29 #Javascript
基于Three.js插件制作360度全景图
Nov 29 #Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
You might like
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php验证手机号码
2015/11/11 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
vue实现简单loading进度条
2018/06/06 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python通过字典映射函数实现switch
2020/11/06 Python
汽车工程专业应届生求职信
2013/10/19 职场文书
业务员岗位职责范本
2013/12/15 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
诚信考试倡议书
2014/04/15 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
员工离职感谢信
2015/01/22 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL