ES6模块与commonJS模块的差异

栏目: JavaScript · 发布时间: 5年前

内容简介:参考:前端模块化ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。 其模块功能主要由两个命令构成:使用

参考:前端模块化

ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。 其模块功能主要由两个命令构成: exportimportexport 命令用于规定模块的对外接口, import 命令用于输入其他模块提供的功能。

使用 import 命令的时候,用户需要知道 所要加载的变量名或函数名

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};

// export命令用于规定模块的对外接口
export { basicNum, add };


/** 引用模块 **/

// import命令用于输入其他模块提供的功能
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

复制代码

其实ES6还提供了 export default 命令,为模块指定默认输出,对应的 import 语句不需要使用大括号。这也更趋近于ADM的引用写法。

/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

复制代码

ES6的模块不是对象, import 命令会被 JavaScript 引擎静态分析,在编译时就引入模块代码,而不是在代码运行时加载,所以无法实现条件加载。也正因为这个,使得静态分析成为可能。

ES6 模块与commonJS模块的差异

1. commonJS 模块输出的是一个值的拷贝,ES6模块输出的是值的引用

  • commonJS模块一旦输出一个值,模块内部的变化就影响不到这个值。
  • ES6模块如果使用 import 从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,原始值变了, import 加载的值也会跟着变。需要开发者自己保证,真正取值的时候能够取到值。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Big Java Late Objects

Big Java Late Objects

Horstmann, Cay S. / 2012-2 / 896.00元

The introductory programming course is difficult. Many students fail to succeed or have trouble in the course because they don't understand the material and do not practice programming sufficiently. ......一起来看看 《Big Java Late Objects》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具