如何使用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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
js漂浮广告实现代码
Aug 15 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue实现标签云效果的示例
Nov 09 Javascript
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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php操作xml
2013/10/27 PHP
PHP可变函数学习小结
2015/11/29 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
Node.js编码规范
2014/07/14 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
什么是Remote Module
2016/06/10 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
综治宣传月活动总结
2014/04/28 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫