Question

我正在使用模块模式从ES6导入/导出开发代码结构。所以在文件中我有：

// Product.js

const Product = (function product() {
   const productJson = skuJson;
   const productTabs = document.querySelectorAll('.js-product-tab');
   const handleClickProductTab = (evt) => {...};
   const init = () => {
     [...productTabs].forEach((tab) => {
       tab.addEventListener('click', handleClickProductTab);
     });
   };
   return {
     init,
   };
}());

export default Product;

然后在另一个文件中，导入此Product js文件以供将来使用。

import Product from './product/product';

(function init() {
  document.addEventListener('DOMContentLoaded', () => {
    Product.init();
  });
}());

我了解该代码是由于IIFE而运行的，即使删除了Product.init();，该变量仍然会被创建。就是这样，我从页面上看到错误，指出不应读取这些模块。

如何使在每个模块中创建的那些变量仅在调用init()方法时创建，但是这些变量仍可用于模块的其余部分？

Answer 1

导出可以按需初始化的功能通常比在页面加载时自动运行每个模块的功能通常更好-这样，初始流控制可以完全由入口点进行（如果您没有，希望您可以创建一个），而不是将初始操作分散在整个脚本中。

例如，您可能考虑导出运行时创建makeProduct的函数Product：

// makeProduct.js

const makeProduct = () => {
   const productJson = skuJson;
   const productTabs = document.querySelectorAll('.js-product-tab');
   const handleClickProductTab = (evt) => {...};
   const init = () => {
     [...productTabs].forEach((tab) => {
       tab.addEventListener('click', handleClickProductTab);
     });
   };
   return {
     init,
   };
};

export default makeProduct;

然后

import makeProduct from './product/makeProduct';

(function init() {
  const product = makeProduct();
  document.addEventListener('DOMContentLoaded', () => {
    Product.init();
  });
}());

（当然，如果product初始化依赖于DOMContentLoaded，请在DOMContentLoaded侦听器中创建它）

使导入的代码仅在特定页面上运行[模块模式+ ES6]

1 个答案: