1. 用模块封装代码

模块：自动运行在严格模式下并且没有办法退出运行的JavaScript代码

注：1）在模块顶部创建的变量不会自动被添加到全局共享作用域；这个变量仅在模块的顶级作用域中存在，

模块必须导出外部代码可以访问的元素，如：变量或函数是（模块可以从其他模块导入绑定）

2）模块间的特性与作用域关系不大，但很重要

1.模块顶部，this的值是undefined;

2.模块不支持html风格的代码注释(早期浏览器残余下来的js特性);

脚本？模块？

脚本 == 任何非模块的js代码

 

2. 导出的基本语法？

export关键字作用：将代码暴露给其他模块

{

可以将export放在任何变量、函数或类声明的前面（从模块导出）

}

// 导出数据(变量)

export var color= "red"

export let name = "dachengz"

export const farmNum = 77

// 导出函数 此方式属于导出声明

export function sum(num1, num2){

return num1 + num2;

}

// 导出类

export class Rectangle {

constructor(length, width) {

this.length = length

this.width = width

}

}

// 函数是模块私有的

function subtract(num3, num4){

return num3 - num4

}

// 定义一个函数- 外部无法访问（属于模块的私有方法）

function multiple(a,b) {

return a * b

}

// ...将它导出 此方式属于导出引用

export multiple

3. 导入的基本语法

import 语句两个部分分别是： 要导入的标识符和标识符应当从哪个模块导入

import { A, B} from './example.js'

{} : 从给定模块导入的绑定（binding）

关键字from : 表示从哪个模块导入给定的绑定（该模块由表示模块路径的字符串指定）被称作模块的说明符

1.导入单个绑定

import {sum} from './example.js'

console.log(sum(1,2)) // 3

sum =1 // 抛出一个错误 不能给导入的绑定重新赋值

注意：为了兼容多个浏览器和Node.js环境， 一定要在字符串之前包含 / 、./ 、或 ../ 来表示要导入的文件

2. 导入多个绑定

导入3个绑定

import {sum, multiple, farmNum} from './example.js'

console.log(sum(1,farmNum)) // 78

console.log(multiple(1,2)) // 2

3.导入整个模块

特殊情况下，可导入整个模块作为一个单一的对象。然后所有的导出都可以作为对象的属性使用

// 导入一切 命名空间导入

import * as example from './example.js'

console.log(example.sum(1,example.farmNum)) // 78

console.log(example.multiple(1,2)) // 2

从example.js中导出的所有绑定被加载到一个被称作example的对象中；

注意： 模块语法的限制

{

export、import它们必须在其它语句和函数之外使用。

}

 

4.导入绑定的一个微妙怪异之处

es6中Import语句为变量、函数和类创建的是只读绑定，而不是像正常变量一样简单地引用原始绑定

标识符只有在被导出的模块中可以修改，即便是导入绑定的模块也无法更改绑定的值

export var name = 'dcz'

export function setName(newName) {

name = newName

}

当导入这两个绑定后，setName()函数可以改变name的值

import {name, setName} from './example.js'

console.log(name) // dcz

setName('hehe')

console.log(name) // hehe

name = 'dcz' // 抛出错误

调用setName('Grep') 时会回到导出setName()的模块中去执行，并将name设置为'Grep'。

注意：此处的更改会自动在导入的name绑定上体现出来。因为，name是导出的name 标识符的本地名称。

 

5.导出和导入时重命名

起因：从其他模块导入类、函数、变量等时，不想使用原始名称。我们可以再导出过程和导入过程中改变元素的名称

例如使用不同的名称导出一个函数，使用as关键字来指定函数在模块外被叫做什么名字

导出时：

/*example.js中如下代码*/

function format(a,b) {

return a + b

}

export { format as sum}

注意：format()是本地函数；sum()是我们导出时使用的名字。

如果其他模块要导入这个函数是，必须使用sum这个名字： import { sum } from '../example.js'

再举例子2：utils工具类下一个单独文件url.js；统一管理在index.js中

export default {

getQueryStringByName(name){

// todo ....

},

route2Page(vm, destRoutePath, queryParams, replace) {

// todo...

},

routeBypassNPage(vm, n) {

// todo

}

}

此时，默认导出的是一个对象；而在index.js中配置

export { default as url } from './url' // 默认导出名字就是url

之所以这么写，为了我们后续在导入时，直接引入utils即可（其实是默认读取index.js文件而已），

导入时：

import {} from 'utils' // 同理 import {} from 'utils/index.js'

import { url } from 'utils' 即我们可以再后续使用url中的函数

例如：url.getQueryStringByName(...) url.route2Page(...), ...等

注意：我们也可以在导入时，重新指定导入名字，使用as关键字

import { url as urlUtil } from 'utils' // 后续操作是一样的 urlUtil.getQueryStringByName(...) ...,

 

6.模块的默认值

模块的默认值指的是通过default关键字指定的单个变量、函数、或类

（注意：只能为每个模块设置一个默认的导出值）多次使用default关键字是一个语法错误

上述描述中已经涉及到默认导出，default

接下来，我们再具体看看其他的demo

export default function (num1, num2){

return num1 + num2

}

模块导出一个函数作为它的默认值

同理，可以再export default之后添加默认导出值的标识符

function sum(a1,a2){ return a1 * a2}

export default sum

 

6.导入默认值

// 导入默认值

import sum from './example.js'

console.log(sum(2,2)) // 4

export let color = 'blue'

export default function(num1,num2){

return num1 + num2

}

// 可用import 导入color 和默认函数

import sum, {color} from './example.js' // 使用逗号将默认的本地名称与大括号包裹的非默认值分开

注意：在import语句中,默认值必须排在非默认值之前

console.log(sum(1,2)) // 3

console.log(color) // 'blue'

 

重新导出一个绑定怎么做？

无绑定的导入又是什么？（应用于创建polyfill和shim）

我们思考下应用场景。。。