ES6中的模块化编程
ES6中的模块化编程
- 为什么使用模块化
- ES6模块化实现
- export 命令
- import命令
- 完整实例
- export default 命令
为什么使用模块化
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
<script src="area.js"></script>
<script src="len.js"></script>
<script src="people.js"></script>
上面是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口。
这种原始的加载方式暴露了一些显而易见的弊端:
1、全局作用域下容易造成变量冲突。
2、文件只能按照javaScripe的书写顺序进行加载。
3、开发人员必须主观解决模块和代码库的依赖关系。
4、在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪。
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。
在 ES6 之后,ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
ES6模块化实现
模块功能主要由两个命令构成:export和import。 export命令用于规定模块的对外接口 import命令用于输入其他模块提供的功能。
export 命令
export let firstName = '牛哄哄的柯南';
export let lastName = 'Keafmd';
export let year = 1958;
上面代码中,使用export命令对外部输出了三个模块。
let firstName = '牛哄哄的柯南';
let lastName = 'Keafmd';
let year = 1958;
export { firstName as f, //可以使用as关键字,重命名对外接口lastName, year
};
上面代码是export命令的另外一种写法。 在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在let语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
export function multiply(x, y) {return x * y;
};
export class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return this.x + ',' + this.y;}
};
export命令除了输出变量,还可以输出函数、类(class)。
import命令
1、使用export命令定义模块对外接口后,其他 JS 文件就可以通过import命令加载这个模块。
import { name, age, sex } from './module1.js‘
console.log(name + '\t' + age + '\t' + sex);
上面代码的import命令,用于加载module1.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块( module1.js)对外接口的名称相同。
2、import命令可以使用as关键字,将输入的变量重命名。
import { lastName as surname } from './profile.js';
3、import命令具有提升效果,会提升到整个模块的头部,首先执行。
foo();
import { foo } from ‘./my_module.js';
上面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。
4、import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
// 报错
import { 'f' + 'oo' } from ‘./my_module.js';
// 报错
let module = ‘./my_module.js';
import { foo } from module;// 报错
if (x === 1) {import { foo } from './module1.js';
} else {import { foo } from './module2.js';
}
5、如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。
import './lodash.js';
import './lodash.js';
上面代码加载了两次lodash,但是只会执行一次。
6、import语句是 Singleton 模式。
import { foo } from './my_module.js';
import { bar } from './my_module.js';
// 等同于
import { foo, bar } from './my_module.js';
上面代码中,虽然foo和bar在两个语句中加载,但是它们对应的是同一个my_module实例。也就是说,import语句是 Singleton 模式。
完整实例
profile.js文件:
export var firstName = '牛哄哄的柯南';
export var lastName = 'Keafmd';
export var year = 1958;
export function jia(x, y) {return x + y;
}
export function jian(x, y) {return x - y;
}
export class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return this.x + '\t' + this.y;}
}
app.js文件:
import {firstName,lastName,year,jia,jian,Point} from './profile.js'console.log(firstName + '\t' + lastName + '\t' + year);
console.log(jia(1,2));
console.log(jian(1,2));let obj = new Point(1,2)
console.log(obj.toString());
注意: from ‘./profile.js’ 即使是在同一个文件夹中,也必须要写 ./
index.html文件:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/app.js" type="module"></script></head><body></body>
</html>
效果截图:
export default 命令
使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
// export-default.js
export default function () {console.log('foo');
}
上面代码是一个模块文件export-default.js,它的默认输出是一个函数。
// import-default.js
import customName from './export-default.js';
customName(); // 'foo'
上面代码的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。
注意:
1、一个js文件中,不能有两个export default命令。
2、import命令后面,不使用大括号。因为只能写一个模块名。
export default命令用在非匿名函数前,也是可以的:
// export-default.js
export default function foo() {console.log('foo');
}
// 或者写成
function foo() {console.log('foo');
}
export default foo;
上面代码中,foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。
看完如果对你有帮助,感谢点赞支持!
如果你是电脑端的话,看到右下角的 “一键三连” 了吗,没错点它[哈哈]
加油!
共同努力!
Keafmd
ES6中的模块化编程相关推荐
- Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
- JavaScript模块化编程知识分享!
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
- 前端模块化编程(import,export)
目录 基本介绍 CommonJS模块化 module.exports导出 require导入 ES6模块化 按需导入导出 导出方式 导入方式 默认导出 默认导出方式 默认导入的方式 注意事项 基本介绍 ...
- Node.js简介、安装Node.js、ES6中的模块
一.Node.js简介 1. Node是什么 1)浏览器内核有两个引擎:渲染引擎(渲染html.css).JavaScript引擎(运行JavaScript代码) 2)Node是独立于浏览器的Java ...
- 全面理解ES6模块化编程
今天我们来学习ES6的模块化系统,如何从模块中导出变量.函数.类,在其他模块中去使用. 在ES6的模块系统中,每个JS文件可以理解为一个模块,模块代码以严格模式执行,所以模块中的变量.函数不会添加全局 ...
- JavaScript进阶(十二)JS 模块化编程规范-CommonJS、AMD、CMD、ES6
文章目录 一.前言 二.AMD-异步模块定义 三.CMD-同步模块定义 四.CommonJS 规范 五.ES6 六.拓展阅读 一.前言 AMD.CMD.CommonJs是ES5中提供的模块化编程方案, ...
- 1~22(面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换)
1 面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
- javascript函数式_如何以及为什么在现代JavaScript中使用函数式编程
javascript函数式 by PALAKOLLU SRI MANIKANTA 通过PALAKOLLU SRI MANIKANTA In this article, you will get a d ...
- JavaScript 中的模块化
封面图说明:© Michael J. Kochniss | mjk-photo.de | instagram.com/mjk_photo 在早期,JavaScript 程序主要用来实现一些页面上的动画 ...
- javascript中的模块化
javascript中的模块化 文章目录 javascript中的模块化 ES6模块化 导出 转译工具 babel 预设 离线转译安装配置 1.初始化npm 2.设置镜像 3.安装 4.修改packa ...
最新文章
- 烂泥:学习ssh之ssh无密码登陆
- 火狐 4 月全球使用量首超微软
- linux fcntl 函数 文件描述符选项控制
- [代码笔记]VUE路由根据返回状态判断添加响应拦截器
- POJ2503 UVA10282 Babelfish
- C语言循环遍历文件夹查找文件内容(搜素/proc文件夹下的内容获取进程pid)
- django orm级联_Django数据表关联关系映射(一对一、一对多、多对多)
- Linux命令之hexdump
- Android manifest 获取源代码
- 如何批量压缩图片大小?
- CentOS7创建桌面快捷方式
- linux编辑vim指令,Linux系统文本编辑器vim指令大全
- 科技公司要干掉专业媒体?先迈过内容这道大坎
- 【NOIP2013提高组day1】货车运输
- 什么是 ASP.NET?
- 24点计算器问题[C++实现]
- 【米哈游】2022春季校园招聘
- 岛屿问题和昆虫越障问题以及岛屿最大面积
- [MSDN版本][32bit/64bit]Windows 2003 R2 With Sp2[中/英][标准/企业/数据中心]
- 欧拉旋转矩阵角速度雅克比