labjs_使用LABjs进行更智能的脚本加载

labjs

We all know that asynchronous resource loading is the key to preventing unwanted and unnecessary blocking within the browser.  There are many scripts/libraries available to help with async script loading but the ones that succeed are simple, compact, and reliable.  Those words describe Kyle Simpson's LABjs, a lightweight utility for loading your scripts without blocking.

我们都知道异步资源加载是防止浏览器内不必要和不必要的阻塞的关键。 有许多脚本/库可用于帮助异步脚本加载，但是成功的脚本/库简单，紧凑且可靠。 这些词描述了凯尔·辛普森(Kyle Simpson)的LABjs，这是一个轻量级的实用程序，可无阻碍地加载脚本。

下载LABjs (Download LABjs)

You can download LABjs at the LABjs website or via GitHub.

您可以从LABjs 网站或通过GitHub下载LABjs。

传统脚本包含 (Traditional Script Inclusion)

Traditional script inclusion blocks subsequent resources from loading.  The following is traditional, blocking script inclusion:

传统脚本包含会阻止后续资源的加载。 以下是传统的阻止脚本包含的内容：

<script src="mootools-1.3.js"></script>
<script src="lightface/Source/LightFace.js"></script>
<script src="lightface/Source/LightFace.Request.js"></script>
<script src="lightface/Source/LightFace.Static.js"></script>
<script src="Color.js"></script>

Wait...wait...wait.  What a waste of time.  Other pieces of the page don't rely on these scripts, so why should users have to wait for these scripts to load before other resources load?  LABjs fixes this mess.

等待...等待...等待。 真浪费时间。 页面的其他部分不依赖这些脚本，那么为什么用户必须在加载其他资源之前必须等待这些脚本加载？ LABjs解决了这一问题。

LABjs用法 (LABjs Usage)

LABjs itself needs to be included within the page via traditional SCRIPT tag:

LABjs本身需要通过传统的SCRIPT标签包含在页面中：

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

The $LAB variable is LABjs' handle.  You can load scripts using the script method:

$LAB变量是LABjs的句柄。 您可以使用脚本方法加载脚本：

$LAB.script('mootools-1.3.js');

The wait method allows you to prevent script execution (not loading) before executing subsequent scripts in the chain:

使用wait方法可以在执行链中的后续脚本之前阻止脚本执行( 不加载 )：

$LAB
.script('mootools-1.3.js').wait()
.script('mootools-dependent-script.js');

Using wait is a great way to manage dependencies.  For example, you cannot load MooTools More before MooTools Core, right?  Even though you direct Core to load first, More may load before Core.  That will cause many, many errors.  You can use wait to prevent that problem:

使用wait是管理依赖项的好方法。 例如，您不能在MooTools Core之前加载更多MooTools，对吗？ 即使您直接引导Core加载，也可能在Core之前加载More。 这将导致很多错误。 您可以使用wait来防止该问题：

$LAB
.script('mootools-1.3.js').wait()
.script('mootools-1.3-more.js');

The wait method also acts as a callback for when scripts are done loading:

当脚本完成加载时， wait方法还用作回调：

$LAB
.script('mootools-1.3.js').wait()
.script('mootools-1.3-more.js').wait(function() {
	
	// Now that the Fx.Accordion is available....
	var accordion = new Fx.Accordion(/* ... */);
	
});

To complete the example I started this post with:

为了完成示例，我以以下内容开始了这篇文章：

$LAB
.script('mootools-1.3.js').wait()
.script('lightface/Source/LightFace.js').wait()
.script('lightface/Source/LightFace.Request.js')
.script('lightface/Source/LightFace.Static.js').wait(function() {
	var modal = new LightFace.Request(/*  */);
})
.script('Color.js')

Using LABjs to load scripts is as simple as that!

使用LABjs加载脚本就这么简单！

LABjs选项 (LABjs Options)

LABjs also provides a bevy of options to customize script loading to your personal needs.  Options may be set via the setOptions method:

LABjs还提供了一系列选项来定制脚本加载以满足您的个人需求。 可以通过setOptions方法设置选项：

$LAB.setOptions({ AlwaysPreserveOrder:true });

A few of the options include:

一些选项包括：

• AlwaysPreserveOrder:  Implicitly calls wait() after each script

  AlwaysPreserveOrder ：在每个脚本之后隐式调用wait()

• UsePreloading: Allows LABjs to try other loading tricks (trick information here)

  UsePreloading ：允许LABjs尝试其他加载技巧( 此处的技巧信息 )

• BasePath: Sets a base path for all scripts

  BasePath ：设置所有脚本的基本路径

Many other options are available.  You can get more information about LABjs options by reading the documentation.

还有许多其他选项。 您可以通过阅读文档获取有关LABjs选项的更多信息。

LABjs +异步FTW (LABjs + Async FTW)

LABjs is an awesome, awesome little utility:  compact, easy to  use, and reliable.  Twitter must agree with me because they are using LABjs.  Big props to Kyle for his outstanding work. Be sure to give LABjs a try; low risk, high reward.

LABjs是一个很棒的实用工具：紧凑，易于使用且可靠。 Twitter必须同意我的观点，因为他们正在使用LABjs。 凯尔(Kyle)出色工作的重要道具。 一定要尝试LABjs； 低风险，高回报。

翻译自: https://davidwalsh.name/labjs

labjs