05 ES6模块化规范基础详解
2024-10-09 10:20:37
ES6模块规范
1.1 ES6规范说明
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require
、Python 的import
,甚至就连 CSS 都有@import
,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
自从ES6的推出,ES6定义了自己的模块化规范,使用export
和import
导出导入实现模块化管理
1.2 基本语法
模块功能主要由两个命令构成:export
和import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能
1.21暴露模块
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export
关键字输出该变量。下面是一个 JS 文件,里面使用export
命令输出变量
export:它是用来定义模块的,可以导出对象、函数、类、字符串等等
(1)单独导出数据
export var name = 'guo';
export function foo(x, y){}
(2)或者直接导出一个对象(推荐使用)
// person.js
const name = 'guo';
const age = '18';
const addr = '过青年';
export { name, age, addr };
(3)使用as
重命名,并且可以利用它将数据暴露多次
// person.js
const name = 'guo';
const age = '18';
export {
name as firstName,
age as oneAge,
age as twoAge
}
(4)使用export default
导出数据;export default
其实是导出一个叫做default
的变量,所以其后面不能跟变量声明语句;
默认暴露只能暴露一次,暴露多次,后面的默认暴露覆盖前面的默认暴露
// guo.js
// export default var name = 'guo' 错误
export default name = 'guo';
1.22引入模块
1)一般用法
import { name, age } from './person.js';
(2)As用法
import { name as personName } from './person.js';
import命令具有提升效果,会提升到整个模块的头部,首先执行;如下也不会报错:
getName();
import { getName } from 'person_module';
(3)整体模块加载 *
//person.js
export name = 'xixi';
export age = 23;
//逐一加载
import { age, name } from './person.js';
//整体加载
import * as person from './person.js';
console.log(person.name);
console.log(person.age);
(4)加载export default
导出的数据,不需要加{}
号
import guo from './person.js';
总结
- 使用
export
和export default
向外暴露数据,使用import
获取数据 - 使用
as
重命名,使用*
符号整体加载 import
命令具有提升效果,会提升到整个模块的头部export default
以最后一次暴露为准,且暴露的数据加载时,不需要加入{ }号
最新文章
- android中webview调用拨号盘
- 【XLL 文档翻译】【第1部分】 Add-in 管理器 和 XLL 接口函数
- PHP包含文件函数include、include_once、require、require_once区别总结
- apache+tomcat整合
- File System Shell
- 3407: [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题
- Vim安装YouCompletMe插件。
- 从服务器端获取列和数据动态创建Ext.grid.EditorGridPanel
- Ubuntu 上查看硬件信息命令
- thinkphp调试技巧
- 仿9GAG制作过程(一)
- OPC安装-配置(http://www.mabotech.com)
- python处理转义字符
- TOP100summit:【分享实录-美团点评】 业务快速升级发展背后的系统架构演进
- python给邮箱发送消息
- struts2_E_commerce_maven
- servlet基础(组成与生命周期)
- Web Js推断键盘出发事件
- Spring Boot中application.yml与bootstrap.yml的区别(转)
- 网络流量统计using ADB
热门文章
- Java多线程之volatile详解
- 一位老程序员说,有这份python3的开发指南,月薪能突破20K
- Shell 脚本学习(1)
- Apache Dubbo Provider默认反序列漏洞复现(CVE-2020-1948)
- 代码块&;&;API(object、String、StringBuffer、StringBuilder)
- 洛谷 P6136 【【模板】普通平衡树(数据加强版)】
- pycharm中导入包失败的解决办法
- rpm部分命令解读
- ASP.NET MVC Route详解
- C#读取Excel转为DataTable