用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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
分页栏的web标准实现
Nov 01 Javascript
Javascript高级技巧分享
Feb 25 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
js自定义input文件上传样式
Oct 26 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python pip使用超时问题解决方案
2020/08/03 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
投标单位介绍信
2014/01/09 职场文书
销售经理岗位职责
2014/03/16 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
英语投诉信范文
2015/07/03 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android