比如我们有一个01.html，然后引入一个01.js，那么这种就叫做全局引入，全局引入会面临一个问题，01.js的变量和函数在01.html中可以被调用，如果01.html再引入另外一个02.js，有相同的变量就会出问题，这种叫做全局污染

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.     </head>
    8.     <body>
    9.         <script type="text/javascript" src="./01.js"></script>
    11.         <script type="text/javascript" >
    12.              document.write(a)
    13.         </script>
    15.     </body>
    16. </html>
    19. 其中01.js的内容如下：
    20. var  a = 100
    21. var b = 200 
    23. function  test (a,b) {
    24.     return a + b 
    25. }
    27. 页面显示为100

    现在我们在一个html中引入两个js，01和02，我们将02.js中a = 200

    其中02.js的内容如下
var  a = 200
var b = 300 

function  test (a,b) {
    return a - b 
}


Html变更如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript" src="./01.js"></script>
        <script type="text/javascript" src="./02.js"></script>

        <script type="text/javascript" >
             document.write(a)
        </script>

    </body>
</html>

页面显示200

    如何解决这个污染的问题？
    现在我们需要进行模块化设计，只在一个模块中引用，而不是全局引用
    修改参数type=”text/javascript” 为 type=“module”

    模块的引入

    我们需要修改如下配置01.js

var  a = 100
var b = 200 

function  test (a,b) {
    return a + b 
}
//这是新增的
console.log(a)


在html中做引用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <script type="module" src="./01.js"></script>

        <script type="text/javascript" src="./02.js"></script>
        <script type="text/javascript" >
            document.write(a)
        </script>


    </body>
</html>



我们发现console中打印出了100,但是页面中显示了200

    所以什么是模块？
    我们把01.js当作一个模块，如果使用module的方式引入，那么a的作用域只会在01.js内部