仅在特定页面[Module Pattern + ES6]中导入代码运行

Question

我正在使用模块模式从 ES6 中使用 import/export 开发代码结构。所以在一个文件中我有：

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

仅在特定页面[Module Pattern + ES6]中导入代码运行

Make imported code run only in specific page [Module Pattern + ES6]

javascript

revealing-module-pattern

ecmascript-6