javascript - 使导入的代码只在特定页面运行[Module Pattern + ES6]

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

通常最好导出可按需初始化的函数，而不是在页面加载时自动运行每个模块的函数 - 这样，初始流程控制可以完全位于入口点(如果您没有，希望您可以创建一个)，而不是将初始操作分散在整个脚本中。

例如，您可能会考虑导出一个在运行时创建 Product 的函数 makeProduct:

// 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监听器中创建)