ES6的模块化操作主要包括两个方面。

(1)export :负责进行模块化,也是模块的输出。

(2)import : 负责把模块引,也是模块的引入操作。

export的用法:

export可以让我们把变量,函数,对象进行模块化,提供外部调用接口,让外部进行引用。先来看个最简单的例子,把一个变量模块化。我们新建一个demo.js文件,然后在文件中输出一个模块变量。

export var a = '单个变量导出';

然后可以在index.js中以import的形式引入。

import {a} from './temp.js';
console.log(a);

最后在控制台输入 babel-node index.js 指令。注意index.js目录

目前我的index.js在src目录下,所以是在该目录执行上述指令的。如图:

2.多变量的输出

先要声明变量,需要把变量都进行模块化输出,这时候我们给他们包装成对象就可以了。

demo.js中:

var a ='i';
var b ='love';
var c = 'you';
export {a,b,c}

index.js中:

import {a,b,c} from './demo.js';
console.log(a,b,c);

执行指令后结果为:

3.函数的模块化输出

在demo.js中定义一个函数,并使用export进行输出。

export function add(a,b){
return a+b;
}

index.js中:

import {add} from './demo.js';
console.log(add(1,2));

结果为:

5.as的用法

有些时候我们并不想暴露模块里边的变量名称,而给模块起一个更语义话的名称,这时候我们就可以使用as来操作。

demo.js中:

var a ='i';
var b ='love';
var c = 'you';
export {
a as x,
b as y,
c as z
}

index.js中:

import {x,y,z} from './demo.js';
console.log(x,y,z);

输出结果为:

6.export default的使用

加上default相当是一个默认的入口。在一个文件里export default只能有一个。

export default 和 export 区别:

(1)export

输出格式:

export var a = '单个变量导出';

对应导入格式:使用花括号

import {a} from './temp.js';
console.log(a);

(2)export defalut

export default var a='默认单个变量输出;

对应导入格式:

import a from './temp';
console.log(a)//默认单个变量输出

总结:export default 和 export 区别为

(1)通过export方式导出,在导入时要加{ },export default则不需要。

(2)使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名,而export命令需要知道相应的模块的变量名。

(3)export与export default均可用于导出常量、函数、文件、模块等

(4)在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用。

over....

ES6系列_16之模块化操作的更多相关文章

  1. ES6系列_5之数字操作

    下面是针对ES6新增的一些数字操作方法进行简单梳理. 1.数字判断和转换 (1)数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证,只要是数字, ...

  2. [ES6系列-05]字符串相关操作更方便

    [原创] 码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 今天的内容是,关于 ES6 JavaScript ...

  3. ES6模块化操作

    在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作.模块化操作主要包括两个方面. export :负责进行模块化,也是模块的输出. im ...

  4. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  5. 大白话,讲编程之《ES6系列连载》汇总

    如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...

  6. ES6 系列之异步处理实战

    前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我 ...

  7. [ES6系列-01]Class:面向对象的“新仇旧恨”

    [原创]CoderPower 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 这是公众号(码路工人有力量)开通后的第二篇,写得还是有待改进吧.这次准备写一个关于ES6基础的短文系列,努力尽快 ...

  8. js系列教程1-数组操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

  9. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

随机推荐

  1. 不能访问虚拟机上的nginx网站

    VMware虚拟机上配置nginx后,本机无法访问问题 转自:http://www.server110.com/nginx/201407/10794.html 把nginx装在CentOS上,用本机访 ...

  2. 随机梯度下降算法求解SVM

    测试代码(matlab)如下: clear; load E:\dataset\USPS\USPS.mat; % data format: % Xtr n1*dim % Xte n2*dim % Ytr ...

  3. mysql中InnoDB存储引擎的行锁和表锁

    Mysql的InnoDB存储引擎支持事务,默认是行锁.因为这个特性,所以数据库支持高并发,但是如果InnoDB更新数据的时候不是行锁,而是表锁的话,那么其并发性会大打折扣,而且也可能导致你的程序出错. ...

  4. 转 CentOS 7 minimal 版本安装后网络配置

    转自[http://www.07net01.com/2016/01/1140061.html] 1.首先使用root登录服务器,输入 nmcli d 我们发现网卡是处于禁用状态. 2.打开网络管理器界 ...

  5. js获取当前日期加上30天之后的日期

    var date1 = new Date(); var date2 = new Date(date1); date2.setDate(date1.getDate() + 30); console.lo ...

  6. C语言中的可变参数函数

    C语言编程中有时会遇到一些参数个数可变的函数,例如printf()函数,其函数原型为: int printf( const char* format, ...); 它除了有一个参数format固定以外 ...

  7. 重写vector类,完成基本功能,不含迭代器

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  8. Date、DateFormat、SimpleDateFormat、Calendar

    package com.Date; import java.util.Date; /* * Date 表示特定的瞬间,精确到毫秒 * JDK1.0开始 * 构造方法(常用的方法,过时的不管): * D ...

  9. 201621123010《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词. 继承extends.多态.抽象类 超级父类Object类.父类.子类. 覆盖Override 初始化块 识别类 重载 1.2 ...

  10. ubuntu14.04安装Android Studio出现error while loading shared libraries: libz.so.1的解决方法

    参考博客地址: http://blog.csdn.net/newairzhang/article/details/28656693 安装lib32z1就可以解决,如下: 首先,sudo apt-get ...