webpack屬性，webpack模塊定義和使用的模式

在使用webpack作為模塊加載工具時，我在想module.exports的模塊應該是一種什么模式，最直接地思考是單例。不太確定，所以寫一個簡單例子做測試。

webpack屬性、測試代碼

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);}
}?

webpack有什么用。Hello.vue：

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

輸出

總結

webpack import、從例子可以看出，使用模塊的方式是單例（就是exports出來的對象），而編寫的方式是模塊模式（在我設計模式文章有寫）。

模塊模式的好處在于你可以暴露你想要的屬性和方法（私有的隱藏），甚至做一些初始化操作。

PS:注意模塊定義和使用該模塊的模式區分