前端开发过程中常见的问题
随着前端项目的日益复杂，项目体积逐渐庞大，前端协作开发中经常遇到以下几类问题：
- 各个文件中声明相同的变量名，相互引起冲突
- 文件中声明的变量冲突掉全局变量
- 各个文件的依赖关系不明确，不敢随意删除一些插件或者少引入一些插件
Q1-Example
//a.js
var a=1;
//b.js
var a=10;
//index.html
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>index</title>
<script src="./b.js"></script>
<script src="./a.js"></script>
</head>
<body>
<h1>demo</h1>
<script>
console.log(a);
</script>
</body>
Q1-summary: 当a.js和b.js中分别声明的变量a。且同时都被同一个html页面引用时，会产生变量冲突
Q2-Example
//a.js
window.alert = function() {
console.log('冲突掉window中的alert')
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>index-Q2</title>
<script src="./a.js"></script>
</head>
<body>
<script>
window.alert("aaaa");
</script>
</body>
</html>
Q2-summary:自定义的模块冲突掉window中内置函数
Q3-文件之间的相互依赖不明确
//a.js
$('#div').append('<img src="./1.jpg"/>');
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
<script src="./a.js"></script>
</head>
<body>
</body>
</html>
Q3-summary:当我们引入a.js模块时(a模块依赖了jqurey库)，缺忘记引用jquery库或者当我们用不到a模块时，删除了a模块的引用 缺忘记了删除jquery的引用。都会造成问题