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

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

我正在使用模块模式从 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() 方法时创建,但这些变量仍然可用于模块的其余部分?

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

例如,您可以考虑导出一个函数 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监听器中创建)