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. 第2个C# Winform实例,寻找三角形的位置

    这里,在第一个例子的基础上,稍微做修改,达到最终定位三角形位置的目的. 先在网络上找一张包含有三角形的图片,我们这里使用一张有三个三角形和一些标记的图片来处理. 原图: 先贴结果图片:左侧,中间,右侧 ...

  2. python找质数对

    python找质数对 编写python脚本,输入一个正整数,输出有几对质数的和等于这个正整数. 例如输入一个正整数10,可以找出有“3+7=10”.“5+5=10”两个质数对的和为10. 要实现这个功 ...

  3. linux初学者-延迟及定时任务篇

    linux初学者-延迟及定时任务篇 在linux系统的学习工作中,南面会遇到需要延迟进行的任务和需要定时去完成的任务,就像手机的闹钟一样,这时候就需要用到linux系统当中的系统延迟和定时任务的设置了 ...

  4. python pip安装requests库总提示:Fatal error in launcher...''

      1.python pip安装提示:Fatal error in launcher...'' 我查看了网上都说是电脑同时安装了python2  和python3时候才会有这个错误,但实际上我电脑只安 ...

  5. Python3数据驱动ddt

    对于同一个方法执行大量数据的程序时,我们可以采用ddt数据驱动的方式,来对数据规范化整理及输出 一.需要使用python的ddt库,ddt,data,unpack方法 1.仅使用ddt和data,代码 ...

  6. python 简单的实现文件内容去重

    文件去重 这里主要用的是set()函数,特别地,set中的元素是无序的,并且重复元素在set中自动被过滤. 测试文本为 data.txt 具体代码如下: // 文件去重 #!/usr/bin/env ...

  7. ubuntu/deepin 下下载wxpython

    1 输入apt-cache search wxpython 如果有返回信息 则输入 sudo apt-get install python-tools 2 否则 1.添加软件源地址到apt列表中.输入 ...

  8. Codis与RedisCluster的原理详解

    背景介绍 我们先来看一下为什么要做集群,如果我们要部署一个单节点Redis,很明显会遇到单点故障的问题. 首先能想到解决单点故障的方法,就是做主从,但是当有海量存储需求时,单一的主从结构就会出问题,说 ...

  9. Docker入门学习笔记

    Docker 什么是Docker 虚拟化技术 在计算机中,虚拟化是一种资源管理技术,将计算机中的各种实体资源如:CPU.硬盘.内存等予以抽象.转换后呈现出来打破实体结构间的不可切割的障碍,使用户可以比 ...

  10. kubernetes集群升级的正确姿势

    kubernetes社区非常活跃,每季度都会发布一个release.但是线上集群业务可用性要求较高,场景复杂,任何微小的变更都需要非常小心,此时跟随社区版本进行升级略显吃力.但是为了能够使用到最新的一 ...