前端模块化小笔记

CommonJS规范

CommonJS使用exports导出模块，require导入模块

1. 如果一个JS文件中存在exports或require，该JS文件是一个模块
2. 模块内的所有代码均为隐藏代码，包括全局变量、全局函数，这些全局的内容均不应该对全局变量造成任何污染
3. 如果一个模块需要暴露一些API提供给外部使用，需要通过exports导出，exports是一个空的对象，你可以为该对象添加任何需要导出的内容
4. 如果一个模块需要导入其他模块，通过require实现，require是一个函数，传入模块的路径即可返回该模块导出的整个内容
5. 在模块开始执行前，初始化一个值module.exports = {}
module.exports即模块的导出值
   为了方便导出，nodejs在初始化完module.exports后，又声明了一个变量exports = module.exports

    (function(module){
        module.exports = {};
        var exports = module.exports;
        //模块中的代码
        return module.exports;
    })()

ES6规范

基本导出

类似于exports.xxx = xxxx基本导出可以有多个，每个必须有名称基本导出的语法如下：

export 声明表达式

或

export {具名符号}

由于基本导出必须具有名称，所以要求导出内容必须跟上声明表达式或具名符号

基本导入

由于使用的是依赖预加载，因此，导入任何其他模块，导入代码必须放置到所有代码之前对于基本导出，如果要进行导入，使用下面的代码

import {导入的符号列表} from "模块路径" 

导入时，可以通过关键字as对导入的符号进行重命名，可以使用*号导入所有的基本导出，形成一个对象

默认导出

每个模块，除了允许有多个基本导出之外，还允许有一个默认导出，默认导出类似于CommonJS中的module.exports，由于只有一个，因此无需具名具体的语法是

export default 默认导出的数据

或

export {默认导出的数据 as default}

默认导入

需要想要导入一个模块的默认导出，需要使用下面的语法

import 接收变量名 from "模块路径"

类似于CommonJS中的

var 接收变量名 = require("模块路径")

由于默认导入时变量名是自行定义的，因此没有别名一说，如果希望同时导入某个模块的默认导出和基本导出，可以使用下面的语法

import 接收默认导出的变量, {接收基本导出的变量} from "模块路径"

注：如果使用*号，会将所有基本导出和默认导出聚合到一个对象中，默认导出会作为属性default存在

其他细节

可以使用无绑定的导入用于执行一些初始化代码

import "模块路径"

可以使用绑定再导出，来重新导出来自另一个模块的内容

export {绑定的标识符} from "模块路径"