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

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

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

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

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

posted on 2021-02-03 18:32 RisingSunBlogs 阅读(125) 评论(0) 编辑收藏举报