RequireJS函数：AMD模块

RequireJS中的模块是作用域对象，并且在全局名称空间中不可用。因此，全局名称空间将不会受到污染。RequireJS语法允许更快地加载模块，而不必担心跟踪依赖关系的顺序。您可以在同一页面中加载同一模块的多个版本。

定义模块

使用define()函数定义模块；同样的功能也用于加载模块。

简单名称/值对

如果模块只是名称和值对的集合，则可以使用以下语法：

define({
   state: "karnataka",
   city: "bangalore"
});

定义功能

模块也可以将函数用于框架，而无需依赖。这可以通过使用以下语法来完成：

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

用依赖定义功能

如果模块具有依赖项，则以下语法显示第一个参数（依赖项名称数组），第二个参数（定义函数）和定义模块的返回对象的位置：

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

将模块定义为功能

模块不是必须仅返回对象，也可以返回函数中的任何有效值。以下语法用于将模块定义为函数：

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

用名称定义模块

在某些情况下，您可能必须包含模块名称作为define()的第一个参数。这可以通过使用以下语法来完成：

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

模块加载

使用js文件中的define（）函数加载模块。在html文件中加载模块的语法如下所示：

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

在上面，由于脚本标签主要是用来设置是相对于包require.js，其在此实例是源包TEAM1和TEAM2。

例

以下示例描述了如何在RequireJS中定义和加载模块。创建一个名称为index.html的html文件，并将以下代码放入其中。

<!DOCTYPE html>
<html>
   <head>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Example</h2>
   </body>
</html>

创建一个名为main.js的js文件，并将以下代码放入其中。

define(function (require) {
   var team1 = require("./team1");
   var team2 = require("./team2");

   alert("Welcome to Tutorialpoint");
   document.write("<h4>Hyderabad Team: </h4>" + "<br>" + " Team:"+team1.team +"<br>
      "+"Captain:" +team1.captain +"<br>");
   
   document.write("<h4>Bangalore Team: </h4>" + "<br>" + " Team:"+team2.team +"<br>
      "+"Captain:"+team2.captain +"<br>");   
});

再创建两个名称为team1.js和team2.js的js文件，并分别放置以下代码。

对于TEAM1：

define({
   team: "Sunrisers Hyderabad",
   captain : " David Warner"
});

对于TEAM2 ：

define({
   team: "RCB",
   captain : "Virat Kohli"
});

输出

在浏览器中打开HTML文件；您将收到以下屏幕截图中的输出：

接下来，单击“OK”按钮，您将从模块中获得另一个输出，如以下屏幕截图所示：

作者：terry，如若转载，请注明出处：https://www.web176.com/requirejs/2004.html