ES6之模块化导入导出
1、概述
在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,
而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
2、ES6 模块(module)的设计思想是什么?
那就是尽量的静态化,使得编译时就能确定依赖关系
3、CommonJS模块 和 ES6 模块比较
看两段代码
// 导出 node 文件系统的几个方法
let {stat,exists,readFile} = require('fs'); 注意:这段代码实际上是加载了整个 fs 模块。这种加载方式称为“运行时加载”,因为只有运行时才能得到这个对象。导致完全没办法在编译时做“静态优化”。
// ES6 模块
import {stat,exists,readFile} from 'fs' 注意:这段代码只导出了三个方法,其他的方法没有加载。这种方式称为“编译时加载”,ES6可以在编译时就完成模块加载,效率要比CommonJS模块的加载方式高。
4、模块功能命令之 export 和 import。
模块功能主要有两个命令构成:export 和 import。 export 命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
一个js文件就是一个模块,该文件内部的所有变量,外部无法获取,如果你希望外部能够读取模块内部某个变量,就必须使用export关键字输出该变量。
输出变量:
//eg:对外部输出三个变量----》声明后输出
// js 文件内部
export var name = 'zjl'
export var age = 18
export var gender = '男'
// eg:对外输出三个变量-----》先声明再输出 优先使用这种写法 var name = 'zjl'
var age = 18
var gender = '男'
export {name,age,gender}
输出函数:
export function test(x,y){
return x*y;
}
export 输出的变量或函数都有自己的名字,我们也可以重命名:
function test(){...}
function test2(){....}
function test3(){...} export {test as fun1,test2 as fun2,test3 as fun3}
注意:export 命令规定的是对外接口,接口名与模块内部变量之间,必须与模块的变量建立一一对应关系。(有种键值对的意思),
简单来说导出的变量他必须有一个值。
export 语句不能放在代码块内,如函数内,否则会报错。因为此做法使其无法做到静态化,违背了 ES6 模块的设计理念。
import 命令
通过 export 定义了模块的接口之后,我们可以通过import 命令加载这个模块。
载入模块方式:
// 大括号内的变量名,必须跟 export 对外接口的变量名一致
import {name,age,gender} from './XXX.js'
// 重命名
iport {name as username};
注意几个 import 关键点
①import 导入的值都是只读的,不允许修改输入的接口。
②可以修改导入的对象 ,可以修改导入对象的属性,但不推荐这样做,建议把导入的变量(不管是普通变量还是对象)都当做只读的。
③import.....from 中 from 后面的路径可以是绝路径也可以是相对路径。
④js模块导入时可以省略后面 的 .js后缀。
⑤import 命令具有提升效果,它会把import命令提升到模块的头部,首先执行。
⑥执行同一个import命令多次,默认只会执行一次,不会执行多次
import {name} from './XXX.js'
import {name} from './XXX.js'
//只会执行一次
⑦从同一个模块通过多条import加载不同变量,但它们对应的是同一个模块实例。import语句是 单例模式(Singleton)
import {name} from './a.js'
import {age} from 'a.js'
// 单例模式
⑧不推荐 import 和 require 在同一个模块使用,因为他们的执行时期不一样,导致的结果可能就不一样。
目前在模块中使用 require 还需要 Babel 转换比较麻烦。
⑨整体加载模块
import * as user from './a.js'
// 导出 a 模块的所有值并命名为 user(一个对象)
5、模块功能命令之 export default
我们通过前面了解到 import 导入 export 对外接口 需要知道对外接口的准确名称,才能拿到对应的值,这样是比较麻烦的。为此ES6还提供了 export default 命令,
使用 export default 导出的值,import导入可以为这个导出值自定义名称。
// 导出模块 a.js,导出一个匿名函数
export default function (){...} //导入模块 b.js,
import fun from './a.js'; // fun还可以为其他合法的名称
默认输出(export default)注意点:
①export default 只能使用一次,export可以使用多次
②后面不能跟变量声明语句
export default var a=; // 写法错误
③export default a 的含义就是jiang将变量 a 的值赋给变量 default,所以上面那种写法是错误的。
④ export 导出一定要指定对外接口 而 export default 不需要。
⑤export 和 export default 能一起使用。
6、export 和 import 的复合写法。
export {name,age} from 'a.js' // 这种写法相当于转发了这两个接口,没有实际导入当前模块,当前模块不能直接使用这两个变量。 // 可以写成两句,实际导入当前模块
import {name,age} from 'a.js'
export {name,age};
7、介绍到此结束。
ES6之模块化导入导出的更多相关文章
- es6模块化导入导出
模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来. 在 ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案 最主要的有 CommonJS(Asynchron ...
- ES6详解八:模块(Module)!--各种导入导出方法
[-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结 modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...
- ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式
函数写法区别 计算a, b两个数字之和,有返回值 es5 写法 function add(a, b) { return a + b; } es6 写法(箭头函数) let add = (a, b) = ...
- [译]使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- 使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- ES6的模块化
在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块 ...
- es6的模块化编程
es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...
- ES6(Module模块化)
模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...
- ES6之模块化
本文介绍ES6实现模块化的方法:使用import和export. 导入的时候需不需要加大括号的判断:1.当用export default people导出时,就用 import people 导入(不 ...
随机推荐
- 第2个C# Winform实例,寻找三角形的位置
这里,在第一个例子的基础上,稍微做修改,达到最终定位三角形位置的目的. 先在网络上找一张包含有三角形的图片,我们这里使用一张有三个三角形和一些标记的图片来处理. 原图: 先贴结果图片:左侧,中间,右侧 ...
- python找质数对
python找质数对 编写python脚本,输入一个正整数,输出有几对质数的和等于这个正整数. 例如输入一个正整数10,可以找出有“3+7=10”.“5+5=10”两个质数对的和为10. 要实现这个功 ...
- linux初学者-延迟及定时任务篇
linux初学者-延迟及定时任务篇 在linux系统的学习工作中,南面会遇到需要延迟进行的任务和需要定时去完成的任务,就像手机的闹钟一样,这时候就需要用到linux系统当中的系统延迟和定时任务的设置了 ...
- python pip安装requests库总提示:Fatal error in launcher...''
1.python pip安装提示:Fatal error in launcher...'' 我查看了网上都说是电脑同时安装了python2 和python3时候才会有这个错误,但实际上我电脑只安 ...
- Python3数据驱动ddt
对于同一个方法执行大量数据的程序时,我们可以采用ddt数据驱动的方式,来对数据规范化整理及输出 一.需要使用python的ddt库,ddt,data,unpack方法 1.仅使用ddt和data,代码 ...
- python 简单的实现文件内容去重
文件去重 这里主要用的是set()函数,特别地,set中的元素是无序的,并且重复元素在set中自动被过滤. 测试文本为 data.txt 具体代码如下: // 文件去重 #!/usr/bin/env ...
- ubuntu/deepin 下下载wxpython
1 输入apt-cache search wxpython 如果有返回信息 则输入 sudo apt-get install python-tools 2 否则 1.添加软件源地址到apt列表中.输入 ...
- Codis与RedisCluster的原理详解
背景介绍 我们先来看一下为什么要做集群,如果我们要部署一个单节点Redis,很明显会遇到单点故障的问题. 首先能想到解决单点故障的方法,就是做主从,但是当有海量存储需求时,单一的主从结构就会出问题,说 ...
- Docker入门学习笔记
Docker 什么是Docker 虚拟化技术 在计算机中,虚拟化是一种资源管理技术,将计算机中的各种实体资源如:CPU.硬盘.内存等予以抽象.转换后呈现出来打破实体结构间的不可切割的障碍,使用户可以比 ...
- kubernetes集群升级的正确姿势
kubernetes社区非常活跃,每季度都会发布一个release.但是线上集群业务可用性要求较高,场景复杂,任何微小的变更都需要非常小心,此时跟随社区版本进行升级略显吃力.但是为了能够使用到最新的一 ...