模块化 require 、export、module.expor

CommonJS模块规范(node)和ES6模块规范

• require: node 和 es6 都支持的引入
• export / import : 只有es6 支持的导出引入
• module.exports / exports: 只有 node 支持的导出

require / import / export------ES6
require / exports / module.exports------CommonJS

CommonJS模块规范

在node中 exports 和 module.exports 是相等的，但赋值不同时导出 module.exports内容。
1.返回object

//utils.js
//返回object
//写法一
function formatTime(date){
    //代码块
}
function formatLocation(longitude, latitude){
    //代码块
}
module.exports = {
    formatTime: formatTime,
    formatLocation: formatLocation
}
/*
还可以写为：
module.exports.formatTime = formatTime
module.exports.formatLocation = formatLocation
*/

//写法二
let utils = {
    formatTime(date){
         //代码块
    },
    formatLocation(longitude, latitude){
          //代码块
    }
}
module.exports = utils

//写法三
function formatTime(date){
    //代码块
}
function formatLocation(longitude, latitude){
    //代码块
}
const utils =  {
    formatTime: formatTime,
    formatLocation: formatLocation
};
module.exports = utils

调用：

//index.js
//引入工具集使用
let utils = require(utils.js)
utils.formatTime(date)

2.返回构造函数

//构造函数
var  Utils  = function(name){
     this.name = name;
}
Utils.prototype.setName = function(){
    alert(this.name);
}
module.exports =  Utils ;

调用：

//index.js
let Utils = require(utils.js)
var utils = new Utils('name')
utils.setName()

3.返回实例对象

//实例对象:对构造函数实例化就是实例对象
var Utils = function(){
    this.name = "name";
}
 Utils.prototype.setName = function(){
    alert(this.name);
}
module.exports = new Utils();
/*
同上，实例化构造函数
let utils = new Utils()
module.exports = utils
*/

调用：

//index.js
//引入工具集使用
let utils = require(utils.js)
utils.setName()

ES6模块规范

//export导出
function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2
};

//导入
import { v1 as streamV1} from './xxx.js'
import {streamV1} from './xxx.js'
import * as utils from './xxx.js'

//export default导出
// default.js
export default {
}
//export default导入
import customName from './default';

vue里用import streamV1 from './xxx.js'那是配合webpack进行的，普通页面是会报错的，详情戳 --当执行 import vue from 'vue' 时发生了什么？

• export与export default均可用于导出常量、函数、文件、模块等
• 在一个文件或模块中，export、import可以有多个，export default仅有一个
• 通过export方式导出，导入时要加{ }，export default则不需要
• export能直接导出变量表达式，export default不行（export default命令的本质是将后面的值，赋给default变量）。

最后大家想想vue，它里面里以上写法都有的原因是它本身就有基于node的webpack还有babel去转义es6。