文档章节

Javascript文件加载:LABjs和RequireJS

C_Liwang
 C_Liwang
发布于 2014/12/23 09:25
字数 934
阅读 97
收藏 8

传统上,加载Javascript文件都是使用<script>标签。

就像下面这样:

  <script type="text/javascript" src="example.js"></script>

<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。

  (1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。

  (2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。

为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。

  function loadScript(url){

    var script = document.createElement("script");

    script.type = "text/javascript";

    script.src = url;

    document.body.appendChild(script);

  }

这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

外部函数库LABjsRequireJS,可以帮助我们更有效地管理Javascript加载。

下面根据ScriptJunkie的文章,举一个最简单的例子,来说明这两个函数库的基本用法。更高级的用法,请参阅它们的文档。

  <script src="script1.js"></script>

  <script src="script2-a.js"></script>

  <script src="script2-b.js"></script>

  <script type="text/javascript">

    initScript1();

    initScript2();

  </script>

  <script src="script3.js"></script>

  <script type="text/javascript">

    initScript3();

  </script>

上面这段代码,将依次加载4个javascript文件:script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后,运行两个函数initScript1()和initScript2();加载完第四个文件后,再运行函数initScript3()。

下面,用LABjs对其进行改写:

  <script src="LAB.js"></script>

  <script type="text/javascript">

    $LAB

     .script("script1.js").wait()

     .script("script2-a.js")

     .script("script2-b.js")

     .wait(function(){

       initScript1();

       initScript2();

     })

     .script("script3.js")

     .wait(function(){

       initScript3();

     });

  </script>

首先,$LAB对象替代了<script>标签,然后.script()方法表示加载Javascript文件,不带参数的.wait()方法表示立即运行刚才加载的Javascript文件,带参数的.wait()方法也是立即运行刚才加载的Javascript文件,但是还运行参数中指定的函数。

这里需要注意的是,可以同时运行多条$LAB链,但是它们之间是完全独立的,不存在次序关系。如果你要确保一个Javascript文件在另一个文件之后运行,你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候,你才应该考虑把它们分成不同的$LAB链,表示它们之间不存在相关关系。

接下来是requireJS的改写:

  <script src="require.js"></script>

  <script type="text/javascript">

    require([

      "script1.js",
      "script2-a.js",
      "script2-b.js",
      "script3.js"

     ],

     function(){

      initScript1();
      initScript2();
      initScript3();

     }

    );

  </script>

require()接受两个参数,第一个数组表示所要加载的Javascript文件,第二个是加载完成后所要运行的回调函数。原生的require()不支持按次序加载,所以四个Javascript文件到底先加载哪个,无法事前知道,require()只保证这四个文件全部加载完成之后,才会运行所指定的回调函数。

如果按次序加载对你很重要,你可以使用官方提供的order插件


本文转载自:http://www.ruanyifeng.com/blog/2011/10/javascript_loading.html

C_Liwang
粉丝 5
博文 13
码字总数 1147
作品 0
安庆
私信 提问
js模块加载器大家用吗

最近在一个网站上看到了用requirejs加载javascript,因为之前没见过(原谅我孤陋寡闻),然后搜索了下,发现还有seajs,labjs,yui loader等类似的,大家有用过吗?有必要用吗?...

苏生不惑
2013/05/26
1K
6
[Javascript]文件加载:LABjs和RequireJS

作者: 阮一峰 日期: 2011年10月 3日 传统上,加载Javascript文件都是使用<script>标签。 就像下面这样:   <script type="text/javascript" src="example.js"></script> <script>标签很方......

亭子happy
2012/09/29
96
0
Javascript 加载性能优化

浏览器对javascript的处理主要有2部分:下载和执行 下载在有些浏览器中是并行的,有些浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行下载的 执行在所有浏览器中默认都是阻塞的,当js在...

xiahuawuyu
2012/09/19
257
0
多人用LABjs吗?使用时,如何调试更好?

目前,我用LABjs来并行加载JS。 但现在遇到一个调试方法的问题。 就是在加载JS过程,js文件里是有语法错误的,但是加载完了,浏览器不报错。 现在我只能一句句的console.info()。好不辛苦。...

李渊
2012/05/04
697
1
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16

没有更多内容

加载失败,请刷新页面

加载更多

JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
17分钟前
30
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
26分钟前
4
0
正则表达式基础(一)

1.转义 转义的作用: 当某个字符在表达式中具有特殊含义,例如字符串引号中出现了引号,为了可以使用这些字符本身,而不是使用其在表达式中的特殊含义,则需要通过转义符“\”来构建该字符转...

清自以敬
29分钟前
4
0
idea中@Data标签getset不起作用

背景:换电脑以后在idea中有@data注解都不生效 解决办法:idea装个插件 https://blog.csdn.net/seapeak007/article/details/72911529...

栾小糖
34分钟前
4
0
Apache Kudu 不能删除不存在的数据

使用Apache Kudu客户端,对KafkaConnect Sink 进行扩展。 使用的Apache Kudu 的Java 客户端。突然有天发现作业无法提交,一直报错。 后来才发现这是Kudu自身的一种校验机制。为了忽略这种校验...

吐槽的达达仔
45分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部