requirejs加载js_了解RequireJS以有效地加载JavaScript模块

requirejs加载js

模块化编程用于将大型应用程序分解为较小的可管理代码块。 基于模块的编码简化了维护工作，并提高了可重用性。 但是，管理模块之间的依赖性是开发人员在整个应用程序开发过程中面临的主要问题。 RequireJS是用于管理模块之间依赖关系的最受欢迎的框架之一。 本教程研究了对模块化代码的需求，并展示了RequireJS如何提供帮助。

加载JavaScript文件

大型应用程序通常需要许多JavaScript文件。 通常，它们使用<script>标签一一加载。 此外，每个文件都可能依赖于其他文件。 最常见的示例是jQuery插件，它们都依赖于核心jQuery库。 因此，必须在其任何插件之前加载jQuery。 让我们看一个在实际应用程序中加载JavaScript文件的简单示例。 假设我们有以下三个JavaScript文件。

purchase.js

function purchaseProduct(){
  console.log("Function : purchaseProduct");

  var credits = getCredits();
  if(credits > 0){
    reserveProduct();
    return true;
  }
  return false;
}

products.js

function reserveProduct(){
  console.log("Function : reserveProduct");

  return true;
}

credits.js

function getCredits(){
  console.log("Function : getCredits");

  var credits = "100";
  return credits;
}

在此示例中，我们尝试购买产品。 首先，它检查是否有足够的积分来购买产品。 然后，在信用验证后，它将保留产品。 另一个脚本main.js通过调用main.js purchaseProduct()初始化代码，如下所示。

var result = purchaseProduct();

有什么问题吗？

在这个例子中， purchase.js取决于两个credits.js和products.js 。 因此，需要在调用purchaseProduct()之前加载这些文件。 因此，如果我们按以下顺序包含我们JavaScript文件，会发生什么情况？

<script src="products.js"></script>
<script src="purchase.js"></script>
<script src="main.js"></script>
<script src="credits.js"></script>

在这里，初始化是在credits.js加载之前完成的。 这将导致如下所示的错误。 并且此示例仅需要三个JavaScript文件。 在更大的项目中，事情很容易失控。 那就是RequireJS出现的地方。

RequireJS简介

RequireJS是一个众所周知JavaScript模块和文件加载器，最新版本的流行浏览器均支持该模块。 在RequireJS中，我们将代码分为模块，每个模块处理一个职责。 此外，加载文件时需要配置依赖项。 让我们从下载RequireJS开始。 下载后，将文件复制到您的项目文件夹。 假设我们项目的目录结构现在类似于下图。

所有JavaScript文件（包括RequireJS文件）都位于scripts文件夹内。 文件main.js用于初始化，其他文件包含应用程序逻辑。 让我们看看脚本如何包含在HTML文件中。

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

这是使用RequireJS包含文件所需的唯一代码。 您可能想知道其他文件发生了什么以及如何包含这些文件。 data-main属性定义应用程序的初始化点。 在这种情况下，它是main.js RequireJS使用main.js查找其他脚本和依赖项。 在这种情况下，所有文件都位于同一文件夹中。 使用逻辑，您可以将文件移动到您喜欢的任何文件夹。 现在，让我们看一下main.js

require(["purchase"],function(purchase){
  purchase.purchaseProduct();
});

在RequireJS中，所有代码都包装在require()或define()函数中。 这些函数的第一个参数指定依赖项。 在前面的示例中，初始化依赖于purchase.js ，因为它定义了purchaseProduct() 。 请注意，文件扩展名已被省略。 这是因为RequireJS仅考虑.js文件。

require()的第二个参数是一个匿名函数，该函数采用一个对象来调用依赖文件中的函数。 在这种情况下，我们只有一个依赖项。 可以使用以下语法加载多个依赖项。

require(["a","b","c"],function(a,b,c){
});

使用RequireJS创建应用程序

在本节中，我们将上一节中讨论的普通JavaScript示例转换为RequireJS。 我们已经介绍过main.js ，因此让我们继续其他文件。

purchase.js

define(["credits","products"], function(credits,products) {

  console.log("Function : purchaseProduct");

  return {
    purchaseProduct: function() {

      var credit = credits.getCredits();
      if(credit > 0){
        products.reserveProduct();
        return true;
      }
      return false;
    }
  }
});

首先，我们声明购买功能取决于积分和产品。 在return语句中，我们可以定义每个模块的功能。 在这里，我们在传递的对象上调用了getCredits()和reserveProduct()函数。 product.js和credits.js相似，如下所示。

products.js

define(function(products) {
  return {
    reserveProduct: function() {
      console.log("Function : reserveProduct");

      return true;
    }
  }
});

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

credits.js

define(function() {
  console.log("Function : getCredits");

  return {
    getCredits: function() {
      var credits = "100";
      return credits;
    }
  }
});

这两个文件都配置为独立模块-意味着它们不依赖任何内容。 需要注意的重要事情是使用define()而不是require() 。 在require()或define()之间require()选择取决于代码的结构，将在下一节中讨论。

使用require()与define()

之前我提到过，我们可以同时使用require()和define()来加载依赖项。 了解这两个功能之间的区别对于管理依赖关系至关重要。 require()函数用于运行即时功能，而define()用于定义在多个位置使用的模块。 在我们的示例中，我们需要立即运行purchaseProduct()函数。 因此，在main.js中使用了require() 。 但是，其他文件是可重用的模块，因此使用define() 。

为什么RequireJS很重要

在普通JavaScript示例中，由于文件加载顺序错误而生成了错误。 现在，删除RequireJS示例中的credits.js文件，并查看其工作方式。 下图显示了浏览器检查工具的输出。

此处的区别在于RequireJS示例中未执行任何代码。 我们可以确认它，因为控制台上没有任何内容。 在普通JavaScript示例中，在生成错误之前，控制台上已打印了一些输出。 RequireJS等待执行所有功能之前，先加载所有相关模块。 如果缺少任何模块，则不会执行任何代码。 这有助于我们保持数据的一致性。

管理相关文件的顺序

RequireJS使用异步模块加载 （AMD）加载文件。 每个相关模块将开始以给定顺序通过异步请求进行加载。 即使考虑了文件顺序，但由于异步性质，我们不能保证在第一个文件之前先加载第一个文件。 因此，RequireJS允许我们使用shim配置来定义需要按正确顺序加载的文件顺序。 让我们看看如何在RequireJS中创建配置选项。

requirejs.config({
  shim: {
    'source1': ['dependency1','dependency2'],
    'source2': ['source1']
  }
});

RequireJS允许我们使用config()函数提供配置选项。 它接受一个名为shim的参数，我们可以使用它来定义强制性的依赖关系序列。 您可以在RequireJS API文档中找到完整的配置指南。

define(["dependency1","dependency2","source1","source2"], function() {

);

通常情况下，这四个文件将以给定顺序开始加载。 在这里， source2取决于source1 。 所以，一旦source1加载完成后， source2会认为所有的依赖加载。 但是， dependency1和dependency2可能仍在加载。 使用shim config，必须在source1之前加载依赖source1 。 因此，将不会产生错误。

结论

我希望本教程可以帮助您开始使用RequireJS。 尽管看起来很简单，但是它在管理大型JavaScript应用程序中的依赖项方面确实非常强大。 仅本教程不足以涵盖RequireJ的所有方面，因此希望您可以使用官方网站学习所有高级配置和技术。

并且，如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Simply JavaScript 。

本文的评论已关闭。 对JavaScript有疑问吗？ 为什么不在我们的论坛上提问呢？

翻译自: https://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

requirejs加载js