es6 的模块规范 和 CommonJS 规范的区别

前不久 面试碰见了一个问题  请说下    export    和   export default 的区别

首先我们先来聊一聊  为啥会有规范这个东西  其实在之前的时候 是并没有 或者说是没有标准的规范

在js中一个文件 就是一个模块    我们可以在里面封装一些 方法  或者 常用的工具函数吧  或者是业务中通用的代码

在规范没出来之前  假设 每个人都有一个自己的 接口导出规范   每个公司有自己的模块导出规范  那么 js 就成什么 了   不是乱套了吗

不过肯定会有几个模块规范 会脱颖而出  比如  AMD CommonJS 等

用过layui的小伙伴 可能 对Amd的规范比较了解 哈    尽管  layui的作者说自己的 并不完全是 AMD的规范 

而CommonJS 规范为啥这么出名   得益于  nodejs 的大力推广   因为nodejs 使用的就是 CommonJS 规范

好像扯的有点远了哈 

我们重新 回归到上面的那个面试题中 

1.   我们先说   export  default     它是一个文件的 默认导出 模块  有且只有一个     一个文件中只能写一次哈  

export default  可以 和 export 共存在一个文件中

function Counter() {

}
function Counter1() {

}
export default Counter；
export default Counter1；

像上面就是有问题    

其次是 引入的时候  不用使用  结构的方式进行 引入   引入 是通过 import 的方式 引入的    引入必须是在文件的顶部  引入  否则报错

import Counter from './Counter.js'

2.   export 允许 一个文件导出的多个  接口  

export const A = 10;
export const B = 20;

引入的时候  要是用  对象 接口的方式 推荐 哈  不过你也可以不用

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

当然 我们也可以 引入 图片 和  样式文件

import './a.css'; 

import logo from './logo.png'

3.  这下 就可以谈一谈  CommonJS 规范   就避不开 谈 nodejs 了 

模块导出  可以 使用 module.exports  或者 直接使用 exports

一个文件中  碰见  module.exports 可以就不会导出下面的        

其实有点 类似js中的原型对象一样     注意 一般还是第二中的导出方式 用的可能比较多  

或者就是  

modul.exports = {  A, B ,C }  这种方式

// 第一种导出
const A = 10;
module.exports = A;


// 第二种导出
exports.A = 10;
exports.B = 10;
exports.C = 10;

文件的引入 也分别对应上面的 两种导入

var a = require('./test');
console.log(a);

// 第一种 导出 打印的结果 是  10

// 第二种  导出 打印的结果是  { A : 10, B: 10, C: 10 }

关注我 持续更新前端知识