webpack模組定義和使用的模式

標籤：技術   span   image   ddc   single   一個   思考   str   count()   

在使用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);    }}

輸出

總結

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

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

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

webpack模組定義和使用的模式