13模块化编程

2022/8/30 1:22:47

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

本文主要是介绍13模块化编程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 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模块化编程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

13模块化编程

相关编程文章