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

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

  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-summer: 当a.js和b.js中分别声明的变量a。且同时都被同一个html页面引用时，会产生变量冲突

  • Q2-Example

//a.js
window.alert = function() {
    this.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-summer:自定义的模块冲突掉window中内置函数

  • Q3-文件之间的相互依赖不明确

//a.js
$('#div').append('<img src="./1.jpg"/>');
<!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-summer:当我们引入a.js模块时(a模块依赖了jqurey库)，缺忘记引用jquery库或者当我们用不到a模块时，删除了a模块的引用 缺忘记了删除jquery的引用。都会造成问题

版权声明：本文为zhaojian-08原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhaojian-08/p/14364627.html