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之模块化导入导出的更多相关文章

  1. es6模块化导入导出

    模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来. 在 ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案 最主要的有 CommonJS(Asynchron ...

  2. ES6详解八:模块(Module)!--各种导入导出方法

    [-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结   modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...

  3. ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式

    函数写法区别 计算a, b两个数字之和,有返回值 es5 写法 function add(a, b) { return a + b; } es6 写法(箭头函数) let add = (a, b) = ...

  4. [译]使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  5. 使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  6. ES6的模块化

    在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块 ...

  7. es6的模块化编程

    es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...

  8. ES6(Module模块化)

    模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...

  9. ES6之模块化

    本文介绍ES6实现模块化的方法:使用import和export. 导入的时候需不需要加大括号的判断:1.当用export default people导出时,就用 import people 导入(不 ...

随机推荐

  1. 开源分布式事务中间件Seata使用指南

    介绍 Seata 是阿里巴巴开源的分布式事务中间件,一种分布式事务解决方案,具有高性能和易于使用的微服务架构. 初衷 对业务无侵入:即减少技术架构上的微服务化所带来的分布式事务问题对业务的侵入 高性能 ...

  2. 必懂的wenpack优化

    webpack优化 1.production 模式打包自带优化 tree shaking tree shaking是一个术语.通常用于打包时移除js中未引用的代码(dead-code),它依赖于ES6 ...

  3. XTTS系列之一:U2L迁移解决方案之XTTS的使用

    本系列的定位是对XTTS及相关技术进行深入的学习研究.作为本系列的开篇,本着实用性的原则,我先把一次实际生产环境U2L的迁移实战实施方案进行提炼简化,旨在能清楚说明该如何使用XTTS这种解决方案来进行 ...

  4. centos7下yum方式安装MySQL5.7

    前言: MySQL作为一款免费.开源数据库产品,已经问世就饱受关注,很多中小企业甚至是大企业都钟爱MySQL,随着大数据的不断发展,我们接触的信息量也越来越多,虽然NoSQL是大数据的宠儿,但MySQ ...

  5. Linux文件系统损坏导致无法正常启动与fsck修复工具

    今天在打开自己的虚拟机学习的时候,发现在文件系统检查过程中出现以下的报错: /dev/mapper/VolGroup-lv_root:UNEXPECTED INCONSISTENCY;RUN fsck ...

  6. 关于引入js文件乱码的问题

    对于大多数的web页面,我们一般都是使用如下两种编码:UTF-8.GB2312.所以我们只需要同意页面和js编码就可以解决乱码问题: 对于GBK页面引用编码为UTF-8编码的JavaScript文件如 ...

  7. Linux基本操作及安装(部分)

    1.分别用cat \tac\nl三个命令查看文件/etc/ssh/sshd_config文件中的内容,   并用自己的话总计出这三个文档操作命令的不同之处? [root@localhost ~]# c ...

  8. python 处理json数据

    python 处理 json数据 以下是登录账号后获取的json数据,headers中注意加入cookie值 需要处理的数据如下: 全部代码如下 #!/usr/bin/env python # -*- ...

  9. Redis Sentinel基本实现原理

    一.出现的背景: Redis 主从复制模式下一旦主节点由于故障不能提供服务,需要人工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,对于很多应用这种场景的这种故障处理方式是非常浪费人力的.为了 ...

  10. 基于python的Elasticsearch索引的建立和数据的上传

    这是我的第一篇博客,还请大家多多指点 Thanks ♪(・ω・)ノ         今天我想讲一讲关于Elasticsearch的索引建立,当然提前是你已经安装部署好Elasticsearch. ok ...