webpack模块定义和使用的模式

时间:2023-03-10 04:32:47
webpack模块定义和使用的模式

在使用webpack作为模块加载工具时,我在想module.exports的模块应该是一种什么模式,最直接地思考是单例。不太确定,所以写一个简单例子做测试。

测试代码

singleton.js:

var Singleton = {
count: 0,
addCount: function(){
Singleton.count++;
}
} console.log('Singleton 输出');
module.exports = Singleton;

App.vue:

import Singleton from './js/singleton'

export default {
……
created(){
Singleton.addCount();
console.log('App.vue count:', Singleton.count);
}

Hello.vue:

import Singleton from '../js/singleton'

export default {
……
created(){
Singleton.addCount();
console.log('Hello.vue count:', Singleton.count);
}
}

输出

webpack模块定义和使用的模式总结

从例子可以看出,使用模块的方式是单例(就是exports出来的对象),而编写的方式是模块模式(在我设计模式文章有写)。

模块模式的好处在于你可以暴露你想要的属性和方法(私有的隐藏),甚至做一些初始化操作。

PS:注意模块定义和使用该模块的模式区分