Module理解及使用
ES6
的模块化设计思想是静态化,也就是说,在编译的时候确定模块的依赖关系,以及输出输出入的变量。而CommonJS
和AMD
模块都是在运行时确定的。ES6
的模块不是对象,而是通过export
显示指定输出的代码,再通过import
命令输入。
// 模块输入
import { start,address } from 'util'
上面的模块输入加载了两个方法,即使util
模块内有其它方法也不会加载,只会加载上面引入的两个方法,这种加载称为“编译时加载
”或静态加载
。
需要注意的是,ES6
的模块自动采取严格模式,不管头部有没有加上"use strict"
都会开启严格模式。严格模式的限制如下:
1、变量必须先声明再使用
2、函数参数不能有同名属性,否则报错
3、不能使用with
语句
4、不能对只读属性赋值,否则报错
5、不能使用前缀0
表示八进制数,否则报错
6、不能删除不可删除的属性,否则报错
7、不能删除变量delete prop
,会报错,只能删除属性delete global[prop]
8、eval
不会在它的外层作用域引入变量
9、eval
和arguments
不能被重新赋值
10、arguments
不会自动反映函数参数的变化
11、不能使用arguments.callee
12、不能使用arguments.caller
13、禁止this
指向全局对象
14、不能使用fn.caller
和fn.arguments
获取函数调用的堆栈
15、增加了保留字(比如protected
、static
和interface
)
export和import命令
模块主要有export
和import
构成,export
规定模块对外的接口,import
用于输入模块提供的功能。
模块导出
// util模块
// 类型
function type(a){
return typeof a
}
// 计算
function sum(a,b) {
return a * b
}
// 判断是否为数组
function isArray(a) {
return a instanceof Array
}
export { type,sum } // 按需导出
模块导入
import { type,sum } from './util'
let num = sum(10,5)
console.log(num) // 50
上面两种方式是可选的方式导出的,也就是说,import
导入模块的时候,只会加载export
导出的方法,其它的方法不会被import
加载,并且import
引入util
模块可以按需引入,引入自己需要的模块即可,其它未引入的模块也不会加载,这也就是静态加载的好处。
除了export { xxx,xxx }
的按需导出外,ES6
还提供了export default
的默认导出,默认导出的方法,在import
导入的时候,不需要跟导出名一直,可以自定义名称接收导出的方法。
// util模块
// 计算
function sum(a,b) {
return a * b
}
// 判断是否为数组
function isArray(a) {
return a instanceof Array
}
export default sum // 默认导出
import aaa from './util' // 导入时名字可以自定义
let num = aaa(10,5)
console.log(num) // 50
其实这个default
就是一个叫做default
的变量,这个变量可以被任意命名,在import
导入的时候,取任何名称都可以匹配上default
导出的方法。
按需和默认导出
export { xxx,xxx }
和export default
默认导出可以同时使用
// util模块
function type(a){
return typeof a
}
function sum(a,b) {
return a * b
}
function isArray(a) {
return a instanceof Array
}
export { type,sum }
export default isArray
// 导入
import { type,sum }from './util'
import aaa from './util'
模块的整体加载
上面的导出方法都是加载模块内对应的方法,模块的整体加载要使用*
,也就是加载全部,语法如下
import * as util from './util';
// 在页面中使用
let num = util.sum(10,5)
console.log(num) // 50
这种写法是将模块整体加载,用*
指定一个对象,所有输出的值都加载在这个对象上面。通过该对象.方法名来获取对应方法。
需要注意的是,ES6
的模块是静态分析
的,不允许对模块进行改变
,所以下面写法是不允许的:
util.sum = 'hello' // 报错
util.sum = function () {} // 报错
模块继承
模块之间也是可以继承的,假设A
模块继承了B
模块
// A模块
function sum(a,b) {
return a * b
}
function isArray(a) {
return a instanceof Array
}
export * from 'B' // 输出B模块的所有属性和方法,忽略模块内的default方法
export { sum }
export default isArray
export *
命令会忽略B
模块的default
方法,因为A
模块内部有自己的default
方法。
模块的重命名
// util模块
export { sum as s }
// 页面
import { s } from './util' // 引入命名后的方法
模块按需引入import()
正常情况下import
是需要在页面顶层引入的,并且import
的引入执行的优先级是最高的,例如:
let s = sum(10,5)
import { sum } from './util'
上面这种写法是允许的,程序会执行import
的引入,然后再执行let s = sum(10,5)
,但这种写法会默认导入模块,并且是在顶层导入。
es6
提供了动态导入功能:import()
,当程序执行到该语句的时候才会导入,并且是同步执行,import()
返回的是一个Promise
,所以可以使用then
方法和async-await
。
Promise写法
import('./util.js')
.then(el=>{
console.log(el.t(100)); // number
console.log(el.sum(10,5)); // 50
})
async-await写法
async function getImport(){
let { sum } = await import('./util.js')
console.log(sum(2,8));
}
getImport() // 16
也可以通过解构的方式获取
import('../module/import.js')
.then(({sum})=>{
console.log(sum(20,5)); // 100
})
如果模块是default
默认导出,其实default
就是一个键名
import('../module/import.js')
.then((e)=>{
console.log(e.default([1,2,3])); // true
})
default
也可以通过具名的形式导入(取别名)
import('../module/import.js')
.then(({default : isA})=>{
console.log(isA([1,2,3])); // true
})
import.meta
在使用一个模块时,有时候需要知道该模块本身的信息(比如模块的路径),import
命令新增了一个元属性import.meta
,可以返回当前模块的信息。
注意:import.meta
只能在模块内使用,在模块外使用会报错
// util模块
function sum(a,b) {
return a * b
}
function getMeta(){
return import.meta // 获取当前模块的元信息
}
export { sum,getMeta }
// console.log(import.meta); // import.meta只能在模块内使用,在模块外部使用会报错
import('./util.js')
.then(el=>{
console.log(el.getMeta()); // {url: 'http://127.0.0.1:5500/module/import.js', resolve: ƒ}
})
案例源码:https://gitee.com/wang_fan_w/es6-science-institute
如果觉得这篇文章对你有帮助,欢迎点亮一下star哟
Module理解及使用的更多相关文章
- 对drupal的理解【转】
写本文是想跟刚用drupal的朋友,分享一下心得,国内用drupal的太少了,希望大家能好好交流. 希望几分钟看完后你能马上上手drupal,至少能理解hook,api,theme,module,cc ...
- 图像处理&计算机视觉中upscale,downscale的翻译理解
最近在看SAN网络(Second-order Attention Network for Single Image Super-Resolution)的论文,其中的Upscale module理解的不 ...
- angular.module 详解
AngularJS 模块 模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.serv ...
- Android Studio使用教程(一)(转)
今年的Google全球开发者大会虽然没有新的Android系统和设备,但是还是推出了一些不错的产品,Android Studio就是其中之一.这个基于Intellij IDEA开发的Android I ...
- Android Studio初步使用教程
今年的Google全球开发者大会虽然没有新的Android系统和设备,但是还是推出了一些不错的产品,Android Studio就是其中之一.这个基于Intellij IDEA开发的Android I ...
- Android Studio使用教程图文详解
谷歌表示Android Studio 1.0 能让开发者“更快更有生产力”,并认为它可以代替 Eclipse,同时为Eclipse 用户提供迁移步骤.代码自动提示.运行响应速度.都比Eclipse来的 ...
- Android Studio使用教程(一)
今年的Google全球开发者大会虽然没有新的Android系统和设备,但是还是推出了一些不错的产品,Android Studio就是其中之一.这个基于Intellij IDEA开发的Android I ...
- 第二章 andrid studio创建项目
原文 http://blog.csdn.net/zhanghefu/article/details/9326735 第二章 andrid studio创建项目 第二章 andrid studio创建项 ...
- [Android Studio] Android Studio使用教程(一)
转载:http://blog.csdn.net/hyr83960944/article/details/37509113 今年的Google全球开发者 大会虽然没有新的Android系统和设备,但是还 ...
- (七)理解angular中的module和injector,即依赖注入
(七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54 阅读:63060 评论:1 收藏:0 [点 ...
随机推荐
- OpenCV之C++经典案例
四个案例实战 1.刀片缺陷检测 2.自定义对象检测 3.实时二维码检测 4.图像分割与色彩提取 1.刀片缺陷检测 问题分析 解决思路 尝试二值图像分析 模板匹配技术 代码实现 #include < ...
- 【Java EE】Day04 MySQL多表、事务、事务隔离级别、DCL
一.多表查询 1.概述 笛卡尔积:两集合的所有组成情况 多表查询:消除笛卡尔积得到的无用数据 2.分类 内连接查询(满足指定条件无空值,只显示有关联的数据) 隐式内连接:使用where限制消除无用数据 ...
- Oracle查询,将某列查询结果用逗号隔开,拼接成一行(listagg函数)
需求:Oracle数据库,通过查询,将查询字段的该列结果用逗号拼接成一行. 1. 查询语法 select listagg('字段',',') within group (order by '字段') ...
- PAM8403 3.3V音频功放调试笔记
做I2S输出用了PT8211(实际上买到的丝印是GH8211), 双声道, LSB格式, 工作正常但是输出功率非常低, 喇叭声音要贴近了才能勉强听到, 所以打算做一个PT8211带功放的I2S模块. ...
- BOM与DOM之BOM操作
目录 一:BOM与DOM操作 1.BOM与DOM操作 二:BOM操作 1.常用的Window方法: 2.案例实操 3.打开新窗口 4.关闭当前页面 三:window的子对象 1.navigator对象 ...
- SQL语句查询优化方法
建立索引并命中索引,在查询的时候,要尽量让数据库引擎使用索引.加入explain执行计划 1.尽量避免使用select * 2.尽量避免使用!= 3.尽量避免使用or 优化方式:可以用union代替o ...
- 教你用JavaScript实现乘法游戏
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个乘法积分游戏.乘法游戏主要通过用户输入的数值和程序计算的数值进行对比,正确积一分,错 ...
- 【深入浅出 Yarn 架构与实现】4-3 RM 管理 NodeManager
本篇继续对 RM 中管理 NodeManager 的部分进行深入的讲解.主要有三个部分:检查 NM 是否存活:管理 NM 的黑白名单:响应 NM RPC 请求. 一.简介 在 RM 的主从结构中,最主 ...
- 什么是Rabbitmq消息队列? (安装Rabbitmq,通过Rabbitmq实现RPC全面了解,从入门到精通)
目录 Rabbitmq 一: 消息队列介绍 1.介绍 2.MQ解决了什么问题 1.应用的解耦 2.流量削峰 3.消息分发(发布订阅: 观察者模式) 4.异步消息(celery就是对消息队列的封装) 3 ...
- 03-Verilog语法
Verilog语法 1 Register 组合逻辑-->寄存器-->组合逻辑-->寄存器 Register是一个变量,用于存储值,并不代表一个真正的硬件DFF. reg A,C; / ...