ES6的模块化

在之前JavaScript是没有模块化概念,如果需要使用模块化的业务,需要引入第三方库.直到ES6代来了模块化,才让JavaScript第一次支持了module.ES6的模块化分为导入(import)和导出(export)两个模块.

模块化的特点:
1、模块代码自动运行在严格模式下,没有任何办法跳出严格模式;
2、在模块的作用域下创建的变量,不会被添加到全局作用域中;
3、如果外部可以读取模块当中的内容,需要模块的导出
4、模块顶级作用域的this为undefined

导出模块export

• 你可以使用export关键字将已发布的代码部分公开给其他模块,最基本的就是将export放置在任意变量、函数或者类声明前,例如:

// 导出数据
export var color = pink;
export const name = 'zs';
//导出函数
export function sum(num1,num2) {
 return num1+num2;
//导出类
export class React{
   constructor(length,width) {
      this.length=length;
      this.width=width;
   }
}
}

⚠️每次这种单独导出的函数或者类都需要有名称,因此这种方法不能用来导出匿名函数和匿名类

• 如果要输出多个变量可以将这些变量包装成对象进行模块化输出,例如:

const name = 'zs';
const age = 18;
const gender = '女';
export {
name,
age,
gender
}

• 如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

const myname='zs';
const myage=18;
const mygender='女';
export {
 myname as name,
 myage as age,
 mygender as gender
}

• 默认导出(export default)
  一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

/******************************导出**********************/
export default function(){
   return "默认导出一个方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法

可以将需要导出的变量放在对象当中,然后通过export default导出

/******************************导出**********************/
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 laowang

同样也适合混合导出

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默认导出一个方法 laowang

导入模块import

• 一旦你有了导出的模块,就能在其他模块中使用import来访问导出的功能,import语句有两部分,一个是需要导入的标识符,一个是来源模块,基本语句如下:

import {name,age} from './index.js'

• 可以导入文件中的单个数据,也可以按需导入数据

import{sum} from './index.js'
//按需导入
import {num1,num2,muilt} from './index.js'

• 也可以直接导入整个模块,通过*来批量接收

import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
console.log(info.fn());//我是laowang！今年90岁了
console.log(info.age);//90
console.log(info.name);//laowang

• 重命名导入,如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/******************************test1.js**********************/
export let myName="我来自test1.js";
/******************************test2.js**********************/
export let myName="我来自test2.js";
/******************************index.js**********************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我来自test1.js
console.log(name2);//我来自test1.js