Note(笔记):
随着浏览器对于js模块化的规范性,使用模块化越来越方便,工作之余回忆一下几个特性。
features(特性):
1.use strict 自带严格模式
<!-- // the first feature.自带严格模式 不用写use strict
// 非严格模式的this是全局对象window,如果是严格模式,this是undefined -->
2.Variables are not contaminated变量不会被污染
<!-- the second feature,每一个模块是一个私有变量,不会污染 -->
3.cors
<!-- the third feature,es module 请求外部需要通过cors请求,也就是不在同源地址下的话,
就需要请求的服务端地址响应的响应头必须要提供cors标头 -->
4. defer
<!-- the fouth feature:es module's script code can be ran delaily 会被延迟执行 和defer属性是一样的-->
code (代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
console.log('this is es module');
</script>
<!-- // the first feature.自带严格模式 不用写use strict
// 非严格模式的this是全局对象window,如果是严格模式,this是undefined -->
<script>
console.log(this)
</script>
<script type="module">
console.log(this)
</script>
<!-- the second feature,每一个模块是一个私有变量,不会污染 -->
<script type="module">
let foo = 0
console.log(foo)
</script>
<!-- <script type="module">
console.log(foo) // 报错了
</script> -->
<!-- the third feature,es module 请求外部需要通过cors请求,也就是不在同源地址下的话,
就需要请求的服务端地址响应的响应头必须要提供cors标头 -->
<!-- <script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js">
// 请求被拒绝
</script> -->
<!-- <script type="module" src="https://unpkg.com/jquery/3.4.1/dist/jquery.min.js">
// 请求可以,服务器支持cors
</script> -->
<!-- the fouth feature:es module's script code can be ran delaily 会被延迟执行 和defer属性是一样的-->
<!-- <script src="./test1.js">
</script>
<p>5555555555555555</p> // 同步执行 -->
<script type="module" src="./test1.js">
</script>
<p>5555555555555555</p> // 异步执行
</body>
</html>