Js 中export 和import的使用

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

概述

exportimport 是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方式导出对象、方法、引用等不可直接指定对象、方法,需要通过大括号"{}"来指定属性、变量名。

  1. 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时不需要用大括号嵌套,也不能用大括号嵌套
  1. 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

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值