ECMAScript模块化和CommonJS模块化的区别是什么

这期内容当中小编将会给大家带来有关ECMAScript模块化和CommonJS模块化的区别,以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联专注于科尔沁左翼网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供科尔沁左翼营销型网站建设,科尔沁左翼网站制作、科尔沁左翼网页设计、科尔沁左翼网站官网定制、微信小程序定制开发服务,打造科尔沁左翼网络公司原创品牌,更为您提供科尔沁左翼网站排名全网营销落地服务。

CommonJS 模块化

采用CommonJS模块规范的应用,每个文件就是一个模块,具有自己的私有作用域,不会污染全局作用域。模块的加载是同步的而且可以加载多次,但在第一次加载后就会被缓存,后面再次被加载时会直接从缓存中读取。CommonJS主要用于服务器Node.js编程。

一、 require  与 module.exports

require 在 ES6(bable将import转化为require) 和 CommonJS 中都支持

// 导出 a.js

let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

module.exports = obj

// 引入 b.js

let obj = require('./a.js')

ES6 模块化

在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。

ES6模块化具有以下特点:

使用依赖 预声明的方式导入模块

依赖延迟声明 (CommonJS CMD)

优点:某些时候可以提高效率

缺点: 无法在一开始确定模块依赖关系

依赖预声明:(AMD,ES6)

优点:一开始可以确定模块依赖关系

缺点:某些时候效率低

灵活的多种导入导出方式

闺房的路径表示法: 所有路径必须以 ./ 或 ../ 开头

import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口。

一、 import  与 export

// 导出 a.js

/** 写法一 **/
var name = 'sheep'
function getSheep() {
    name = 'hourse'
}
export {getSheep}

// 引入 b.js
import {getSheep} from './a.js'


/** 写法二 **/
var name = 'sheep'
export function getSheep() {
    name = 'hourse'
}

// 引入 b.js

import {getSheep} from './a.js'

二、 import  与 export defalut

export 可以有多个,export default 仅有一个

// 导出 a.js
let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

export default obj

// 引入 b.js

import obj from './a.js'

总结

  • 即使我们使用了 ES6 的模块系统,如果借助 Babel 的转换,ES6 的模块系统最终还是会转换成 CommonJS 的规范。

  • Babel5 中使用 require 时,引入值是 module.export 返回的值或者是 export default 返回的值。

  • Babel6中,使用 import 引入时,可以直接获取到 export default 的值 ; 但是如果是 require 导入的组件, 无论导出是 module.export 、export 、 export default可以直接获取到 export default 的值都必须要加上一个 default。

上述就是小编为大家分享的ECMAScript模块化和CommonJS模块化的区别,如果您也有类似的疑惑,不妨参照上述方法进行尝试。如果想了解更多相关内容,请关注创新互联行业资讯。


当前名称:ECMAScript模块化和CommonJS模块化的区别是什么
本文链接:http://bzwzjz.com/article/jeisjj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆电商网站建设 成都网站建设公司 网站制作报价 成都网站制作 网站建设推广 达州网站设计 高端网站设计 网站建设方案 响应式网站设计 定制网站设计 成都网站建设 网站制作 成都网站制作 成都网站设计 成都响应式网站建设 宜宾网站设计 成都网站制作 网站建设 企业手机网站建设 高端网站设计 重庆网站建设 高端网站建设