前端的模块化

前端的模块化

什么是模块化：就是一个实现特定功能的js文件；

作用：一个管理方法，是一种生产方式，解决问题的方案；

优点：可以让我们更方便的使用已写好的代码，想要实现什么功能，就加载什么模块；

方案

1. 利用闭包和函数作用域

var  模块名 = (function(参数接收){
....
return {
      变量1，
      变量2，
      变量n
}
})(引入其他模块名)
//执行
模块名.变量

2.ES6模块化

2,ES6支持模块化 但在html链接js文件中需要加入type=“module”属性

 <script src="./index.js" type="module"></script>

3,export 导出
4, import 导入

var aNum = 10;
var aStr = "a";
export{
  aNum as num,
  aStr as str
}

在同级建js文件

import {num,str} from "./a.js"
console.log(num,str);

3. node的模块化

module对象是node自带的模块化对象
（1）内置模块，可以直接使用，需要读取
（2）自定义模块，需要手动导出
（3）第三方模块，需下载安装方可使用

自定义

格式

导出1：
module.exports={内容1，...,内容n}
导出2：
exports.内容名=内容；
引入：
let 变量名 = require("模块路径")

exports可以多次导出，但是module.exports只能导出一次,多次导出最后一次生效。
exports和module.exports本质是相等的。
exports是一个引用，指向的是module.exports
如果在同一个文件中使用两种导出，给exports添加的属性和方法，也会添加在module.exports上，但是添加在module.exports上的属性和方法，不会添加在exports上。