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、importexport命令只能在模块的顶层,不能在代码块之中(比如,在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)的更多相关文章

  1. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  2. ES6学习笔记:Module的基本用法

    export和import ES6实现了模块功能,试图解决JavaScript代码上的依赖和部署上的问题,取代现有的CommonJs的AMD规范,成为浏览器和服务器通用的模块解决方案. 模块功能有两个 ...

  3. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  4. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  5. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  6. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  7. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  8. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  9. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  10. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

随机推荐

  1. HTML元素ID和JS方法名重复,JS调用失败

    HTML元素ID和JS方法名重复时,JS中的重名方法无法被找到,不能执行. 修改ID或者方法名,两者不一致即可.

  2. day 38 jq 入门 学习(一)

    前情提要: jq是简化版本的js 可以把很多很复杂的js 提炼让前端代码更好写 一:jq的使用 <!DOCTYPE html> <html lang="en"&g ...

  3. POJ 2707

    #include<iostream> #include<stdio.h> #include<algorithm> using namespace std; int ...

  4. POJ 2575

    #include<iostream> #include<set> #include<stdio.h> using namespace std; int my_abs ...

  5. java单例类的几种实现

    一,最简单的方式 public class Singleton{ private Singleton(){}; private static Singleton instance = new Sing ...

  6. Elasticsearch使用filter进行匹配关系and,or,not,range查询

    RESTful接口URL的格式: http://localhost:9200/<index>/<type>/[<id>] 其中index.type是必须提供的. i ...

  7. ASP.NET MVC网站使用新浪微博账号登录

    首先到http://open.weibo.com/development 注册一个开发者账号. 然后可以点微连接--网站接入 会分配App Key 和App Secret 然后点高级信息 在这里设置回 ...

  8. 使用 GMap.NET 实现添加标注、移动标注功能。(WPF版)

    前言 在WPF嵌入地图,有两种方式: 浏览器方式:控件方式. 1)浏览器方式就是使用浏览器控件WebBrowser,设置好网址就行了.这种方式与地图的交互不太直接,需要懂html.javascript ...

  9. 工厂模式——java设计模式

    工厂模式 目录 何为工厂模式 工厂方法与抽象工厂 如何在Java EE中通过@Producers与@Inject注解实现工厂模式 如何创建自定义注解以及通过@Qualifier消除具体实现之间的歧义 ...

  10. jdk8-stream-并行流的使用

    使用jdk的stream, 可以非常方便的将串行改为并行 1, 判断是否质数 /** * 将一个stream改成简单的并行 */ @Test public void test1() { // 串行 , ...