使用RESCELJS优化您的JavaScript

Sara Vieira. 经过 Sara Vieira.  |  2013年2月11日

quertjs. 是提高JavaScript代码的速度和质量的有效方法,还使其更具可读性,更易于维护。

在这篇文章中我’请介绍您需要的JS and how you can begin using it. We will go through requiring files and defining a module and even touch on optimization.

在简单的条款中,Required.js是一个脚本加载程序,允许您将JavaScript代码滑入文件和模块,从而管理每个模型的依赖关系。

 

需要文件

要开始使用RESCELJS及其异步模块定义(AMD),我们必须先 下载 它,然后链接到我们文档的头部中的require.js文件,如下所示:

<script src="require.js" data-main="main"></script>

你可能会想知道那是什么 数据主要 属性是,使用RESENTJS意味着当您打电话时 要求 在您的文档的头部,您也链接到JavaScript应用程序的主文件, 数据主要 属性是在此情况下为应用程序的主JavaScript文件的链接,在这种情况下 main.js.。 (请注意,Requirejs会在文件名结束时自动添加。)。)

在此Main.js文件中,您将为RequireJS配置配置,在模块中加载,并在需要文件时定义基本路径。

 

需要功能

要求使用简单 要求 在脚本中加载的函数,在此示例中要求jQuery:

要求(["jquery."], function($) {
  return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

关于Requirejs的最佳事物之一是它是非常可读的,如果您查看该代码块,您将看到第一个要求使用jQuery.js的名称抓取文件,并且它将匿名函数与jQuery的$作为参数。 ,当完成时,您可以自由地使用您的所有jQuery代码。

现在,你通常不会’T名为jQuery.js的文件中的jQuery库,与大多数插件和框架一样,我们通常选择加载到他们的github或google cdn,以及我们需要配置路径,以便它们指向右侧地方:

要求.config({
 paths: {
   "jquery.": "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

这意味着您可以通过Google要求jQuery并在没有问题的情况下使用它。 (请注意我’ve used the name “jquery”在这个例子中,但你可以称之为你喜欢的任何东西。)

 

定义模块

使用AMD模式意味着我们的代码可以在模块中构建;这些模型只是在我们的应用程序中做某事的代码位。您可以在模块或100中放置两行代码,只需取决于您希望该模块要做的操作。

要定义我们使用这样的代码的模块:

define(function () { 
 function add (x,y) {
   return x + y;
 }
});

在这个例子中,我创建了一个简单的 添加 函数没有依赖关系,但如果这个函数需要jQuery正常工作,则定义函数将是这样的:

define([‘jquery’], function () { 
 function place(mydiv) {
 return $(mydiv).html(‘My Sample Text’);
 }
});

使用此语法,我们将javascript首先获取jQuery,然后运行代码,以便在需要时可用。我们也可以在我们用JavaScript文件中编写的模块中使用此模块,它不限于框架或插件。

 

优化

正如您所看到的,RequireJS是一个很好的工具,用于将文件组织到模块中,只加载您需要的内容。缺点是太多的JavaScript文件导致负载较差的时间,这就是为什么要求requirejs包含一个 优化器 从所有文件中收集数据并将其放在单个最小化文件中。

总而言之,RequireJS是为现代网络组织和优化JavaScript的最佳方式之一。

 

您是否在项目中使用了RequardJS?它有改善你的工作流程吗?让我们在评论中知道。

特色图片/缩略图, 盒子图像 via Shutterstock.