乐趣区

关于javascript:ES6-系列十二Module

“Code tailor”,为前端开发者提供技术相干资讯以及系列根底文章,微信关注“小和山的菜鸟们”公众号,及时获取最新文章。

前言

在开始学习之前,咱们想要告诉您的是,本文章是对阮一峰《ECMAScript6 入门》一书中 “Module” 章节的总结,如果您已把握上面常识事项,则可跳过此环节间接进入题目练习

  • 什么是模块化?
  • import 命令和 export 命令别离有什么作用?
  • 如何模块整体加载
  • export default 命令有何作用?

如果您对某些局部有些忘记,👇🏻 曾经为您筹备好了!

学习链接

Module 的学习

汇总总结

什么是模块化

历史上,JavaScript 始终没有模块(module)体系,无奈将一个大程序拆分成相互依赖的小文件,再用简略的办法拼装起来

ES6 模块的设计思维是尽量的动态化,使得编译时就能确定模块的依赖关系,以及输出和输入的变量。

模块性能次要由两个命令形成:exportimportexport 命令用于规定模块的对外接口,import 命令用于输出其余模块提供的性能。

export 命令

一个模块就是一个独立的文件。该文件外部的所有变量,内部无奈获取。如果你心愿内部可能读取模块外部的某个变量,就必须应用 export 关键字输入该变量。上面是一个 JS 文件,外面应用 export 命令输入变量。

  • 输入变量
// profile.js
export var firstName = 'Michael'
export var lastName = 'Jackson'
export var year = 1958

// 等同于下列代码
var firstName = 'Michael'
var lastName = 'Jackson'
var year = 1958

export {firstName, lastName, year}

下面代码是 profile.js 文件,保留了用户信息。ES6 将其视为一个模块,外面用 export 命令对外部输入了三个变量。

  • 输入函数或类(class)
export function multiply(x, y) {return x * y;};

通常状况下,export 输入的变量就是原本的名字,然而能够应用 as 关键字重命名

function v1() { ...}
function v2() { ...}

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

另:export 语句输入的接口,与其对应的值是动静绑定关系,即通过该接口,能够取到模块外部实时的值。

import 命令

应用 export 命令定义了模块的对外接口当前,其余 JS 文件就能够通过 import 命令加载这个模块。

// main.js
import {firstName, lastName, year} from './profile.js'

function setName(element) {element.textContent = firstName + ' ' + lastName}

//import 命令承受一对大括号,外面指定要从其余模块导入的变量名。大括号外面的变量名,// 必须与被导入模块(profile.js)对外接口的名称雷同。
  • 如果想为输出的变量从新取一个名字,import 命令要应用 as 关键字,将输出的变量重命名。
import {lastName as surname} from './profile.js'
  • import 命令输出的变量都是只读的,不容许在加载模块的脚本外面,改写接口。
import {a} from './xxx.js'
a = {} // Syntax Error : 'a' is read-only;

// 然而如果 a 是一个对象,改写 a 的属性是容许的
import {a} from './xxx.js'
a.foo = 'hello' // 非法操作
  • import 前面的 from 指定模块文件的地位,能够是相对路径,也能够是绝对路径。如果不带有门路,只是一个模块名,那么必须有配置文件,通知 JavaScript 引擎该模块的地位。
import {myMethod} from 'util'
//  util 是模块文件名,因为不带有门路,必须通过配置,通知引擎怎么取到这个模块。
  • import 命令具备晋升成果,会晋升到整个模块的头部,首先执行。

模块的整体加载

除了指定加载某个输入值,还能够应用整体加载,即用星号(*)指定一个对象,所有输入值都加载在这个对象下面。

// circle.js

export function area(radius) {return Math.PI * radius * radius}

export function circumference(radius) {return 2 * Math.PI * radius}
import * as circle from './circle'

console.log('圆面积:' + circle.area(4))
console.log('圆周长:' + circle.circumference(14))

export default 命令

为了给用户提供方便,让他们不须要晓得所要加载的变量名或函数名,就能加载模块。

// export-default.js
export default function () {console.log('foo')
}

下面代码是一个模块文件 export-default.js,它的默认输入是一个函数。其余模块加载该模块时,import 命令能够为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default'
customName() // 'foo'

题目自测

一:对于 ES6 的 module 模块,下列说法谬误的是?

  • A: 能够无效解决大型系统文件简单的依赖问题
  • B: 应用 export 语句能够选择性地向内部裸露本人的属性或者办法
  • C: 应用 import 语句导入其余模块的属性或者办法
  • D: 目前大部分支流浏览器都反对 module 模块

二:以下代码输入后果为()

// module.js
export default () => 'Hello world'
export const name = 'Lydia'

// index.js
import * as data from './module'

console.log(data)
  • A: {default: function default(), name: "Lydia" }
  • B: {default: function default() }
  • C: {default: "Hello world", name: "Lydia"}
  • D: Global object of module.js

三:简述 export 和 export default 的区别


题目解析

一、

Answer: D


二、

Answer: A

应用 import* 作为名称语法,咱们从 module.js 归档到 index.js 将创立名为 data 的新对象文件。在 module.js 文件有两个导出:默认导出和命名导出。默认导出是一个函数,它返回字符串“helloworld”,命名的导出是一个名为name 的变量,该变量的值为字符串“Lydia”

数据对象具备默认导出的默认属性,其余属性具备命名导出的名称及其相应值。


三、

export default的对象、变量、函数、类,能够没有名字。export的必须有名字 export default在一个模块中只能有一个,当然也能够没有。export在一个模块中能够有多个 export default对应的 importexport有所区别:有 default 的导入不须要{}

ES 6 系列的 Module,咱们到这里完结啦,谢谢各位对作者的反对!你们的关注和点赞,将会是咱们后退的最强能源!谢谢大家!

退出移动版