Js 中export 和import的使用

对于模块化工程(React、Vue)，export 和 import 是很常见的模块导入、导出的方法。由于对于使用的一知半解，之前常常会分不清使用场景方式，所以今天特意将 export 和 import 的使用方法总结下。本文首发于胖蔡杂谈，点击可查看原文
查看原文

概述

export 和 import 是ES6中模块化的两个较为重要的模块，ES6 的模块自动开启严格模式，模块可以导入各种类型的变量、对象、函数、字符串、类等，每个模块都有自己的上下文，每个模块内声明的变量都是局部变量，不会污染全局作用域。每个模块只加载一次，若其他文件需要加载，则直接从内存中读取。

基本用法

• 除export default外，导出的函数什么和类声明都必须要有名称
• export可出现在模块的任何位置，但必需处于模块顶层
• import命令会提升到整个模块的头部，首先执行。
• 不仅能导出声明还能导出引用（例如函数）

1. export导出

//test1.js
import axios from 'axios'

export function get({url,params = {}}) {
    return new Promise((resolve,reject) => {
        axios.get(url,{
            params:params
        }).then( response =>{
            landing(url, params, response.data);
            resolve(response.data);
        }).catch(error =>{
             reject(error)
        })
    })

}

//test2.js
import { get } from '../utils/http';
//import { get as http } from '../utils/http';



/**
 * 获取首页列表
 */
function  getArticleList(){
  return new Promise((resolve, reject) => {
    get('article/home/index').then(res => {
      resolve (res);
    },error => {
      console.log("网络异常~",error);
      reject(error)
    })
  }) 
}

export导入方法、变量可通过 **import {}**指定参数导入，或通过as更改导入名,export方式导出对象、方法、引用等不可直接指定对象、方法，需要通过大括号"{}"来指定属性、变量名。

2. export default导出

//test1.js
//统一接口处理，返回数据
export default function HttpData (fecth,url, parm) {
	let _data = "";
	return new Promise((resolve, reject) => {
		switch (fecth){
			case "get":
				get(url, parm).then(function (response) {
					resolve (response);
				}).catch(function (error) {
					console.log("get request failed.",error);
				});
				break;
			case "post":
				post(url, parm).then(function (response) {
					resolve (response);
				}).catch(function (error) {});
				break;
			default:
				break;
		}

	});
}


//test2.js
//test2.js
import http from '../utils/http';



/**
 * 获取首页列表
 */
function  getArticleList(){
  return new Promise((resolve, reject) => {
    http('get','article/home/index').then(res => {
      resolve (res);
    },error => {
      console.log("网络异常~",error);
      reject(error)
    })
  }) 
}

export default导出对象有如下特点：

• 可不必须指定函数名、类名等
• 在一个文件或模块中，export、import 可以有多个，export default 仅有一个
• export default 向外暴露的成员，可以使用任意变量来接收
• export default 向外暴露的成员，import时不需要用大括号嵌套，也不能用大括号嵌套

3. import * as

import * as 的用法是将导入的模块或文件中所有的 export组合成一个对象，其中export default放在对象的default属性下访问:

//test.js
export const  name ="胖蔡";
export const sex = "男";
let age = 123;
export default  age;

//test1.js
import * as person from  "../test/test"

console.log("get person info:",person);

// log info
get person info: 
{name: "胖蔡", sex: "男", default: 123, __esModule: true}
default: 123
name: "胖蔡"
sex: "男"
__esModule: true
__proto__: Object