ES6 import/export/module.exports用法

一、export用法

1、输出单个变量

export var name = 'Mark';

//或者
var name = 'Mark';
export {name}

2、输出多个变量

var name = 'Mark'; var age = 18;
export{name, age};

3、输出函数

export function setName(name){
  name = 'Mark';
}

4、输出别名

//export输出的变量就是在原文件中定义的名字，但可以使用as关键字设置别名
export {
  name as v1, //允许使用不同名字输出两次,as前是原名，as后是别名
  name as v2,
  setName as setNameV1
}

二、import用法

• 需要注意的是 import是在代码编辑阶段执行的，和export配套使用。
• 导入from相对路径与绝对路径都可以 .js文件后缀可以省略。
• 导入的变量名必须与输出的名称保持一致。

1、导入变量

import {name, age} from './login';

2、导入别名

import {name as otherName } from './login';

三、export default用法

• export default与export的主要区别是不需要知道导出的具体变量名与导入时不需要{}
• 一个模块中只能有一个export default默认输出

//export default
export default function fn(){};
import fn from 'fn';

//export
export function fn() {};
import {fn} from 'fn';

• export原理

var name = 'Mark';
export default name;  => export {name as default};
import surname from '...'; => import {default as surname} from '..';

四、module.exports用法

module.exports和require是配套使用的

1、返回一个JSON Object

导出
写法一

var app = {
    name: 'app',
    age: '18',
    sayName: function(name){
        console.log(this.name);
    }
}
module.exports = app;

写法二

name: 'app',
age: '18',
sayName: function(name){
    console.log(this.name);
}

exports.sayName = sayName;

引入调用

var app = require('./app.js');
app.sayName('hello');//hello

2、返回一个构造函数

CLASS.js:

var CLASS = function(age){
     this.age = age;
}
module.exports = CLASS

调用

var CLASS = require('./CLASS.js');
varc = new CLASS('arguments')

3、返回一个实例对象

CLASS.js

var CLASS = function(){
    this.name = "class";
}
CLASS .prototype.func = function(){
    alert(this.name);
}
module.exports = new CLASS();

调用

var c = require('./CLASS.js');
c.func();//"class"