原生js使用模块化思想解决多人合作中全局变量冲突问题
问题引入
- 我们在参加软件设计大赛做多人合作项目时,负责前端部分有两个人,我们使用的是原生js+JQuery来编写代码(当时只学了这些),由于当时没有学习ES6的模块化,再加上都是一多人合作写项目,在整个项目完成下来踩了不少坑,其中最大的坑就是代码冲突,主要是全局变量污染的锅,每次合并代码都会有莫名其妙的问题。
案列
- 小明和小红两个各自写自己的js代码,最终合并到同一个index.html中
<!-- index.html -->
<!-- 小明写aaa.js -->
<script src = './js/aaa.js'></script>
<!-- 小红写bbb.js -->
<script src = './js/bbb.js'></script>
<!-- 小明写ccc.js -->
<script src = './js/ccc.js'></script>
// aaa.js
// 用户是否登录
var isLogin = false;
// 用户登录函数
function login(){
isLogin = true;
}
login();
console.log('aaa:'+isLogin); // true
// bbb.js
var isLogin = false;
console.log('bbb:'+isLogin);