如何使用headjs来管理和异步加载js


Posted in Javascript onNovember 29, 2016

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

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

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

基本用法

以下是它的基本用法:

// 最简单的例子,异步加载js
head.js("/path/to/file.js");
// 异步加载js,只在js加载成功之后执行后面的函数
head.js("/path/to/file.js", function() {
});
// 并行下载下面的js,并且按顺序加载执行js
head.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.js
head.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等其他脚本也不会影响网页的使用

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

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
jquery图片切换插件
Mar 16 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
JS针对Array的各种操作汇总
Nov 29 #Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 #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
You might like
Zerg剧情介绍
2020/03/14 星际争霸
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
python 元组和列表的区别
2020/12/30 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Java实现注册登录跳转
2022/06/16 Java/Android