前端模块化

前端模块化

1. 为什么要使用模块化
   在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。直接将代码写在script标签中即可
   但是随着ajax异步请求的出现，慢慢形成了前后端的分离
   客户端需要完成的事情越来越多，代码量也是与日俱增。
   为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。
   但是这种维护方式，依然不能避免一些灾难性的问题。比如：比如全局变量同名问题，这种代码的编写方式对js文件的依赖顺序几乎是强制性的，如果有相关变量名就会使数据混乱，而且代码的复用性差
2. 解决数据混乱的方法：
   传统解决方案：使用匿名函数把数据返回出去
   
   使用模块化规范解决
   常见的模块化规范：
   CommonJS、AMD、CMD，也有ES6的Modules
   ES5没有模块化的概念，ES6提出的模块化，CommonJS 所说的模块化只是一些规范规定了模块化应该怎么写，Node.js 遵循commonJS规范具体的实现通过node实现的
   common]S规范中模块化
   common]S规范中模块化的特点:1.每一个js文件都是一 个独立的模块，js和js之前互相不影2.模块可以多次加载，但只在第一-次加载时运行， 然后运行结果就被缓存下来了。以后再加载，就是读取的缓存3.模块的加载顺序，按照它们在代码中出现的先后顺序。4.必须依赖node环境才能使用

(1). 概念：每一个JS文件独立成为一个模块，有自己的作用域（使JS与JS文件中不能访问其他JS的内容，但是可以通过引入和暴露来实现JS之间互相访问）

(2). 暴露：module.exports属性用来定义对外暴露的接口。

//b.js文件暴露
Var b=2
module.exports.bb=b//暴露语法表示将变量b赋值给module.exports 的b属性 暴露的是变量
//暴露多个变量
// a.js
const a = 1;
function foo() {
    console.log("hello foo");
}
module.exports = {
    a: a,
    foo: foo
}

(3)引入：require （路径）注意（1）引入同级文件必须要加./ （2）不加/表示加载的包是 Node.js 中的内置模块或者自己下载的第三方模块；（3）引入的文件 .js后缀可以省略。

//a.js文件引入b.js文件   
var b= require("./b.js") //用变量b接收传过来的变量
console.info("biib",b)

//引入多个时的表达
const {a:a, foo:foo} = require('./a.js');
console.log(a);
foo();

(4).模块的缓存：第一次把一个模块加载好之后，Nodejs 会缓存该模块。后续再加载该模块，就直接从缓存中读取。也就意味着，同一个文件被 require 多次，只会执行一次。
ES6的Modules模块化
（1）. 在es5之前前端是没有专门的模块化，从 ES6 开始，前端也支持模块化
（2）. 暴露export 和export default基本使用：
export指令用于导出变量，比如下面的代码：

export也可以输出函数或者输出类

export default:某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，这个时候就可以使用export default
在文件中只暴露一个变量

注意：1. export:在一个JS文件中可以暴露多个
     2. export default:在文件中只暴露一个变量

（3）. 引入：使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来引入加载对应的这个模块
首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module

1. import:加载JS文件

2. import{对应名称}from“路径”:加载并引入，引入的是通过export暴露的数据

3. import 随意命名 from“路径”：加载并引入，映入的是通过export default暴露的数据