【人生苦短我学Vue】-【DAY07】-前端模块化

大家好，我是被白菜拱的猪。

一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!

今天让我们开始第七天的学习，走进前端模块化的殿堂。

一、前端模块化

1-为什么要使用模块化开发

在我们真实开发过程中，大部分是多人合作的，而且随着前端的发展，现在一个项目需要很多个js文件。这就导致了一个灾难性问题，即全局变量同名问题，比如我定义了一个name变量，我的好基友好伙伴好同事也定义了一个name属性。然后我再另一个.js文件使用name变量时，本来明明是叫宇宙无敌第一帅的，怎么变成大傻逼了呢？小朋友，我有很多问号呀，于是找啊找，十几个.js文件，能找到啥时候，凉了今晚又要让老婆独守空房了。

世界上最悲催的事情莫过于自己的买的基金绿了的同时头上的帽子也绿了。

于是为了避免程序员不必要的加班，所以引出了模块化这个概念，刚开始我们可以使用匿名函数来保证自己变量的唯一性，我们知道在ES5中函数是有其作用域的，但是这样无法拿到值啊，于是我们取个名字，例如muduleA，然后在另一个文件直接使用muduleA。

自定义的.js

moduleA=(function(){
  var name ='ljl is a coding handsome boy'
  return name
})()

main.js

console.log(moduleA);

以上是我们自定义的模块
常见的模块化规范有：
CommoJS，AMD，CMD，和ES6中的Modules

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

下面我们就简单介绍一下我们日后会使用到的CommonJS和ES6中的Modules的导入和导出。

2-CommonJS

（1）使用exports导出

（2）使用require导入

这个仅做了解，下面的内容要牢记，使用十分频繁。

3-ES6的模块化

在使用之前，我们在HTML文件中使用js时要加一个属性，type=‘mudule’,目的就是把他们各自放在各自的房间里面，互不影响，这就是一个模块，这样就保证了避免全局变量重名等一系列的问题。然后通过export，import等方式拿来使用。

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

（1）export的使用

a.导出的是变量

export:

  let name ='ljl is a coding handsome'
  let height = 1.88

  export {name,height}

import:

import {name , height} from "./aaa.js";

console.log(name);
console.log(height);

b.导出的是函数/类

export:

//函数
function sum(num1,num2) {
  return num1+num2;
}

//类
class Person {
  run(){
    console.log('coding handsome boy is running');
  }
}

export {sum,Person}

import:

import {sum,Person} from "./aaa.js";
sum(10,20);
const ljl = new Person();
ljl.run()

c.export default

像前面我们导入的时候名字要跟导出时的一样。
当一个模块中有一个功能，我们不想给他命名，想要导入者自己给他命名，这时候我们就要使用export default。

const name = 'coding handsome boy!!!'
export default name

import aaa from "./aaa.js";

console.log(aaa);

而且在导出函数的时候我们可以不用给他取函数名

注意：一个模块中不允许存在多个export default

（2）import的使用

导入的时候首先要确保是否添加了type=‘mudule’，
假如我们想要引入所有的话，这跟python的引包很像，所以说语言都是互通的嘛。
语法： import * as a from ‘xxx.js’
as a 是取个别名。

二、结束语

今天效率颇低。