JS基础知识总结

1.什么是模块化

模块化是指把一个复杂的系统分解到一个一个的模块，再用一定的方式拼装起来。

2.模块化开发的优点

(1)一个单独的文件就是一个模块，是一个单独的作用域，只向外暴露特定的变量和函数。这样可以避免污染全局变量，减少变量命名冲突。

(2)代码复用，让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。

3.js模块化规范
Js模块化规范有：CommonJS、AMD、CMD、以及本文要总结的ES6的模块系统。

其中，CommonJS是服务端的模块规范，AMD和CMD是浏览器端的模块规范。

CommonJS加载模块是“运行时加载”：CommonJS的模块就是对象，导入时，实际是整体加载模块的所有方法，生成一个对象，然后再从这个对象读取对应的方法。因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6加载模块是“编译时加载”。ES6模块不是对象，导入时只加载指定的方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高，并使得静态分析成为可能。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

关于模块化的更多内容，可以看下之前我总结的一览js模块化：从CommonJS到ES6

导出的语法

(1) 导出的基本语法、导出时重命名
export关键字，可以导出变量、函数、类给其他模块。

as关键字，可以指定变量、函数、类在模块外应该被称为什么名称。

// 导出变量--写法1
export let name = "Peter";

// 导出变量--写法2：先定义，再导出
let name = "Peter";
export { name }

// 导出变量--写法3：重命名
let name = "Peter";
export { name as PersonName}
这里export时记得加花括号，不加则会报错。

// 导出函数--写法1
export function sum(a, b) {
    return a + b;
}

// 导出函数--写法2：先定义、再导出
function sum(a, b) {
    return a + b;
}
export { sum };

// 导出函数--写法3：重命名
function sum(a, b) {
    return a + b;
}
export { sum as add };

知识点：

(1)模块是自动运行在严格模式下、并且无法退出运行的js代码。
即ES6 的模块是自动采用严格模式，不管有没有在模块头部加上"use strict";

(2)在ES6的模块中，在模块顶层创建的变量只在模块的顶层作用域中存在，不会自动被添加到全局作用域中。

(3)在模块顶层，this的值是undefined，即不要在顶层代码使用this。

(4)模块不支持HTML风格的代码注释。

type="module"