ES6 |模块

JavaScript 中的模块通过将整个代码划分为可以从任何地方导入并因此使用的各种模块来帮助模块化代码。它使重用一段代码、维护代码和调试代码变得容易。此外，它还防止了与使用全局变量和函数相关的许多问题。早些时候，这些模块是通过各种外部库和框架实现的，但在 ECMAScript2015 中，它成为 JavaScript 结构的隐含部分。

导出值：由于 JavaScript 的多范式特性，我们可以使用关键字export导出函数、对象、类和原始值。在 JavaScript 中，导出可以是：

• 命名导出：使用命名导出导出的任何函数、类或变量只能使用相同的名称导入。可以使用命名导出来导出和导入多个函数和变量。

  例子：
  products.mjs 文件：

  // Module products.mjs
  var numberSale=0;
  var totalSale=0;
    
  // Export keyword can be specified individually
  // with functions and variables.
  export function buy(buyer, item)
  {
      buyer.total=buyer.total+item.price;
  }
  export function sell(item)
  {
      totalSale=totalSale+item.price;
      numberSale=numberSale+1;
      item.quantity=item.quantity-1;
      return 0;
  }
    
  // Export keyword can also be used
  // with multiple values.
  export { totalSale, numberSale};
  

  index.mjs 文件：

  import {total sale, numberSale, buy, sell } from './product.mjs';
  let buyer={
      name:"GeeksforGeeks",
      total:0
  };
  let item={
      name="butter",
      price:10,
      quantity:100
  };
  console.log("Total Sale till now = ",totalSale);
  buy(buyer, item);
  sell(item);
  console.log("Total expense of buyer = ",buyer.total);
  console.log("Quantity of item left = ",item.quantity);
  console.log("Total Sale till now = ",totalSale);
  

  输出：
  

• 默认导出：作为默认导出的任何内容都可以使用任何名称导入。使用默认导出最多可以导出 1 个值。要导出多个值，可以将它们组合到一个对象中，然后使用默认导出来导出该对象。
  例子：

  // Module secret_ingredient.mjs
  var secretIngredient="Salsa";
  export default secretIngredient;
  

  注意：这两个导出都可以在一个模块中混合使用，最多 1 个默认导出和任意数量的命名导出以进行混合导出。

  导入值：只有从模块导出的值才能使用import关键字导入。下面给出了用于导入导出的各种语法。

  例子：

  • 导入命名导出：

    import { buy, sell} from './modules/products.mjs';

  • 使用别名导入命名导出：

    import { buy as buyCustomer, sell as sellCustomer} from './modules/products.mjs';

  • 导入默认导出：

    import productSecret from './modules/secret_ingredient.mjs';

  • 导入所有导出并创建一个新对象：

    import * as productModule from './modules/products.mjs';

  • 导入默认导出和命名导出：

    import defaultVal,* from './modules/hybrid.mjs';

  ES6 中的循环依赖： ES6 为处理循环依赖提供了强大的支持。当在依赖链中某些模块导入其后继模块之一时，就会发生循环依赖。

  • 示例：假设 U, V, X… 是不同的模块，依赖链是U->V->X-> 。 . .->U-> . . .则存在涉及 U 的循环依赖。
    CommonJS 和其他库为循环依赖提供了一定程度的支持，但在从循环依赖模块导入和使用命名导出时遇到了问题。
    ES6 通过在导出中共享值的绑定而不是值本身来解决这个问题。并且，一旦解析了循环依赖模块，就会为绑定分配一个合适的值。

    程序：

    // producer.mjs
    import {consumeInc} from 'consumer.mjs';
    var countP=0;
    export function produceInc()
    {
            countP++;
    }
    
    // consumer.mjs
    import {produceInc} from 'producer.mjs';
    var countC=0;
    export function consumeInc()
    {
            countC++;
    }
    

  浏览器中的模块：通过将 script 标签的 type 属性设置为module ，可以将模块包含在浏览器 JavaScript 中。使用src属性从外部源加载的模块默认延迟，即它们与 HTML 并行加载。每个模块仅在第一次加载时执行。

  笔记：

  • 在 JavaScript 中导入的模块会自动处于严格模式。您可以在此处阅读有关严格模式的更多信息。
  • JavaScript 还允许使用构造import()动态加载模块。