模块化

2020-09-18 本文已影响0人想吃热干面了

一、为什么使用模块化

不使用模块化可能遇到的问题：全局变量同名的问题

A，B在一个项目组中，A创建了一个aaa.js文件，并且设置了一个var flag = true；之后，B创建了bbb.js文件定义了一个var flag = false；在这之后，A因为需求，有创建了一个新的ccc.js文件，并且需要设置一个flag时，想起自己在aaa.js中设置了一个flag，所以就直接用了，并没有设置新的；但是结果确实判断为false，A查看自己的代码却找不到问题所在。这是因为前端代码作用域的问题，ccc.js中判断使用的是bbb.js中的flag，所以是false。当然，开发中一般很少遇到这种问题，因为都会直接重新定义一个flag。

全局变量同名的问题可以使用匿名函数（闭包）的方式解决，但是又会引出新的问题，那就是代码的复用性变差了。因为函数有自己的作用域，所以函数外无法使用函数内定义的变量，函数。这时就出现了模块化的雏形来解决这个问题。

二、什么是模块化

综上，我们为了解决全局变量重名的问题，使用匿名函数，从而引发新的问题，代码复用性变差。为了解决这一问题，模块化的被提出：在匿名函数内部定义一个对对象，将各种需要暴露出到外面的属性和方法添加到对象中，最后将这个对象返回，使用一个模块接受这个对象。这就是模块化。

如下代码，在匿名函数中返回一个obj，其中放入我们需要的值，就可以使用函数内的变量或者函数了。这样就解决了代码复用性的问题

aaa.js文件中这样写

var moduleA = (function () {
  var obj = {};
  var name = '小明';
  var age = 26;
  function sum(num1,num2) {
    return num1 + num2
  };
 var flag = true;
  if (flag){
    console.log(sum(10, 40));
  }

  obj.flag = flag;
  obj.sum = sum;

  return obj;
})();

bbb.js中，可以通过(模块名.属性名)的方式获取需要的值或者函数

(function () {
  if(moduleA.flag) {
    console.log('小明是天才');
  }
  console.log(moduleA.sum(11, 24));
})();

上述就是模块化最基础的封装，模块的原始雏形。
现在前端模块化开发已经有了很多既有的规范，以及对应的实现方案。

常见的模块化规范

CommonJS(Node)
AMD
CMD
ES6的Modules

三、CommonJS（了解）

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

CommonJS的导出：

module.exports = {
  flag: flag,
  sum: sum
}

CommonJS的导入：

var {flag,sum} = require('.../aaa.js')
上面是增强写法，等同于
var aaa = require('.../aaa.js')
var flag = aaa.flag;
var sum = aaa.sum;

四、ES模块化的导入（import）和导出(export)（掌握）

ES6中将一个js文件设置为一个模块：type="module"

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

这样每个js文件就是一个模块，互相不干扰，不会出现命名重复问题，但如果一个模块需要使用另一个模块的数据，就需要导出导入了。

export导出的几种方式

let name = '小明';
let age = 25;
let flag = true;
function sum(num1, num2) {
  return num1 + num2
}
if (flag){
  console.log(sum(10, 20));
}

//1.第一种导出方式
export {
  flag, sum
}

//2.第二种导出方式
export var num1 = 10000;
export var height = 1.88;

//3.导出function/class
export function mul(num1, num2) {
  return num1 * num2
}

export class Person{
  run() {
    console.log('在奔跑');
  }
}

//4.export default  注意：在一个模块中default只能有一个

const address = '北京';
export default address;

// export default function (string) {
//   console.log(string);
// }

import导入的几种方式

//1.导入{}中的数据
import {flag, sum} from "./aaa.js";
if(flag) {
  console.log('小明是天才');
}

//2.对应第二种导出方式
import {num1, height} from "./aaa.js";
console.log(num1);
console.log(height);

//3.导入function/class
import {mul, Person} from "./aaa.js";
console.log(mul(10, 20));

var a = new Person();
a.run();

//4.导入default
import myFuc from "./aaa.js";
console.log(myFuc);
// myFuc('默认事件');


//5.全部导入
import * as aaa from "./aaa.js";
console.log(aaa.flag);
console.log(aaa.mul(11, 20));

模块化