1 module 模块化

js module

ES6 的模块化分为导出（export）与导入（import）两个模块。
模块导入导出各种类型的变量，如字符串，数值，函数，类。
export、import 都处于模块顶层

1.1 export

export 输出变量、函数、类
- export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
- 对应的 import 语句需要使用大括号。

// 1.
export var xxx = 123;
export var yyy = 'aaa';
export function multiply(x, y) {return x * y;
};export const multiply = (x, y) { }// 2.
var xxx = 123;
var yyy = 'aaa';
function multiply(x, y) {return x * y;
}export { xxx, yyy, multiply };// 3. 别名
export { multiply as ccc };// 4. 错误
export 1;var m = 1;
export m;  // 应该写成 export {m};

1.2 import

import 输入其他模块提供的功能
- import 命令具有提升效果，会提升到整个模块的头部，首先执行
- 只读属性：import 命令输入的变量都是只读的，可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。
- 单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import
- 静态执行特性：import 是静态执行，编译阶段执行的，所以不能使用表达式和变量

// 1.
import { xxx, yyy, multiply } from "./profile.js";// 2. 别名
import { xxx as surname } from "./profile.js";// 3. 整体加载 *
import * as circle from "./circle";

//可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。
import { a } from "./xxx.js";
a = {}; // errorimport { a } from "./xxx.js";
a.foo = "hello"; // a = { foo : 'hello' }

1.3 export default

export default 命令，为模块指定默认输出。
- 对应的 import 语句不需要使用大括号；
- 正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。
- 因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后。
- 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
- export default 中的 default 是对应的导出接口变量，本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。
- export default 向外暴露的成员，可以使用任意变量来接收。

// 1.
export default function () {console.log('foo');
}// 2.
function foo() {console.log('foo');
}export default foo;// 3. 不能跟变量声明语句
export default var a = 1; // 错误
export var a = 1;  // 正确// 4. 直接将一个值写在后面
export default 42; // 正确
export 42; // 报错

1.4 export 与 import 在同一模块使用

export 与 import 可以在同一模块使用，使用特点：
- 可以将导出接口改名，包括 default。
- 复合使用 export 与 import ，也可以导出全部，当前模块导出的接口会覆盖继承导出的。

// 1. 输入默认方法
import customName from "./export-default";// 2. 同时输入默认方法和其他接口
//
export default function (obj) {}export function each(obj, iterator, context) {}export { each as forEach };//
import _, { each, forEach } from "lodash";

// modules.js
function add(x, y) {return x * y;
}
export { add as default };
// 等同于
// export default add;// app.js
import { default as foo } from "modules";
// 等同于
// import foo from 'modules';

// export 与 import 的复合写法
// 如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
// 写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
export { foo, bar } from "my_module";// 可以简单理解为
import { foo, bar } from "my_module";
export { foo, bar };// 整体输出
export * from "my_module";

1.5 import()

import(./xxx.js)
- 参数 specifier，指定所要加载的模块的位置
- import 命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
- import()返回一个 Promise 对象
- 它是运行时执行，什么时候运行到这一句，就会加载指定的模块。
- import()函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。
- import()类似于 Node.js 的 require()方法，区别主要是前者是异步加载，后者是同步加载。

【JavaScript】模块 module相关推荐

javascript模块 (Module) 简介
随着ES6的出现,js模块已经成为正式的标准了.曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD).SeaJs(CMD).Node(CommonJs),已经或者不久的将来会成为 ...
javascript模块_JavaScript模块第2部分：模块捆绑
javascript模块 by Preethi Kasireddy 通过Preethi Kasireddy JavaScript模块第2部分:模块捆绑 (JavaScript Modules Part ...
Javascript模块规范(CommonJS规范AMD规范)
Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法查看 AMD规 ...
javascript 模块模式
2019独角兽企业重金招聘Python工程师标准>>> 模块模式是JavaScript一种常用的编码模式.这是一般的理解,但也有一些高级应用没有得到很多关注.在本文中,我将回顾基础知 ...
javascript模块_JavaScript中的模块
javascript模块 JavaScript模块 (JavaScript Modules) One of the key features of programming fundamentals i ...
导出库的版本_了解 JavaScript 模块系统基础知识，搭建自己的库
我想很多"前端工程师"都听过说过 "JavaScript 模块",那你们都知道如何处理它,以及它在日常工作中如何发挥作用吗? JS 模块系统到底是什么呢随着 ...
田永强：优秀的JavaScript模块是怎样炼成的
转自:http://blog.jobbole.com/26101/ 引言:如今的JavaScript已经是Web上最流行的语言,没有之一.从GitHub上的语言排行榜https://github.co ...
javascript 的module 模块化
The Module Pattern,模块模式,也译为模组模式,是一种通用的对代码进行模块化组织与定义的方式.这里所说的模块(Modules),是指实现某特定功能的一组方法和代码.许多现代语言都定义了 ...
JavaScript模块机制
commonJS规范模块引用你可以通过require来引入你所需要的模块,这个方法接收模块标识,以此引入一个模块的API到当前上下文中. const fs = require('fs'); 模块定 ...
优秀的JavaScript模块是怎样炼成的
引言:如今的JavaScript已经是Web上最流行的语言,没有之一.从Github上的语言排行榜https://github.com/languages上即可看出,也是如今最为活跃的开源社区.随着N ...

【JavaScript】模块 module

目录

1 module 模块化

1.1 export

1.2 import

1.3 export default

1.4 export 与 import 在同一模块使用

1.5 import()

【JavaScript】模块 module相关推荐

最新文章

热门文章

【JavaScript】 模块 module

目录

1 module 模块化

1.1 export

1.2 import

1.3 export default

1.4 export 与 import 在同一模块使用

1.5 import()

【JavaScript】 模块 module相关推荐

最新文章

热门文章

【JavaScript】模块 module

【JavaScript】模块 module相关推荐