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);
    }
}
复制代码

输出

总结

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

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

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

分类:  6.前后端工具


本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/7137902.html    ,如需转载请自行联系原作者
相关文章
|
2月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
50 0
|
3月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
18 0
|
3月前
|
测试技术 开发工具 开发者
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(上)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
30 0
|
4月前
|
JavaScript 前端开发
Webpack ECMAScript 模块
Webpack ECMAScript 模块
27 0
|
9月前
Webpack5 系列(六):不同模式的区分打包
Webpack5 系列(六):不同模式的区分打包
53 0
|
4月前
|
前端开发 JavaScript 开发者
webpack模块打包器
Webpack是一种前端资源构建工具,可以将多个文件和模块打包成一个或多个bundle。它具有高度的可配置性,支持各种类型的文件和插件,可以自定义打包过程和结果。Webpack的核心概念包括入口、出口和模式,可以分别用于指示打包的起点、输出位置和优化级别。Webpack还具有自动化构建过程,通过Tapable机制组织多个处理流程,并允许插件监听特定事件来参与整个构建过程。总之,Webpack是一个功能强大的前端资源构建工具,提供了高度可配置的选项和插件机制,方便开发者进行自定义和扩展。
|
5月前
|
移动开发 JSON 自然语言处理
Vue系列教程(16)- 模块打包器(webpack)
Vue系列教程(16)- 模块打包器(webpack)
48 0
|
7月前
|
JavaScript 前端开发
[Node] Node.js Webpack常见的模式
[Node] Node.js Webpack常见的模式
|
11月前
|
前端开发 JavaScript 调度
Webpack5模块联邦源码探究
虽然webpack5已经发布了一段时间了,但一直都没有研究过,最近正好在做微前端相关的调研,恰好看到了webpack5的模块联邦与微前端的相关方案,便想着探究下模块联邦的相关源码。
237 0
|
前端开发 JavaScript
webpack 核心模块 —— loader & plugins(下)
webpack 核心模块 —— loader & plugins
98 0