深入理解ES6之var,let,const区别
 深入理解ES6之函数
 深入理解ES6之对象
 深入理解ES6之类
 深入理解ES6之解构
 深入理解ES6之Promise与异步编程

一：模块背景：

JS”共享一切”的代码加载方式是该语言混乱且容易出错的原因之一，这种方式导致了诸多问题，例如命名冲突，安全问题等。ES6模块化就是要解决作用域问题，让JS变的更有条理。
模块的特点
1：模块代码自动运行在严格模式下，并且没有任何办法退出严格模式。
2：在模块顶层作用域创建的变量，不会被自动添加到共享的全局作用域，他们只会在模块的顶层作用域内部存在。
3：模块的顶层作用域this值为undefined。
4：对于需要让模块外部访问的内容，模块必须导出他们。
5：允许模块从其他模块导入绑定。

二：模块使用：

1：模块导出

//导出变量
export var color = "red"
//导出函数
export function sum(num1,num2){
    return num1+num2;
}
//导出类
export class Rectangle{    
}

function multiply(num1,num2){
}
export {multiply}；

注意
1：导出的函数声明与类声明必须要有名称。
2：不仅能导出声明还能导出引用。
2：模块导入

import {sum} from './example.js';//导入单个
import {sum，multiply,color} from './example.js';//导入多个
import * as example from './example.js';//全部导入

注意

import {sum} from './example.js';//导入单个
console.log(sum(1,2))   // 3
sum = 1;                         // 错误

1：当导入一个模块绑定时，不能再定义另一个同名变量，不能在对应的import前使用此标识符，更不能修改它的值。
2：export和import都有一个重要的限制,那就是他们必须用在其他语句或表达式的外部。不能任何方式动态使用，export和import关键字被设计为静态的，以便让文本编译工具之类的工具能判断哪些信息可用。
3：重命名导入与导出

//导出
function sum(num1,num2){
return num1+num2;
}
export {sum as add}

//引用
import {add} from './example';
//重命名引用
import {add as sum} from './example';

4：模块默认值

//导出默认值
export default function(num1,num2){
   return num1+num2;
}
export let color = "red"
//导入默认值
import sum,{sum} from './example'
//import语句中默认名称必须位于非默认名称之前

5：绑定的再导入

export {sum} from "./example.js"

6:无绑定的导入
有些模块也许没有进行任何导出，相反只是修改全局作用域的对象。尽管这种模块的顶级变量，函数或类最终并不会自动加入全局作用域，但这并不意味着该模块无法访问全局作用域。

//没有导出与导入模块
Array.prototype.pushAll = function(items){
 if(!Array.isArray(items)){//items必须是一个数组
      throw new TypeError("Argument must be an array.");
}
//使用内置的push()与扩展运算符
return this.push(...items)}

这是一个有效的模块，尽管没有任何导入与导出。

import "./example.js";
let colors = ["red","green","blue"];
let items = [];
items.pushAll(colors);

深入理解ES6之模块

一：模块背景：

二：模块使用：

猜你喜欢