不会健身的程序员
不是好作家

用headjs来管理和异步加载js

image

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

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

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

基本用法

以下是它的基本用法:

脚本回调

上面的例子说明了最基本的使用,并且回调函数基本和加载放在一起,当我们需要把脚本写在页面底部,而回调函数却在其他地方定义了,不期望在回调函数依赖的脚本还未加载之前执行,我们可以用到head.ready,基本用法如下:

脚本别名

可以通过给脚本一个别名方便管理维护理解,使用方法如下:

使用心得

顺便介绍一下小林的一点点使用心得,先把网页全部输出,这时候全部的内容都未依赖脚本,然后再用headjs加载需要的脚本,来使页面动态化,并应用了window.onload事件,防止脚本加载不成功页面一直打转让用户误以为页面还没加载完,下面是详细代码:

这样做即使无法加载jquery等其他脚本也不会影响网页的使用

赞(0)
转载请注明出处:小林博客 » 用headjs来管理和异步加载js
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

谢主隆恩

支付宝扫一扫打赏

微信扫一扫打赏