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:注意模块定义和使用该模块的模式区分

转载于:https://www.cnblogs.com/lovesong/p/7137902.html

webpack模块定义和使用的模式相关推荐

webpack模块解析
模块在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块每个模块具有比完整程序更小的接触面,使得校验.调试.测试轻而易举. ...
实现一个webpack模块解析器
最近在学习 webpack源码,由于源码比较复杂,就先梳理了一下整体流程,就参考官网的例子,手写一个最基本的 webpack 模块解析器. 代码很少,github地址:手写webpack模块解析器整 ...
E22 SX1268 LoRa模块传输测试（定点模式）发送接收串口消息 windows与linux环境下C语言代码
前言近期因项目需求,对LoRa透传模块进行测试学习. 本次测试的模块是成都ebyte公司的LoRa模块,型号为SX1268.该模块采用串口透传模式. 本博客主要记录了模块的定点传输模式,透传模式相对 ...
Go1.18 新特性：多模块（Multi-Module）工作区模式
文章目录背景举例:未发布的 module Go1.18 新特性:多模块(Multi-Module)工作区模式 Go1.18 工作区模式初始化一个新的工作区 go work use 添加新的模块到 ...
数据库的定义、模型和模式
目录数据库的定义数据模型数据库系统的模式数据库的定义数据库是长期储存在计算机内.有组织的.可共享的大量数据的集合. 数据库中的数据按一定的数据模型组织.描述和存储,具有较小的冗余度.较高的数 ...
QML模块定义qmldir文件
QML模块定义qmldir文件模块定义qmldir文件模块定义qmldir文件的内容版本化语义 qmldir文件的示例编写qmltypes文件模块定义qmldir文件有两种不同类型的qml ...
初入SysML之模块定义图
如果把系统工程看做一座山,那么基于SysML或UML的各种图就是从不同角度去看这座山所形成的"画"."横看成岭侧成峰,远近高低各不同",每幅"画&qu ...
无线Wifi模块AP和STA工作模式详解
无线Wifi模块AP和STA工作模式详解 Wifi模块包括两种工作模式AP和STA,在这两模式的支持下,无线图传产品可以实现一发多收的功能.下面我们就从AP和STA的基本概念开始了解它们. 一.AP和 ...
HC05蓝牙模块配对步骤及AT模式设置方法
如果要使用HC05进行通信的话,配置蓝牙名称,配对密码,设置主从模式,设置波特率,然后退出AT模式,使用HC05连接另一个蓝牙设备即可,使用单片机向连接蓝牙的串口便可以收发数据了. HC05蓝牙模块的 ...

webpack模块定义和使用的模式

webpack模块定义和使用的模式相关推荐

最新文章

热门文章