js-ES6学习笔记-module(3)
1、如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法。
// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4; // test1.js 模块
import * as constants from './constants';
console.log(constants.A); //
console.log(constants.B); // // test2.js 模块
import {A, B} from './constants';
console.log(A); //
console.log(B); //
2、如果要使用的常量非常多,可以建一个专门的constants目录,将各种常量写在不同的文件里面,保存在该目录下。
// constants/db.js
export const db = {
url: 'http://my.couchdbserver.local:5984',
admin_username: 'admin',
admin_password: 'admin password'
}; // constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
然后,将这些文件输出的常量,合并在index.js里面。
// constants/index.js
export {db} from './db';
export {users} from './users';
使用的时候,直接加载index.js就可以了。
// script.js
import {db, users} from './constants';
3、import和export命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。
这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。从语法上,条件加载就不可能实现。如果import命令要取代 Node 的require方法,这就形成了一个障碍。因为require是运行时加载模块,import命令无法取代require的动态加载功能。
因此,有一个提案,建议引入import()函数,完成动态加载。
import()类似于 Node 的require方法,区别主要是前者是异步加载,后者是同步加载。
4、下面是import()的一些适用场合。
(1)按需加载。
import()可以在需要的时候,再加载某个模块。
(2)条件加载
import()可以放在if代码块,根据不同的情况,加载不同的模块。
(3)动态的模块路径
import()允许模块路径动态生成。
5、import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
js-ES6学习笔记-module(3)的更多相关文章
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- ES6学习笔记:Module的基本用法
export和import ES6实现了模块功能,试图解决JavaScript代码上的依赖和部署上的问题,取代现有的CommonJs的AMD规范,成为浏览器和服务器通用的模块解决方案. 模块功能有两个 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
随机推荐
- JS脚本实现CSDN免登陆免关闭广告插件自动展开“阅读更多”内容
最近在CSDN查资料,总是弹出以下弹窗,然后就自动跳转到登录页面,蛋疼! 于是重新捣腾了一下,修改了原来的脚本,最新的脚本代码如下: 温馨提示:在打开CSDN页面后立刻执行以下脚本即可免登陆免关闭广告 ...
- Docker三剑客之Docker Swarm
一.什么是Docker Swarm Swarm是Docker公司推出的用来管理docker集群的平台,几乎全部用GO语言来完成的开发的,代码开源在https://github.com/docker/s ...
- 机器人之路的第一小步:录音+语音识别(语音转文字),大小600K(免费下载)!
机器人之路的第一小步:录音+语音识别(语音转文字),大小600K,本人出品! 机器人之路的第一小步:录音+语音识别,准确率还不是特别高,不过普通话标准的话,识别准确率还是不错的,大家可以体验一下,请下 ...
- (转) argparse — 解析命令参数和选项
原文地址:https://pythoncaff.com/docs/pymotw/argparse-command-line-option-and-argument-parsing/166 https: ...
- RVM的安装和使用过程中碰到的问题
Ruby Version Manager简称RVM,是一款非常好用的ruby版本管理以及安装工具. 关于rvm的安装,可以参考以下文章: use rvm install and manage ruby ...
- 持续集成 TeamCity 的配置与使用
环境:实现自动编译与自动化测试,发布到远程服务器,环境 VS2015 +WIN2008R2 什么是TeamCity TeamCity是由Jetbrains开发的一款功能强大的持续集成(Continue ...
- 【转】谷歌三大核心技术(三)Google BigTable中文版
谷歌三大核心技术(三)Google BigTable中文版 摘要 Bigtable 是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Goo ...
- 计数排序/Counting Sort
计数排序的算法思想: 对于每一个元素x,只要确定了元素x有多少个比它小的元素,那么就可以知道其最终的位置. 记输入数组为A[n],存放最后排序输出的数组为B[n],提供临时存储空间的中间数组记为C[k ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(五):模块化切分
切分工程 考虑到后续我们的模块会越来越多,依赖的公共代码和配置需要集中管理,我们在这里先把公共模块和配置从后台管理业务中剥离出来. 新增两个工程,切分后结构如下: kitty-boot:启动器及全局配 ...
- 线上问题定位--OOM
服务器上部署了Java服务,出现了OutOfMemoryError,问题应该如何定位? 解决思路 Java服务OOM,最常见的原因为: 有可能是内存分配确实过小,而正常业务使用了大量内存 某一个对象被 ...