基本JavaScript:前五个脚本加载器

这是一系列常规文章中的第一篇,它将检查许多类别中的资源,包括前端框架Backbone.js的,像模板引擎Handlebars.js和其他一些人。的数量JavaScript的资源每天都在增长,这对开发人员来说非常好,但通常情况下,选择哪一种最适合手头的情况会让人感到困惑或压倒性。通常没有确定的解决方案,希望本系列文章能够提供特定解决方案最佳的信息和案例。

脚本加载器的工作原理如何

理论是脚本加载器,当通过使用加载多个脚本时

这假设您的主JS文件名为“app.js”,并且与该文件位于同一目录中

请注意,您不必在其末尾添加“.js”,RequireJS已为您提供。

现在,在主文件(在我的例子中,app.js)中,我们可以使用要求()功能。该要求()函数有两个参数,加载的脚本和加载这些脚本后执行的函数。请记住,脚本路径是相对于app.js的路径:

require(['lib / jquery'],function(){
//加载jQuery时要执行的代码
});

这是RequireJS的基本用法,但它实际上能够做得更多。 RequireJS实现了AMD(异步模块定义)规范,这是一种定义可加载模块的方法。您将所有代码编写为模块,主要通过RequireJS编写限定()功能。当您拥有一个包含多个脚本的大型应用程序时,这是一个很好的方法,所有脚本都依赖于其虽然这篇文章的内容太多了(我可以在RequireJS上写完多篇文章),吉姆霍斯金斯写了一篇很棒的文章使用RequireJS创建和使用自己的模块,我强烈推荐。

03. Yepnope.js

Yepnope.js是一个脚本加载器,其目标与HeadJS或RequireJS略有不同。 yepnope被设计为一个资源加载器,可以根据您可以评估为true或false的任何语句有条件地加载脚本。它设计用于装入polyfills。你有多少经常写一些额外的JS,因为浏览器不支持某些东西?这种情况经常发生,尤其是如果您使用的是全新的API和并非所有浏览器都已实现的功能。它非常适合像特征检测库一样Modernizr的- 以至于Modernizr源实际上包含了yepnope。

使用yepnope很容易。我们用的是Yepnope()函数,传入一个看起来像这样的对象:

Yepnope({
Test:Modernizr.placeholder,
Nope:“placeholder-polyfill.js”
});

在这里,我加载了一个polyfill,用于HTML5占位符属性,如果它本身不受支持的话。当然,我们不仅限于Modernizr测试。如果我们要添加一个类怎么办?标签“.ie”如果浏览器是IE8或更低,并且想要加载基于该文件的文件?

Yepnope({
test:$(“html”)。hasClass(“ie”),
是的:“ie-fixes.js”,
Nope:“non-ie.js”
});

通过“加载”加载没有条件的脚本也很容易,并且还执行依赖于该脚本的测试:

Yepnope({
load:['path / to / jquery.js','app.js'],
完成:function(){
$(function(){
Yepnope({
test:$(“html”)。hasClass(“ie”),
是的:“ie-fixes.js”,
Nope:“non-ie.js”,
});
});
});
});

值得注意的是,yepnope不一定是最快的脚本加载器,这不是它的目标,但它确实提供了无法与其他任何资源匹配的条件加载。

04. LABjs

我们在本文中的倒数第二个产品是LABjs,写的凯尔辛普森。它被设计成一个通用的JavaScript加载器,可以高效,快速地加载脚本。它的语法与本文中介绍的其他语法稍有不同,但它仍然易于理解和使用。

例如,假设我们有jQuery和一个要加载的插件。使用LABjs,我们会这样做:

$ LAB.script(“path / to / jquery.js”)。wait()。script(“path / to / plugin.js”)

我们称之为而不是传入一组文件。脚本()对于我们要加载的每个文件.LABjs也以不同方式表示依赖关系。这里。等待()意味着在加载插件之前等待jQuery加载。这意味着你可以确信在插件之前加载了jQuery。如果要在加载所有内容后运行某些代码,请将函数传递给等待()

$ LAB.script(“path / to / jquery.js”)。wait()。script(“path / to / plugin.js”)。wait(function(){//加载两个文件后运行的代码} );

您可以在中阅读有关LABjs用法的更多信息文件。然而,重要的是要注意,在我撰写本文时,宣布LABjs将不再有开发。虽然这是一个耻辱,它仍然是一个可靠的脚本加载器(如果你想维护它或修复bug,代码也在Github上),我觉得值得在本文中包括。

05. LazyLoad

最后,但绝不是最不重要的,我想看一看LazyLoad,通过瑞恩格罗夫。 LazyLoad开始做一件事,一件好事。它是我向你展示的所有加载器中最小的(缩小不到1KB),故意编写为小而易于使用,用于加载CSS和JavaScript。它的功能设置比其他一些解决方案要小,但这是可以预料的。它很容易用于加载一个或多个文件:

LazyLoad.js(“jquery.js”,function(){// jQuery loaded}); LazyLoad.js([“jquery.js”,“plugin.js”],function(){//多个文件全部加载});

LazyLoad并行加载文件,而不是按顺序加载文件,因此当您需要加载脚本但只有一次加载脚本时,最好的方法是:

LazyLoad.js(“jquery.js”,function(){LazyLoad.js(“plugin.js”,function(){// execute plugin});});

在CSS中加载的功能非常相似,但它是通过的CSS()功能。

06.结论

我希望这篇文章能够展示一些流行的库以及如何最好地使用它们。不同的库可以更好地完成不同的事情,您应该始终选择最适合手头的情况。就个人而言,除了几个简单的脚本之外,我倾向于期待RequireJS,它充满了功能。如果我正在使用polyfill,那么每次都是yepnope而且对于一些简单的我通常会选择HeadJS。然而,这并不是说这些选择适合你,所以我鼓励你尽可能多地尝试,以便对它们有一个很好的了解,并能够找到最适合当前情况的选择。

Jack Franklin是一位居住在英国伦敦的20岁开发人员。他经营着一个JavaScript博客Javascriptplayground.com还编写PHP,Ruby和其他语言。他发推文为@Jack_Franklin

喜欢这个?阅读这些!



翻译字数超限