个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我做了一个非常简单的示例(改编 self 的真实项目)，它使用 LABjs (v2.0.3) 加载 javascript 文件并按给定顺序执行它们。我正在粘贴下面的代码。
谁能解释一下？
完整示例可以下载here .
编辑:我正在使用 node.js 和 http-server module在本地提供这些页面(以防您也想在本地尝试)
文件:index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test lab.js</title>
<script src="js/lib/LAB.js"></script>
<script src="js/app/testLAB.js"></script>
</head>
<body>
</body>
</html>
文件:js/app/testLAB.js
$LAB.setGlobalDefaults({
BasePath: "/js/",
Debug:true
});
$LAB
.script("lib/underscore.min.js")
.script("app/mainCanvas.js").wait(function(){
alert("testLAB.js");
});
文件:js/app/mainCanvas.js
$LAB
.script("lib/jquery.js").wait()
.script("lib/underscore.min.js")
.script("app/events.js")
.wait(function() {
alert("mainCanvas.js");
});
文件:js/app/events.js
$LAB
.script("lib/jquery.js")
.script("lib/underscore.min.js")
.wait(function() {
alert("events.js");
});
最佳答案
这里的问题是对 LABjs 的工作方式，或者更确切地说，是对嵌套动态脚本加载的工作方式的误解。
如果我使用脚本加载器加载脚本 A.js，浏览器将下载并执行该脚本的内容，在脚本 A 中，我使用脚本加载器加载脚本 B.js，脚本的事实A.js 要求加载 B.js 并不意味着 A.js 的“加载”事件被神奇地阻止，直到依赖项(即在本例中为 B.js)完成加载和执行。
一旦脚本加载完毕，浏览器就会立即执行它，一旦它的主要执行完成，浏览器就会在该脚本上触发“加载”事件，表明它已完成。如果该脚本激发了一些其他异步行为，例如加载更多脚本，则该异步行为将不会影响主执行线程或该脚本的“加载”事件的激发。
如果您需要加载嵌套的依赖项，您将需要一个更复杂的系统来“延迟”每个文件的执行，类似于 AMD 加载程序(如 Require.js)将所有代码包装在函数中的方式。该技术起作用的原因是声明的外部函数的执行顺序无关紧要，因为在定义所有代码之后，您可以返回并以各种正确的顺序执行这些函数有效负载并获得您期望的顺序。
如果您不想走 AMD/Require 路线，我个人的另一个(更简单？)选项是使用一个简单的构建工具脚本，该脚本在构建时读取您的 JS 文件，发现所有嵌套的依赖项是什么，并以正确的顺序将所有这些依赖项“提升”到单个“全局”$LAB 链调用中。因此，在您的文件中，不要使用实际的 $LAB 调用来声明嵌套依赖关系，只需对依赖关系进行标记，例如在 JS 注释中，然后让您的脚本查找这些依赖关系。
示例(类似于我自己做事的方式):
A.js:
// needs "B.js"
// needs "C.js"
A.something = function( /*..*/ ) { /*..*/ };
B.something();
C.something();
B.js:
// needs "D.js"
B.something = function( /*..*/ ) { /*..*/ };
D.something();
C.js:
// needs "D.js"
// needs "E.js"
C.something = function( /*..*/ ) { /*..*/ };
D.something();
E.something();
D.js:
D.something = function( /*..*/ ) { /*..*/ };
E.js:
E.something = function( /*..*/ ) { /*..*/ };
然后，我有一个简单的脚本来查看我的文件，并发现必要的执行顺序以满足所有依赖项。
然后它会生成一个 $LAB 链供我的主页使用，如下所示:
$LAB
.script("D.js")
.script("E.js").wait() // D and E can execute in either order
.script("B.js")
.script("C.js").wait() // B and C can execute in either order
.script("A.js")
.wait(function(){
alert("Everything is loaded!");
});
对于我建议的方法，唯一需要注意的是您不能进行循环依赖(例如 C 依赖于 B，B 依赖于 C)。如果您需要循环依赖，请转到 AMD/Require.js。
关于javascript - 使用 LABjs 的错误执行顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15973784/
26
4
0
我想开始将 LABjs 合并到我的项目中，但我想知道是否有条件加载脚本。例如，像这样的东西: $LAB .script('framework.js').wait() .script(fun
这是一个示例:http://ci.elfster.com/core/login.aspx 查看 Firebug 中的网络选项卡，您会发现脚本仍然有相当长的阻塞期。 是否有人有一个工作示例，显示使用 L
我正在通过 LabJS 异步加载脚本，并且有一个依赖脚本链。现在，如果链中的一个脚本中断(在无法下载或连接超时的意义上)，我相信依赖链下的其余脚本将不会执行。在这种情况下，是否可以提供自定义回调函数以
我做了一个非常简单的示例(改编 self 的真实项目)，它使用 LABjs (v2.0.3) 加载 javascript 文件并按给定顺序执行它们。我正在粘贴下面的代码。 由于 testLAB.js
我正在使用 labjs 加载我的脚本。我有一个来自 feedburner 的脚本，它从我的 rss 提要中以 HTML 格式显示我博客中的最新帖子。来自 feedburner 的代码是并且工作得很
正在寻找关于这两个 javascript 加载器之间经验的任何建议？ head.js('some-script-here.js'); 或者 $LAB.script("framework.js").wa
我试图找到如何包装 ExtJs 和 ExtJs '模块' 以与 javascript 依赖框架(如 RequireJS 或 LAB)一起使用的示例。 我正在处理一个基于 ExtJs 的大型项目，并且有
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 2 年前。
问题是关于 http://labjs.com – 一个很棒的非阻塞 JavaScript 加载和依赖管理库。 我已经阅读了文档，但我一定是太累了或者什么的——我找不到任何关于 DOM 就绪事件的信息。
我正在尝试使用 LABjs 缩短网页的加载时间。然而，我得到了与我在自己的 jQuery 脚本中使用的 jQuery.cookie('mycookie') 相关的“未定义不是函数”。 我很感激有关如何
我使用queueScript来附加脚本。但它们被附加在 中标签。我想将它们附加在正文标记的末尾。我该怎么做？ var comp; var _DIR_ = "js/vendor/";
我正在使用 LABjs 加载大量 javascript，一切似乎都运行良好，直到最后的等待(等待以确保所有内容都已加载)，然后告诉 knockout 绑定(bind) View 模型: $LAB .s
我一直在使用 LABjs并且运行良好。 我现在正在尝试使用很棒的 Modernizr ，并注意它使用 yepnopejs用于条件资源加载。 因为我确实想要条件加载，我可以同时使用 LABjs 和 ye
我最近改用了 LABjs在 SharePoint Webparts (2010) 中加载脚本。这样做的主要原因是为了避免在将多个 Web 部件添加到同一页面时多次将相同的库(如 jquery 和 jq
我正在使用 LABjs 进行一些并行 js 加载。 但是，由于某些奇怪的原因，我在调试控制台中收到“$ is not defined”错误。 我的代码如下: $LAB.script("http://
我在加载 Angular 应用程序时不断收到此错误。在 Chrome 中刷新几次，我的应用程序将运行，但 IE 和 FF 是不行的。 错误将我链接到此 error page但我真的不明白它说的是什么。
Magento 附带了六个以上的 JavaScript 库，这些库对已经很繁琐的加载时间没有帮助。有没有人能够成功地将 head.js 或 labjs 之类的脚本加载器与 Magento 一起使用，以
我是一名优秀的程序员,十分优秀！