前端模块化

Posted 2021-03-23 xfych

前端模块化

JavaScript**原始功能**

1. 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的

那个时候的代码是怎么写的呢？直接将代码写在<script>标签中即可

2.随着ajax异步请求的出现，慢慢形成了前后端的分离

客户端需要完成的事情越来越多，代码量也是与日俱增。

为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。

但是这种维护方式，依然不能避免一些灾难性的问题。

3.常见的模块化规范

CommonJS、AMD、CMD，也有ES6的Modules

前端模块化：CommonJS,AMD,CMD,ES6

模块化有两个核心：导出和导入

CommonJS的导出：

?

 

CommonJS的导入

ES6 导入

在es5中，用module.exports和exports导出模块，用require引入模块。

es6新增export和export default导出模块，import导入模块。

export导出

//对外部输出三个变量----》声明后输出
// js 文件内部
export var name = ‘zjl‘
export var age = 18
export var gender = ‘男‘

// 对外输出三个变量-----》先声明再输出   优先使用这种写法
?
var name = ‘zjl‘
var age = 18
var gender = ‘男‘
export {name,age,gender}

## 输出函数：
export function test(x,y){
   return x*y;          
}

import引入

// 大括号内的变量名，必须跟 export 对外接口的变量名一致
import {name,age,gender}  from ‘./XXX.js‘
?
?
## 注意几个 import 关键点
①import 导入的值都是只读的，不允许修改输入的接口。
?
②可以修改导入的对象 ，可以修改导入对象的属性，但不推荐这样做，建议把导入的变量（不管是普通变量还是对象）都当做只读的。
?
③import.....from 中 from 后面的路径可以是绝路径也可以是相对路径。
?
④js模块导入时可以省略后面 的 .js后缀。
?
⑤import 命令具有提升效果，它会把import命令提升到模块的头部，首先执行。
?
⑥执行同一个import命令多次，默认只会执行一次，不会执行多次
?
import {name} from ‘./XXX.js‘
import {name} from ‘./XXX.js‘
//只会执行一次
⑦从同一个模块通过多条import加载不同变量，但它们对应的是同一个模块实例。import语句是 单例模式（Singleton）
?
import {name}  from ‘./a.js‘
import {age}  from ‘a.js‘
// 单例模式
?
⑨整体加载模块
?
import *  as user from ‘./a.js‘

export default 导出 ** 只能导出一个默认模块

// 导出模块 a.js，导出一个匿名函数
export default function (){...}
?
//导入模块 b.js,  
import fun  from ‘./a.js‘;    // fun还可以为其他合法的名称
                           
//导出模块一个类
export default class{ static xx(){} }
//导入类
import vv from ‘xx.js‘  // vv还可以为其他合法的名称

[ES6之模块化导入导出](https://www.cnblogs.com/zjl-712/p/11432787.html)