仅在特定页面[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
监听器中创建)
我正在使用模块模式从 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
监听器中创建)