用headjs来管理和加载js 提高网站加载速度_javascript技巧

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

就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js文件的地址就行了的那种呢?那就进入我们的主题了,使用headjs吧。headjs其实是一整套的工具,但我只想介绍的是它其中的Javascript Loader功能。以下是它的基本用法:

head.js("/path/to/file.js");

最简单的用法,提供一个js的文件的地址给它作为参数,然后它就会默默的在背后进行无阻塞的加载了,至于什么时候加载完可用了,谁也不知道。

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

最基本的用法,除了提供一个地址参数外,还提供一个回调函数作为第二个参数。在js加载完成后,回调用回调函数,你可以把依赖该js的代码写在回调函数里。

head.js("file1.js", "file2.js", ... "fileN.js");

提供多个js文件地址,这些js会并行的加载,但会按照参数给定的先后顺序执行这些文件,例如即使file2.js比file1.js先加载完成,但它还会一直等到在file1.js加载和执行完后再执行。

head.js("file1.js", "file2.js", function() {

});

并行加载多个js,并按参数顺序执行,所有js准备完成时,执行回调函数。

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

多个js并行加载,并且谁先加载完就先执行谁

head.js("file1.js").js("file1.js").js("file3.js");

上一种方法的链式调用法

这样的话用headjs来加载js文件基本都够用了,而且还能处理依赖关系。当是如果你继续装B,弄一个网站,巴不得什么特效都用上,这里找一个jquery插件,那里再找一个,总之就是弄非常多的文件,其中又有复杂的依赖关系,那该肿么办?这还用问吗,以上的那几个用法完全能解决。但转念一想,既然装B那就一装到底吧,现在不是流行模块什么的吧,那咱也整个模块吧,但不是像commonJS说的那么复杂,就是定义一个模块,然后规定这个模块是有那几个js文件组成的,其中的依赖关系又如何等等。那就动手吧,headjs使用的是MTI协议,修改下它应该也是没问题的吧。屌丝又装高富帅了,其实说是修改,倒不如说是增加几段代码进去,而且加载依赖等功能完全是用headjs的api实现的。

这里,我给headjs的新增了两个方法,一个是add(name,file,preload)添加模块,参数name是模块名称,file是要用到的js文件地址,如果有多个文件,并且存在依赖关系,则file可以是一个数组,这个数组的里元素就是用到的文件地址,并且按数组元素的顺序进行依赖。第三个参数preload用指定是否预加载模块文件,如果为false,则在使用该模块的时候才会加载文件,为true时则在定义模块时就会立即加载所用到的文件,默认为false

另一个是use(name,callback),这个方法用来使用模块。name是用add()方法定义的模块名,callback是该模块已经加载完成后调用的回调函数。

于是我们就可以这样来使用headjs了:

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

如果模块很多,则模块的定义代码可以单独写在一个文件里,并且引入了headjs的后,就立即加载该模块定义文件。这个过程可以很简单的像这样来实现:

<script src="head.js" init="init"></script>

看到那个init属性没有,我把它叫做初始化属性,init的值表示文件名,例如上面init就代表与headjs同目录的init.js这个文件。所谓的初始化就是在使用use()之前,init文件一定是已经加载好了的。所以可以把模块的定义写在初始化文件中。

<script src="head.js" init="init" main="main"></script>

尼玛,这是要闹哪样啊,怎么又多了个main属性,好吧,我承认是看到别人有这个东西于是手贱也跟风弄了一个。这个main属性代表的是模块名,就是head.js与init.js文件都加载完成后,就会自动执行main属性指定的模块(当然要先在init中定义该模块)。所以有了这两个东东后,我们就可以在页面没有一句js代码的情况下(除了引入headjs那段标签),执行很复杂的代码了。

还有一个要说明的地方,就是模块文件的存放位置。模块文件应该和head.js存放在同一个目录,比如head.add(‘a','a.js'),这里的a.js的路径是和head.js相同的,就是说模块文件的路径是相对于head.js存放的路径的,而且只可以往下走,不可以往上走,比如:

head.add(‘a','a/a.js')//正确

head.add(‘a','../a.js')//错误,不能往上定位

最后,放上修改过后的head.js源文件,不是压缩版,里面改的地方都有注释。

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索加载js
headjs
headjs、headjs 教程、javascript 加载、javascript技巧、javascript动态加载js,以便于您获取更多的相关知识。

时间: 2024-11-05 06:19:13

用headjs来管理和加载js 提高网站加载速度_javascript技巧的相关文章

动态加载js、css的实例代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

【原】提高网站加载速度的3项黄金守则

如何优化网页加载速度是每个前端开发工程师需要了解的,也是前端开发工程师需要具备的基本条件. 优化网站加载速度的原理主要是减少网站文件的大小,减少HTTP请求数.网站文件越小,浏览器加载页面会比较轻松,打开页面的速度也会提升:一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,HTTP的请求数越多,网站打开的速度就会越慢. 那么如何减少网站文件的大小,减少HTTP请求数呢?笔者做前端(重构方向)有2年多了,这里分享3项优化网站加载速度的方法,希望能给有需要的同学以及刚接触前端的初学者带来帮

js加载js文件并行加载与顺序执行

javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题. 当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容.因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面.同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript)

动态加载JS文件的三种方法_javascript技巧

直接看实例.例1 重新加载js文件 复制代码 代码如下: function loadJs(file) {            var head = $("head").remove("script[role='reload']");            $("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 're

提高网页加载速度的初步简单技巧方式

网页的加载速度是评估网站质量一个重要指标.原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页,所以网页载入速度会极大地影响网站的流量和访问.以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化. 网页加载提速之 – 优化网页图片文件 你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片.所以一般要在同等图片质量的情况下要尽可

多种js图片预加载实现方式分享_javascript技巧

图片预加载有大体有几种方式  1.html标签或css加载图片 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验.一般最好在文档渲染完成以后再加载(使用window.onload等).  2.纯js实现预加载 空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=

js实现图片在未加载完成前显示加载中字样_javascript技巧

<html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase(); Browser.ie=/msie/.test(Browser.userAgent); Browser.Moz=/gecko/.test(Browser.userAgent);

js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)_javascript技巧

问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了

Windows下使用apache模块实现合并多个js、css提高网页加载速度_win服务器

现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器