webpack模块定义和使用的模式

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

测试代码

singleton.js:

webpack模块定义和使用的模式
var Singleton = {
    count: 0,
    addCount: function(){
        Singleton.count++;
    }
}
 
console.log('Singleton 输出');
module.exports = Singleton;
webpack模块定义和使用的模式

App.vue:

webpack模块定义和使用的模式
import Singleton from './js/singleton'
 
export default {
    ……
    created(){
        Singleton.addCount();
        console.log('App.vue count:', Singleton.count);
    }
} 
webpack模块定义和使用的模式

Hello.vue:

webpack模块定义和使用的模式
import Singleton from '../js/singleton'
 
export default {
    ……
    created(){
        Singleton.addCount();
        console.log('Hello.vue count:', Singleton.count);
    }
}
webpack模块定义和使用的模式

输出

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

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

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

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



本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/7137902.html   ,如需转载请自行联系原作者
上一篇:《ASP.NET 开发从入门到精通》----2.2 Visual Studio 2012概述


下一篇:使用js callback机制实现调用页面局部刷新