您的位置：首页 > Web前端

前端无模块化时的常见问题

2021-02-03 18:32 741 查看

前端开发过程中常见的问题

随着前端项目的日益复杂，项目体积逐渐庞大，前端协作开发中经常遇到以下几类问题：

  1. 各个文件中声明相同的变量名，相互引起冲突
  2. 文件中声明的变量冲突掉全局变量
  3. 各个文件的依赖关系不明确，不敢随意删除一些插件或者少引入一些插件

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的引用。都会造成问题

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航