As front-end projects become increasingly complex and bulky, the following problems are often encountered in front-end collaborative development:

  1. The same variable name is declared in each file, causing conflicts
  2. Variables declared in files conflict with global variables
  3. The dependency of each file is not clear, so I dare not delete some plug-ins or introduce some plug-ins at will

Q1-Example

//a.js
var a=1;
Copy the code
//b.js
var a=10;
Copy the code
//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>
Copy the code

Q1-summary: when variable A is declared in A. js and B. js respectively. Variable conflicts occur when both are referenced by the same HTML page at the same time

Q2-Example

//a.js
window.alert = function() {
    console.log('Collide with Alert in window')}Copy the code
//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>
Copy the code

Q2-summary: Custom modules collide with built-in functions in Windows

Q3- The interdependence between files is not clear

//a.js
$('#div').append('<img src="./1.jpg"/>');
Copy the code
//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. s "> < / script > </head> <body> </body> </html>Copy the code

Q3-summary: When we introduced the A. js module (module A relies on the Jqurey library), we forgot to reference the jquery library, or when we didn’t need module A, we deleted the reference of module A and forgot to delete the reference of jquery. Can cause problems.