前言

参考自阮一峰大神的教程:http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module#export-命令

声明:如有问题,还请各位大神及时指正

es6环境下,一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

初出茅庐 来个Demo(因为最近在学习Vue,所以请先构建好Vue项目)

在src目录下,新建common文件夹,新建profile.js,现在我们在profile.js里面加入以下代码

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

export const SuccMsgCode=0;

等价于

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

const SuccMsgCode= 0;

export {firstName, lastName, year, SuccMsgCode};

es6会将,profile.js视为一个模块,所以如果希望外部能访问这三个变量,需要将其导出。但是应该优先考虑使用第二种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

在src目录下的main.js文件中 中加入以下代码:

import {firstName, lastName, year, SuccMsgCode} from 'common/profile';

console.log('firstName\t' + firstName);

console.log('lastName\t' + lastName);

console.log('year\t' + year);

console.log('SuccMsgCode\t' + SuccMsgCode);

就会看到firstName,lastName,year, SuccMsgCode正常输出了,但是此种方法是作为变量导入导出的,所以名称必须一致。除非使用 as 命令指定新的名称,例如:

导入时指定别名

export {firstName, lastName, year, SuccMsgCode};

import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';

console.log('SuccMsgCode\t' + SuccMsgCode1);

我们看到SuccMsgCode1正常显示‘Hello World!’

或者,导出时指定别名

export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };

import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';

console.log('SuccMsgCode \t' + SuccMsgCode2);

我们看到SuccMsgCode 正常显示‘Hello World!’

还可以直接使用以下语法:

export { import1 as name1, import2 as name2, …, nameN } from …;

我们建议直接使用此种语法,方便又直观,一般不在import时做别名处理。

export 不仅能导出变量,还能导出函数和类

在profile.js中加入以下代码:

export function multiply (x, y) {
return x * y;
};

上面代码对外输出一个函数multiply。

在main.js 中加入以下代码:

import {multiply} from 'common/profile';

console.log('multiply\t' + multiply);

multiply函数被打印出来

如果将profile.js中的代码修改为:

export multiply = function (x, y) {
return x * y;
};

等价于

function multiply (x, y) {
return x * y;
};
export {multiply};

如果将export 修改为 export default 则之前的导入导出变量皆不能使用,因为export default只允许export出现一次,而且在使用导入时,不需要加{},代码如下

function multiply (x, y) {
return x * y;
};
export default {multiply};
import multiply from 'common/profile';

如果需要导出整个文件,可使用如下代码

export default {
data () {
return {
firstName: 'Michael'
};
},
methods: {
multiply (x, y) {
return x * y;
}
}
};

es6环境中,export与import使用方法的更多相关文章

  1. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  2. 让node支持es模块化(export、import)的方法

    node版本v7.9.0,支持了大部分es6的功能,但还不支持es6模块化(export.import). 检测ES6 可以使用es-checker来检测当前Node.js对ES6的支持情况. 使用命 ...

  3. ES6 模块化(Module)export和import详解 export default

    ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...

  4. JS ES6中export和import详解

    1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...

  5. ES6模块之export和import详解

    ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入(import)两个模块. 1.模块导出(ex ...

  6. 分布式环境中三种Session管理方法的使用场景及优缺点

    在分布式环境,管理Session通常使用下面三种方式: 一.Session Replication 方式管理 (即session复制)         简介:将一台机器上的Session数据广播复制到 ...

  7. ES6 模块定义 export 与 import

    一般导出 export math.js export function* getFibo() { let a = 1; let b = 1; yield a; yield b; while (true ...

  8. hanlp在Python环境中的安装失败后的解决方法

    Hanlp是由一系列模型与算法组成的javag工具包,目标是普及自然语言处理再生环境中的应用.有很多人在安装hanlp的时候会遇到安装失败的情况,下面就是某大神的分享的在python环境中安装失败的解 ...

  9. 探索 模块打包 exports和require 与 export和import 的用法和区别

    菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...

随机推荐

  1. Django:学习笔记(8)——视图

    Django:学习笔记(8)——视图

  2. 一步一步学EF系列【5、升级篇 实体与数据库的映射】live writer真坑,第4次补发

    前言 之前的几篇文章,被推荐到首页后,又被博客园下了,原因内容太少,那我要写多点呢,还是就按照这种频率进行写呢?本身我的意图这个系列就是想已最简单最容易理解的方式进行,每篇内容也不要太多,这样初学者容 ...

  3. c++之旅:操作符重载

    操作符重载 操作符重载可以为操作符添加更多的含义,操作符重载的作用的对象是类 那些操作符可以重载 除了下面几个操作符不能重载外,其它的操作符都能重载 . :: .* ?: sizeof 操作符重载的本 ...

  4. “凯易迅Calix”实习上机——求元音开头辅音结尾的子串

    题目要求: 对于一个输入的字符串(26个小写字母组成),求出他的所有子串中元音开头,辅音结尾的子串.在这所有的子串中,输出第一个和最后一个. 例如aab,共有子串a,aa,aab,ab,b:但是满足元 ...

  5. 设置小窗口Activity

    http://blog.csdn.net/xieyihua1994/article/details/52586270 我们知道Activity本身是没有界面的.所以activity类创建了一个窗口,开 ...

  6. PCLK怎么获得?

    1.PCLK是由MCLK进行分频而来...... 2.PCLK是个时钟,通过寄存器只能调节它的频率什么的,它是控制像素输出的一个时钟: 3.在曝光时间的算法中需要知道PCLK的值,是因为在sensor ...

  7. CSS 图片

    CSS 图片 一.圆角图片 img { border-radius: 8px; } 二.缩略图 border 属性来创建缩略图. img { border: 1px solid #ddd; borde ...

  8. 自动配置@Resource与@Autowired

    总结自:https://www.cnblogs.com/kuotian/p/8795812.html 试用情形:bean的某个成员变量是另一个bean 如果使用配置: <bean id=&quo ...

  9. Kali视频学习1-5

    Kali视频学习1-5 安装 安装Kali虚拟机 设置网络更新,使用了163的源 deb http://mirrors.163.com/debian wheezy main non-free cont ...

  10. linux中__weak关键字的作用

    答:1.可以重新定义同名函数或变量而编译时不报错