ES6入门之Module

本文首发于公众号：小夭同窗，同步更新我的博客：故事胶片，转载请署名。

一、概述

JS中一直没有 module 体系，没法将一个大程序拆分红依赖的小文件，在用简单的方法拼接起来。ES6 的模块设计思想是尽可能静态化，使得编译时就能肯定模块的依赖关系，以及输入和输出的变量。

ES6模块不是对象，而是经过 export 命令显式指定输出的代码，再经过import 命令输入。以下：

import {state, getNum, setPost} form 'api'

复制代码

以上方法实质上是从 api模块加载了3个方法，api中其余的方法不加载。这种加载就是 编译时加载或者静态加载

1.1 ES6模块的好处

• 不在须要UMD模块格式。
• 未来浏览器的新API就能用模块格式提供，不在必须作成全局变量或 navigator 对象的属性。
• 不在须要命名空间

二、严格模式

ES6的模块自动采用严格模式，无论你有没有再模块头部加上 「use strict」

2.1 严格模式的限制

• 变量必须声明再使用
• 函数的参数不能有同名属性，不然报错
• 不能使用with语句
• 不能对只读属性赋值，不然报错
• 不能删除不可删除的属性，不然报错
• 不能删除变量 delete prop，会报错，只能删除属性delete global[prop]
• eval不会在它的外层做用域引入变量
• eval和arguments不能被从新赋值
• arguments不会自动反应函数的变化
• 不能使用 arguments.callee
• 不能使用 arguments.caller
• 禁止 this 指向全局对象（顶层指向 undefined，因此不能在顶层代码中使用 this）
• 不能使用 fn.caller 和 fn.arguments获取调用的堆栈
• 增长了保留字段（如：protected、static、interface）

三、export命令

模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其余模块提供的功能

另一个模块就是一个独立的文件。该文件内部的全部变量，外部没法获取。若是你但愿可以再外部读取某个模块内部的变量，那么就须要使用 export 输出该变量。以下：

export function test() {
    console.log('export')
}

或者

let test = 'test'

export { test }
复制代码

第一种方法是直接输出该变量，第二种这是一次性输出一组变量。可根据状况酌情使用。

一般状况下，export输出的是变量自己的名字，若是想重命名的话，能够经过 as 关键字。

function a () {}
function b () {}

export {
    a as a1,
    b as b1
}
复制代码

敲黑板： export 规定的是对外的接口，必须与模块内部的变量创建一一对应关系。

export 1 // 报错
var m = 1 
export m // 报错

export const m = 1 // 正确
export(const m = 1) // 正确
const n = 1
export {n as m} // 正确

function a(){}
export a    // 报错

export function a() {} // 正确
export(a)   //正确
复制代码

export 命令能够出如今模块的任何位置，只要处于模块顶层就能够。若是处于块级做用域中就会报错。

四、import命令

使用了export 输出模块定义的接口以后可使用 import 加载这个模块。

a.js
export function test() {}

b.js
import test from 'a.js'

// 为 test 从新定义名字
import {test as ttt} from 'a.js'
复制代码

若是有多个接口能够一行引入
import {a, b, c} from 'a'

import 'a'  // 加载a中全部模块
复制代码

敲重点： import 输入的变量都是只读的，由于它的本质是输入接口。也就是说，不容许在加载模块的脚本里改写接口。

五、模块的总体加载

除了指定加载某个输出值，还可使用总体加载，即用 星号 （*）指定对象，全部输出值都加载在这个对象上面。以下：

通常写法

a.js 中
export function add (num) {
    return num = num * num
}
export function put (name) {
    retrun name = name + 'hh'
}
// 引用
import {add, put} from 'a'
console.log(add(3), put('put'))
复制代码

总体加载

import * as go from 'a'
console.log(go.add(3), go.put('put'))
复制代码

六、export default

在上面能够看出，使用 import 命令的时候，用户须要知道所要加载的变量名或函数名，不然没法加载。若是想快速的加载模块，在这里可使用 export default, 为模块指定默认输出。

export default function () {
    console.log('hahha')
}

import hhh from 'a' // 引用的时候能够指定任意名字
复制代码

非匿名函数

export default function hah(){
    console.log('哈哈')
}

// 或者

function hah(){
    console.log('hah')
}
export default hah
import hah from 'a'

// 也能够更换名字
import {b as a } import 'a'
复制代码

敲黑板：

// defautl 方式输出 import 引入的时候变量名直接写
export default function aa(){}
import aa form 'a'

// 非defautl 方式输出 import 引入的时候变量名需加花括号
export function aa(){}
import {aa} form 'a'
复制代码

export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出。所以 export default 命令只能使用一次。因此 import引入的时候 方法名才不须要加括号。

七、export 与 import 的复合写法

若是在一个模块中，先输入后输出同一个模块

export { c, b } from 'a';

// 能够简单理解为
import { c, b } from 'a';
export { c, b };
复制代码

重学js系列

重学js之JavaScript简介

重学 JS 之在 HTML 中使用 JavaScript

重学js之JavaScript基本概念（上）=> 数据类型

重学js之JavaScript基本概念（中）=> 操做符

重学js之JavaScript基本概念（下）=> 运算符

重学js之JavaScript变量、做用域和内存问题

重学js之JavaScript引用类型

重学js之JavaScript 面向对象的程序设计（建立对象）

重学JavaScript之面向对象的程序设计 => 继承

重学JavaScript之匿名函数

重学JavaScript之window

ES6入门系列

ES6入门之let、cont

ES6入门之变量的解构赋值

ES6入门之字符串的扩展

ES6入门之正则的扩展

ES6入门之数值的扩展

ES6入门之函数的扩展

ES6入门之数组的扩展

ES6入门之对象的扩展

ES6入门之Symbol

ES6入门之Set 和 Map

Es6入门之proxy

ES6入门之Promise对象

Git教程

前端Git基础教程

Python玩转微信

Python 实现微信自动经过好友添加请求！！！

Python + Wxpy 实现微信防撤回。

Python获取好友地区分布及好友性别分布