1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>13模块化编程</title>
9 </head>
10 <body>
11 <!--13.10 按需动态加载模块-->
12 <!--<button type="button">点我</button>-->
13
14 <script type = "module">
15 /*说明:
16 (1) 模块化就是把不同的功能，拆分为不同的文件，然后可以开放部分接口给外部。
17 */
18
19 /*13.1 模块的基本使用*/
20 // import {title, url} from "./01base.js";
21 // console.log(title, url); // 百度 baidu.com
22
23 /*13.2 模块延迟解析与严格模式*/
24 // 模块最后解析；模块自动使用严格模式
25 // console.log(this); // undefined
26
27 /*13.3 作用域在模块中的体现*/
28 /* 说明:
29 (1) 多个<script>标签同属于顶级作用域，代码可以相互访问。
30 (2) 多个<script type = "module">模块标签各自具有独立的作用域(类似于不同函数内的变量)，所以模块需要导出后外部才能够使用。只要模块里的功能不开放，外部是无法访问到的。
31 (3) 独立作用域可以访问顶级作用域，相反则不能访问。
32 */
33 // import {} from "./03/hd.js";
34 // import {} from "./03/houdunren.js";
35 // 后盾人
36
37 /*13.4 模块预解析的必要性*/
38 // 模块无论加载多少次，总在第一次加载的时候执行
39
40 /*13.5 批量导入与建议*/
41 // 批量导入会导入没有被使用的导出模块，打包时会打包所有批量导出的模块，所以建议具名导入模块。
42 // import * as api from "./01base.js";
43 // console.log(api.title, api.url); // 百度 baidu.com
44
45 /*13.6 模块别名的使用*/
46 // 防止变量重名，重名时系统会报错
47 /*13.6.1 模块导入别名*/
48 // import {title as tit} from "./01base.js";
49 // let title = "搜狐";
50 // console.log(tit); // 百度
51
52 /*13.6.2 模块导出别名*/
53 // let title = "百度";
54 // export {title as tit};
55
56 /*13.7 模块默认导出*/
57 // 只导出一个模块变量
58
59 // 模块导出操作
60 // let title = "百度";
61 // export {title as default};
62 // 模块导入操作
63 // import <使用任意的变量名来接收默认导出> from "./01base.js";
64
65 /*13.8 模块默认和具名混合导入导出的使用*/
66 /*13.8.1 模块导出操作*/
67 // let title = "百度";
68 // let url = "baidu.com";
69 // export {title as default, url};
70
71 /*13.8.2 模块导入操作*/
72 // import def, {url} from "./01base.js";
73
74 /*13.9 模块的合并导出*/
75 // import {} from "./09/m13.js";
76
77 /*13.10 按需动态加载模块*/
78 // document.querySelector("button").addEventListener("click", function() {
79 // import ("./10/m14.js").then(({site,url}) => {
80 // console.log(site,url); // 后盾人 houdunren.com
81 // });
82 // });
83
84 </script>
85 </body>
86 </html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/282926.html