如何使用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与DropDownList 区别分析
Jan 01 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
PHP中基本符号及使用方法
2010/03/23 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
js正则相关知识点专题
2018/05/10 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Django框架中方法的访问和查找
2015/07/15 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python如何实现文本转语音
2016/08/08 Python
安装Python的教程-Windows
2017/07/22 Python
python3处理含有中文的url方法
2018/05/10 Python
python基于http下载视频或音频
2018/06/20 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python groupby 函数 as_index详解
2019/12/16 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
美国电视购物:QVC
2017/02/06 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
电台编导求职信
2014/05/06 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书