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 导入(不 ...
随机推荐
- css常用知识与用法
1 类选择器就是再 某一个标签后面加上class =“” 然后再到前面去定义这个class 一定要记住前面加. 2 id选择器和类选择器是差不多的 不过id选择器前面不加.而加# ...
- rabbitMQ_routing(四)
路由 本次我们将通过路由将信息发送到指定的队列中,将消息发送给指定的队列需要在转发器和队列之间建立一个routeKey 绑定 在以前的例子中,我们已经创建了绑定.你可能会记得如下代码: channel ...
- android 界面提示框架WisdomProgressHUD,为金典而生
一:简述 今天给android开发者们,推荐一个金典的界面提示框架WisdomProgressHUD,使用简洁方便. WisdomProgressHUD 是一个半透明的 HUD 指示器. Wisdom ...
- 在ABP中灵活使用AutoMapper
demo地址:ABP.WindowsService 该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. AutoMapper简介 Auto ...
- 基于Spring框架应用的权限控制系统的研究和实现
摘 要: Spring框架是一个优秀的多层J2EE系统框架,Spring本身没有提供对系统的安全性支持.Acegi是基于Spring IOC 和 AOP机制实现的一个安全框架.本文探讨了Acegi安全 ...
- 微服务SpringCloud之Spring Cloud Config配置中心SVN
在回来的路上看到一个个的都抱着花,吃了一路的狗粮,原本想着去旁边的工业园里跑跑步呢,想想还是算了,人家过七夕,俺们过巴西.上一博客学习了Spring Cloud Config使用git作为配置中心,本 ...
- Office2019 VOL版本 自定义安装组件
众所周知,Office VOL版本可以连接KMS服务器激活,但是office2019没有镜像可以下载,所以只能依靠Office Deployment Tool来进行操作.注:Office2019 Re ...
- 直方图均衡基本原理及Python实现
1. 基本原理 通过一个变换,将输入图像的灰度级转换为`均匀分布`,变换后的灰度级的概率密度函数为 $$P_s(s) = \frac{1}{L-1}$$ 直方图均衡的变换为 $$s = T(r) = ...
- vue之手把手教你写日历组件
---恢复内容开始--- 1.日历组件 1.分析功能:日历基本功能,点击事件改变日期,样式的改变 1.结构分析:html 1.分为上下两个部分 2.上面分为左按钮,中间内容展示,右按钮 下面分为周几展 ...
- .net core + mvc 手撸一个代码生成器
最近闲来无事,总想倒腾点什么,索性弄下代码生成器,这里感谢叶老板FreeSql的强大支持. 以前也用过两款不错的代码生成器,这里说说我的看法 1.动软代码生成器,优点很明显,免费,简单,但是没法高度自 ...