ES6之代码模块化
来源:互联网 发布:windows已遇到关键问题 编辑:程序博客网 时间:2024/06/05 08:13
代码模块化
目录:
- 代码模块化
- 引入模块
- 引入默认模块
- 引入模块部分接口
- 定义别名
- 引入全部局部接口到指定命名空间
- 混入引入默认接口和命名接口
- 更简洁的语法
- 不引入接口仅运行模块代码
- 定义模块
- 暴露模块
- 暴露单一接口
- 暴露模块默认接口
- 混合使用暴露接口语句
- 从其他模块暴露接口
- 暴露一个模块的所有接口
- 暴露一个模块的部分接口
- 暴露一个模块的默认接口
- 暴露模块
- 引入模块
引入模块
import name from 'module-name';import * as name from 'module-name';import { member } from 'module-name';import { member as alias } from 'module-name';import 'module-name';
引入默认模块
用法:import namespace from 'module-name';
。
import http from 'http';import fs from 'fs';
引入模块部分接口
用法:import {member1, member2} from 'module-name';
。
import {isEmpty} from 'loadsh';import {EventEmitter} from 'event';console.log(isEmpty({})); // ture
定义别名
为模块中局部引用的接口定义一个别名,以避免指代不明或接口重名的情况出现。
用法:import {member as alias} from 'moudule-name';
。
import {createServer as createHTTPServer} from 'http';import {createServer as createHTTPSServer} from 'https';
引入全部局部接口到指定命名空间
用法:import * as namesapce from 'module-name';
。
import * as lib from 'module';lib.method1();lib.method2();
混入引入默认接口和命名接口
用法:import {default as <default name>, method} from 'module-name';
。
import {default as Client, utils} from 'module';
必须要注意的是,引入的默认接口必须要使用 as 语句赋予一个别名,因为在除模块引入语句以外的地方 default 是一个保留关键字,所以无法被使用。
更简洁的语法
用法:import <default name>, {<named modules>} from 'module-name';
。
import Client, {utils} from 'module';import Client, * as lib from 'module';
不引入接口,仅运行模块代码
在某些场景下,一些模块并不需要向外暴露任何接口,只需要执行内部的代码(如系统初始化等)。
用法:import 'module-name'
。
import 'system-apply';
定义模块
ES6中的模块化机制以文件名及其相对或绝对路径作为该模块被引用时的标识。
暴露模块
暴露单一接口
用法:export <statement>
。
// moudule.jsexport const apiRoot = 'https://example.com/api';export function method(){ // ...}export class Foo{ / ...}// app.jsimport {method, Foo} from 'module.js';
export 语句后所跟着的语句需要具有声明部分和赋值部分。
- 声明部分(Statement)为 export 语句提供了所暴露接口的标识。
- 赋值部分(Assignment)为 export 语句提供了接口的值。
不符合上述两个条件的语句无法被暴露在当前文件所定义的模块上:
// 1export 'foo';// 2const foo = 'bar';export foo;// 3export function (){}
暴露模块默认接口
用法:export default <value>
。
// client.jsexport default class Client{ // ...}// app.jsimport Client from 'client.js';
混合使用暴露接口语句
// module.jsexport default class Client{ // ...}export const foo = 'bar';// app.jsinport Client, {foo} from 'module';
从其他模块暴露接口
暴露一个模块的所有接口
用法:export * from 'other-module'
。
暴露一个模块的部分接口
用法:export {member} from 'module-name';
。
export {member} from 'module';export {default as Module1Default} from 'module';
暴露一个模块的默认接口
export {default} from 'module';
- ES6之代码模块化
- 学习笔记:ES6之模块化
- es6 模块化
- ES6模块化
- 初步探究ES6之module模块化
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
- ES6新特性模块化
- ES6——模块化
- es6中的模块化
- 代码大全(4)之模块化
- es6 模块化语法(十七)
- 继续模块化,这次是ES6
- ES6 Class Module模块化 案例
- ES6模块化及webpack配置
- 代码模块化
- 算法训练 乘法表
- Java for Web学习笔记(八八):消息和集群(3)序列化Serializable
- 《数据库系统概念》3-主键、关系运算
- 百钱买百鸡
- Spring Boot 快速入门 mac IDEA
- ES6之代码模块化
- C中程序的内存分配和函数调用时栈帧的创建
- sqlite学习笔记(3)用Doxygen辅助看代码
- 关于Python里pip安装库的时候总是超时的问题
- 11月11日一些小知识
- opencv split merge
- 顺序队列的实现
- 2017-11-9 文档的压缩与打包 (二)
- 使用mysql命令窗口查看中文数据乱码的解决办法