ES6系列_16之模块化操作
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之模块化操作的更多相关文章
- ES6系列_5之数字操作
下面是针对ES6新增的一些数字操作方法进行简单梳理. 1.数字判断和转换 (1)数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证,只要是数字, ...
- [ES6系列-05]字符串相关操作更方便
[原创] 码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 今天的内容是,关于 ES6 JavaScript ...
- ES6模块化操作
在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作.模块化操作主要包括两个方面. export :负责进行模块化,也是模块的输出. im ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- 大白话,讲编程之《ES6系列连载》汇总
如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...
- ES6 系列之异步处理实战
前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我 ...
- [ES6系列-01]Class:面向对象的“新仇旧恨”
[原创]CoderPower 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 这是公众号(码路工人有力量)开通后的第二篇,写得还是有待改进吧.这次准备写一个关于ES6基础的短文系列,努力尽快 ...
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
随机推荐
- 不能访问虚拟机上的nginx网站
VMware虚拟机上配置nginx后,本机无法访问问题 转自:http://www.server110.com/nginx/201407/10794.html 把nginx装在CentOS上,用本机访 ...
- 随机梯度下降算法求解SVM
测试代码(matlab)如下: clear; load E:\dataset\USPS\USPS.mat; % data format: % Xtr n1*dim % Xte n2*dim % Ytr ...
- mysql中InnoDB存储引擎的行锁和表锁
Mysql的InnoDB存储引擎支持事务,默认是行锁.因为这个特性,所以数据库支持高并发,但是如果InnoDB更新数据的时候不是行锁,而是表锁的话,那么其并发性会大打折扣,而且也可能导致你的程序出错. ...
- 转 CentOS 7 minimal 版本安装后网络配置
转自[http://www.07net01.com/2016/01/1140061.html] 1.首先使用root登录服务器,输入 nmcli d 我们发现网卡是处于禁用状态. 2.打开网络管理器界 ...
- js获取当前日期加上30天之后的日期
var date1 = new Date(); var date2 = new Date(date1); date2.setDate(date1.getDate() + 30); console.lo ...
- C语言中的可变参数函数
C语言编程中有时会遇到一些参数个数可变的函数,例如printf()函数,其函数原型为: int printf( const char* format, ...); 它除了有一个参数format固定以外 ...
- 重写vector类,完成基本功能,不含迭代器
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- Date、DateFormat、SimpleDateFormat、Calendar
package com.Date; import java.util.Date; /* * Date 表示特定的瞬间,精确到毫秒 * JDK1.0开始 * 构造方法(常用的方法,过时的不管): * D ...
- 201621123010《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词. 继承extends.多态.抽象类 超级父类Object类.父类.子类. 覆盖Override 初始化块 识别类 重载 1.2 ...
- ubuntu14.04安装Android Studio出现error while loading shared libraries: libz.so.1的解决方法
参考博客地址: http://blog.csdn.net/newairzhang/article/details/28656693 安装lib32z1就可以解决,如下: 首先,sudo apt-get ...