commonjs 与 es6相关Module语法的区别
1、export 在接口名字与模块内部的变量之间建立了一一对应的关系,export输出的接口,与其模块内对应的变量值是动态绑定的,即通过暴露的接口可以取到模块内与之对应绑定变量的实时的值。
commonjs的规范完全不同,commonjs输出的是值的缓存,不存在动态的更新。
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export
的写法,除了像上面这样,还有另外一种。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958; export { firstName, lastName, year };
export
命令除了输出变量,还可以输出函数或类(class)。
export function multiply(x, y) {
return x * y;
};
2、CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。
/ CommonJS模块
let { stat, exists, readFile } = require('fs'); // 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
上面代码的实质是整体加载fs
模块(即加载fs
的所有方法),生成一个对象(_fs
),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。
// ES6模块
import { stat, exists, readFile } from 'fs';
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入。上面代码的实质是从fs
模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。
tips:import
语句会执行所加载的模块,因此可以有下面的写法。
import 'lodash';
上面代码仅仅执行lodash
模块,但是不输入任何值。
3、import
和export
命令只能在模块的顶层,不能在代码块之中(比如,在if
代码块之中,或在函数之中)。这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。在语法上,条件加载就不可能实现。如果import
命令要取代 Node 的require
方法,这就形成了一个障碍。因为require
是运行时加载模块,import
命令无法取代require
的动态加载功能。
const path = './' + fileName;
const myModual = require(path);
上面的语句就是动态加载,require
到底加载哪一个模块,只有运行时才知道。import
命令做不到这一点。
4、引入import()
函数,完成动态加载。
import
命令能够接受什么参数,import()
函数就能接受什么参数,两者区别主要是后者为动态加载。
import()
返回一个 Promise 对象。
import()
函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
import()
类似于 Node 的require
方法,区别主要是前者是异步加载,后者是同步加载。
下面是import()
的一些适用场合。
1、按需加载
import()
可以在需要的时候,再加载某个模块。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
2、条件加载
import()
可以放在if
代码块,根据不同的情况,加载不同的模块。
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
import()
加载模块成功以后,这个模块会作为一个对象,当作then
方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
commonjs 与 es6相关Module语法的区别的更多相关文章
- ES6和CommonJS的区别 以及 export和module.exports的区别
ES6和CommonJS的区别 Javascript javascript是一种脚本编程语言,有自己独立的语法与语义,没有javascript,也就没有其他的那些概念了. ES6 JavaScript ...
- CommonJS与ES6 Module的使用与区别
CommonJS与ES6 Module的使用与区别 1. CommonJS 1.1 导出 1.2 导入 2. ES6 Module 2.1 导出 2.2 导入 3. CommonJS 与 ES6 Mo ...
- 深入 CommonJs 与 ES6 Module
目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'obj ...
- 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...
- CommonJS 规范中的 module、module.exports 区别
CommonJS 规范中的 module.module.exports 区别 CommonJS规范规定,每个模块内部,module变量代表当前模块.这个变量是一个对象,它的exports属性(即mod ...
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- ES6的Module系统
http://es6.ruanyifeng.com/#docs/module Module 的语法 概述 严格模式 export 命令 import 命令 模块的整体加载 export default ...
- NodeJS模块和ES6模块系统语法及注意点
社区模块规范: 1.CommonJS规范 规范实现者: NodeJS 服务端 Browserify 浏览器 2.AMD规范 全称 异步模块定义 规范实现者: RequireJS 浏览器 3.CMD规范 ...
- amd、cmd、CommonJS以及ES6模块化
AMD.CMD.CommonJs.ES6的对比 他们都是用于在模块化定义中使用的,AMD.CMD.CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的 什么 ...
随机推荐
- 第10组 Beta冲刺(1/5)
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...
- Netty执行流程分析与重要组件介绍
一.环境搭建 创建工程,引入Netty依赖 二.基于Netty的请求响应Demo 1.TestHttpServerHandle 处理器.读取客户端发送过来的请求,并且向客户端返回hello worl ...
- ElementUi tree 指定节点是否显示复选框
场景:树的内容是省份下面的城市有酒店 需求:只能多选酒店(为了删除它们),至于为啥不能选省份或者城市更加灵活的去删除相应酒店,这你得去问后台0.0,他只弄了根据酒店id去删除.嗯,连创建酒店的时候级联 ...
- jsp页面获取后台传过来的list集合的长度
在jsp页面导入函数标签库: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"% ...
- SpringBoot过滤XSS脚本攻击
XSS攻击是什么 XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安 ...
- 从安装PHP到第一个tomcat执行的hello world其实没那么难
001 初入门的朋友问我为什么她的PHP老是不能安装运行成功,作为一个乐(shi)于(li)助(liao)人(mei)的半程序员, 自然是要好好研究然后手把手教妹纸了! 002 话不多说,进入正题 为 ...
- Wordpress 获取 custom post type 的当前文章 分类信息
// knowledgebase_category 为 custom post type taxonomy $terms = get_the_terms( get_the_ID() , 'knowle ...
- 使用nodejs+http(s)+events+cheerio+iconv-lite爬取2717网站图片数据到本地文件夹
源代码如下: //(node:9240) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' ...
- ubuntu 18.04屏幕共享 -------(转载) ( Windows远程登录Ubuntu )
原文地址: https://my.oschina.net/michaelshu/blog/3018932 ----------------------------------------------- ...
- [LeetCode] 66. Plus One 加一
Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...