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

 更新时间:2016年11月29日 16:48:54   作者:小林博客  
本文主要介绍如何使用headjs来管理和异步加载js,提高页面的加载速度,需要的朋友可以参考下

现在有许多成熟的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实现简易的计算器功能

    这篇文章主要为大家详细介绍了javascript实现简易的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • js实现电灯开关效果

    js实现电灯开关效果

    这篇文章主要为大家详细介绍了js实现电灯开关效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • CascadeView级联组件实现思路详解(分离思想和单链表)

    CascadeView级联组件实现思路详解(分离思想和单链表)

    本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图
    2016-04-04
  • 收集前端面试题之url、href、src

    收集前端面试题之url、href、src

    本文给大家分享小编日常收集整理的关于前端面试题之url、href、src的语法规则及基本概念,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-03-03
  • Js+php实现异步拖拽上传文件

    Js+php实现异步拖拽上传文件

    本文给大家分享的是使用php结合js实现异步拖拽上传文件的代码,及示例,有需要的小伙伴可以参考下。
    2015-06-06
  • JS中的多态实例详解

    JS中的多态实例详解

    本文通过实例代码很详细的给大家介绍了js中的多态,感兴趣的朋友一起看看吧
    2017-10-10
  • 微信小程序textarea层级过高的解决方法

    微信小程序textarea层级过高的解决方法

    这篇文章主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • JavaScript中的ubound函数使用实例

    JavaScript中的ubound函数使用实例

    这篇文章主要介绍了JavaScript中的ubound函数使用实例,本文先是讲解了ubound函数的语法,然后给出了用法代码实例,需要的朋友可以参考下
    2014-11-11
  • SWFObject Flash js调用类

    SWFObject Flash js调用类

    一直想为 SWFObject 这个JS的类库写一个推荐帖,因为他轻便,同时功能强大,为我们的开发带来了很大的便捷。
    2008-07-07
  • 小程序如何实现中间带加号的tabbar

    小程序如何实现中间带加号的tabbar

    自定义tabBar可以让开发者更加灵活地设置tabBar样式,以满足更多个性化的场景,下面这篇文章主要给大家介绍了关于小程序如何实现中间带加号tabbar的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论