13模块化编程

2022-08-29 20:01:11 阅读：198 来源： 互联网

标签：13 title url 模块化编程导出 js 模块 import

 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>

标签：13,title,url,模块化,编程,导出,js,模块,import
来源： https://www.cnblogs.com/LiuChang-blog/p/16637173.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

13模块化编程