ES6-Module与CommonJs

前言

许多年前，我们引入代码，是直接用 script src引入， 或者自己写一个 loadScript。

用script src方式的话，当项目中js文件多了，页面上会有很多script标签，抛开性能暂且不说，本身代码就非常丑陋，而且很不好维护，尤其是当 js 文件有依赖关系时，更加难以处理。

为了解决这一痛点，处理好 js 的加载和依赖关系，并推进 js 模块化开发， 于是就有了 用于浏览器端的 CMD， AMD 等规范,  用于服务端(比如nodejs)的 CommonJs规范， 以及最终的标准 ES6 Module 规范。先大致了解一下这几个东东。

CMD： Common Module Definition - 公共模块定义,  是玉伯先生的SeaJS 在推广过程中对模块定义的规范化产出。

AMD：Asynchromous Module Definition - 异步模块定义  是RequireJS在推广过程中对模块定义的规范化产出。

CommonJs规范：服务端规范，文件即模块。用 module.exports 导出模块，require 引入文件/模块。

ES6 Module：ES6 模块标准。

语法以及运用

CMD 和 AMD 不作过多描述。想了解的童鞋请上午搜索。这里主要记录 ES6 Module 和 CommonJs

ES6 Module

ES6 Module 自动采用严格模式，不管你有木有在代码中加上 'use strict'。

export 导出变量， import 导入变量。有过后端语言的童鞋，应该很熟悉吧。

//export  可以导出 变量，对象， 函数，类。

export const root = 'linux';

let username = 'captain';
let password = 'pwd';
export {
    username,
    password  
}

export const add = (x) => x + x;

export class fun{}

注意一点， export 命令规定的是对外的接口，所以要保证接口名必须与模块内部变量建立一一对应的关系。这句话是什么意思，就是不能定义好变量，就直接把变量 export。

要么在定义时就 export， 要么在文件末尾 export 一个对象，对象里是要导出的变量，成键值对关系。

//报错
export 1;
//正确
const t = 1;
export {
    t
}

//报错
const test = () => {}
export test;
//正确
export test = () => {}
export {
    test  
}