基础模块化和ES6模块化

面临的问题：

           如果你是未使用模块化之前的毕业生，你在接受项目时，可能会絮叨的问题：

                      1.变量名冲突：不同文件中的变量如果重名，前面的会被后面的覆盖，造成程序的执行错误。

                      2.文件依赖顺序：多个文件之间如果存在依赖关系，需要保证加载顺序的准确。

 

什么是模块化

模块化的本质：就是一个实现特定功能的Js文件。

模块化的开发：是一个管理方法，是一种生产方式，解决问题的方案。

      ：模块化可以让我们更方便的使用已经写好的代码，想要实现什么功能，就加载什么模块。就好像积木一样，需要拼接什么形状，就使用相应的积木。

模块化的方案

1.必报和函数作用域

 利用闭包和自执行函数：

var 模块名 = (function(){
	....
	return {
		变量1，
		变量2
	}
})(引入其他的模块名...)

模块名.变量

这种方法是所有模块化的基础：

      1.各个文件之间避免了变量名的冲突。

      2.减少了全局变量。

      3.模块的外部无法修改闭包内部的变量，增加程序的稳定性。

      4.明确了依赖关系

2.ES6模块化

在ES6之间，是没有模块化的概念的，如果要使用模块化的操作：

                     1.一种是闭包+自执行函数。

                     2.一种是引入第三方的类库。

ES6第一次支持了模块化，多了两个模块：

     export  导出

     import  导入

export 变量的声明赋值

import {变量名} from “模块路径”

 【注意】在引入模块文件时，需要在Script标签中添加type属性，属性值为module。

 

如果需要抛出多个变量名，则可以将这些变量包装成对象输出。如果不想暴漏模块中的变量名，可以通过as来操作。

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

接收

import {num,str} from "./a.js";

console.log(num,str);

 

默认导出

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一样。

export default function(){
  console.log("此去泉台招旧部，旌旗十万斩阎罗");
}

import ss from "./a.js";
ss();

可以导出对象

export default {
  fn(){
    console.log("此去泉台招旧部，旌旗十万斩阎罗");
  },
  age:18
}

import ss from "./a.js";
ss.fn();
console.log(ss.age);

基础导出和默认导出

export default {
  fn(){
    console.log("此去泉台招旧部，旌旗十万斩阎罗");
  },
  age:18
}

export let userName = "zhangsan"

import ss,{userName} from "./a.js";
ss.fn();
console.log(ss.age);
console.log(userName)