模块化开发(export和import)

为什么要用模块化开发?

• 提高代码的复用性：模块化可以将代码划分成可重用的部分，降低代码的冗余和重复，提高代码的复用性。
• 简化代码的维护和调试：当一个软件系统变得越来越复杂时，进行模块化开发可以使得每个模块都相对独立，这样就可以方便地维护和调试每个模块，而不必考虑整个系统的复杂性。
• 提高代码的可读性：模块化可以使得代码更加结构化，清晰明了，从而提高代码的可读性和可维护性。
• 提高开发效率：模块化开发可以使得团队成员在不同模块上并行开发，从而提高开发效率。
• 降低项目的风险：模块化开发可以使得开发人员更加关注模块之间的接口和依赖关系，从而降低项目的风险
• 总之，模块化开发是一种有效的软件开发模式，可以提高软件开发的质量、效率和可维护性，特别是在大型软件系统的开发中，模块化更是必不可少的。

上面的回答就属于经典的八股文了,面试经常使用到

使用模块化

1,如果要在html文件内部导入模块就需要将type改为module

<script type="module"></script>

2.创建js文件导入

3.使用export将想要暴露的值导出

//------day1.js------------
let name ="zs";
let age =18;
function func(){
}
// 第一种
export {name,age,func}
// 第二种
 export {name as aa}
// 第三种
 export default name;

从上面那个栗子可以看到,导出的方式有三种,那都有什么区别嘞?
第一种:统一暴露,这里面的变量需要在导入文件使用相同的变量名接收
第二种:使用as改完名后统一暴露,这里面的变量名修改后,导入文件可以使用修改后的变量名接收
第三种:默认暴露,用引入方式调用时需加default属性,一个模块只能使用一次

4.使用import将模块导入

let obj={};
		// 第一种
		 import {userName,age} from "./day1.js"
		// 第二种
		 import {userName as aaa} from "./day1.js"
		 import {userName as aaa,age as bbb} from "./day1.js"
		 //第三种
		 import obj from "./day1.js"
		//第四种
		 import * as abc from "./day1.js"

从上面那个栗子可以看到,导入的方式有四种,都是啥嘞?
第一种:直接用变量名导入
第二种:将变量名修改后导入
第三种:创建一个对象,将导入的值存入对象里面
第四种:import * 来导出文件模块的所有接口

使用模块化需要注意的点

	模块化默认模式为:严格模式use strict;
	module模式
	export导出
	import导入
	as不同模块导出接口名称命名重复， 使用 as 重新定义变量名。
	1.导出的函数声明与类声明必须要有名称(匿名函数)（export default 命令另外考虑）。 
	2.不仅能导出声明还能导出引用（例如函数）。
	3.export 命令可以出现在模块的任何位置
	4.import 命令会提升到整个模块的头部，首先执行。
	5.建议使用大括号指定所要输出的一组变量写在文档尾部，明确导出的接口。
	6.函数与类都需要有对应的名称，导出文档尾部也避免了无对应名称。
	7.export 命令导出的接口名称，须和模块内部的变量有一一对应关系。
	8.导入的变量名，须和导出的接口名称相同，即顺序可以不一致。
	9.import只读属性：不允许在加载模块的脚本里面，
	改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，
	不能改写 import 变量类型为基本类型的值。
	10.单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。
	import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。
	11.import静态执行特性：import 是静态执行，所以不能使用表达式和变量。