es6与commonjs 的区别

这篇具有很好参考价值的文章主要介绍了es6与commonjs 的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 区别:

1、CommonJS输出的是一个值的拷贝,ES6输出的是值的引用;
2、CommonJS是运行时加载,ES6是编译时输出接口;
3、CommonJS的require是同步加载模块,ES6的import是异步加载,有独立模块依赖的解析阶段。

1.1CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用

commonjs的用法,我们一起来看一下

1.首先创建一个lib.js的文件

// lib.js

const counter = 3;

const incCounter = ()=>{

  counter++

}

module.exports = {

  counter,

  incCounter

}

2.再次创建一个main.js,使用commonjs的方式导入

// main.js

var lib = require('./lib');

console.log(lib)

console.log(lib.counter);  // 3

lib.incCounter();

console.log(lib.counter); // 3

lib.js模块加载以后,它的内部变化就影响不到输出的lib.counter了。这是因为mod.counter是一个原始类型的值,会被缓存;

esmodule的用法,我们一起来看一下

// lib.js

export let counter = 3;

export function incCounter () {

  counter++;

}
// main.js

import { counter, incCounter } from './util.mjs'

console.log(counter);  //3 

incCounter()

console.log(counter)  //4

ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。

补充:通过esmodule导入的变量是不能重新赋值修改的。

1.2、CommonJS 模块是运行时加载,ES6 模块是编译时输出接口

// 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 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。因此commonjs属于再运行时才会加载模块的方式。

import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高;

1.3、CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段

同步加载:所谓同步加载就是加载资源或者模块的过程会阻塞后续代码的执行;

异步加载:不会阻塞后续代码的执行;

我们来看一个案例,创建如下的目录;

| -- a.js

| -- index.js

| -- c.js
// a.js

console.log('a.js文件的执行');

const importFun = () => {

  console.log(require('./c').c);

}

importFun()

module.exports = {

  importFun

}
// index.js

const A = require('./a');

console.log('index.js的执行');
// c.js

console.log('c.js的运行');

const c = 3

module.exports = {

  c

}

执行命令 node index.js

// a.js文件的执行

// c.js的运行

// 3

// index.js的执行

我们会发现,require的内容会阻塞后续代码的执行。因为c.js先打印出来,然后在是index.js的打印,所以说require()是同步加载的;

// a.js

console.log('a.js文件的执行');

export const importFun = () => {

  import('./c.js').then(({c})=>{

    console.log(c)

  })

}

importFun()
// index.js

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

console.log('index.js的执行');
// c.js

console.log('c.js的运行');

export const c = 3
// 结果

// a.js文件的执行

// index.js的执行

// c.js的运行

// 3

可以看的出来:import()是异步加载资源的,因为c.js是在index.js的后面打印出来的,并不会阻塞后续代码的执行;

2.总结:

以上便是commonjs和esmodule的几个区别

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

2: CommonJS 模块是运行时加载,ES6 模块是编译时输出接口

3: CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段文章来源地址https://www.toymoban.com/news/detail-446886.html

到了这里,关于es6与commonjs 的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试:【前端工程化】CommonJS 与 ES6 模块

    嗨,亲爱的前端开发者!在现代Web开发中,模块化是构建可维护和可扩展应用程序的关键。本文将深入探讨两种主要的JavaScript模块系统:CommonJS 和 ES6 模块,以帮助你了解它们的工作原理、用法以及如何选择合适的模块系统。 1. CommonJS: 用途: CommonJS 是一种模块系统,最初

    2024年02月11日
    浏览(55)
  • CommonJS 和 ES6 Module:一场模块规范的对决(上)

    🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入

    2024年01月23日
    浏览(41)
  • Commonjs 和 Es Module详解

    今天我们来深度分析一下 Commonjs 和 Es Module ,希望通过本文的学习,能够让大家彻底明白 Commonjs 和 Es Module 原理,能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。 带上疑问开始今天的分析: 1 Commonjs 和 Es Module 有什么区别 ? 2 Commonjs 如何解决的循环引用问

    2024年02月22日
    浏览(38)
  • CommonJs规范和ES 模块系统

    CommonJS 是一种模块化规范,用于在 JavaScript 应用程序中组织和管理代码的模块。它定义了模块的导入和导出机制,使得开发者可以将代码分割成可复用的模块,并在不同的文件中引用和使用这些模块。 CommonJS 规范有以下几个主要 特点 和 用途 : 模块化组织代码 :CommonJS 允许

    2024年02月12日
    浏览(40)
  • 了解一下ES module 和 Commonjs

    最近测试了几个 ES module 和 Commonjs 的例子,理解了之前不太理解的概念,记录一下。要是想多了解的可以去看看阮老师的 Module 那部分。会贴一小部分的代码,不会贴所有验证的代码。 Commonjs require 大概流程 本质上 Commonjs 一直是 node 在使用的规范,虽然其他平台也可以使用。

    2024年02月12日
    浏览(31)
  • 深入理解CommonJS和ES Module? 优缺点?什么时候用?

    在webpack中,我们可以使用多种模块化方式,如CommonJS和ES Module。 CommonJS是什么? CommonJS是一种模块化规范,它是Node.js采用的模块化规范,它的主要特点是同步加载模块,模块输出的是一个值的拷贝,而不是引用。CommonJS的优点是简单易用,可以在服务器端和客户端使用,缺点

    2024年02月03日
    浏览(42)
  • import后加不加{}的区别(es6引用)

    目录 背景: 1.不加{} 2.加{} 总结: ES6使用import引入定义模块时加不加花括号: export及export default的区别: 背景: 当需要在main.js中引入A.js 1.不加{} 这种引入方法,A.js文件中需要提供默认的 export defulat导出 ( 必须是默认导出 ), 这样在main.js文件中才可以使用A 2.加{} 这种引

    2024年02月04日
    浏览(38)
  • 【前端模块化】JS模块化思想以及相关规范(CommonJS、ES module)

    1.模块化概念 随着前端应用日趋复杂,项目代码也大量膨胀,模块化就是一种最主流的代码组织方式, 一个模块就是一个实现特定功能的文件 ,它通过把我们的复杂代码按照功能的不同,划分为不同的模块单独维护的这种方式,去提高我们的开发效率,降低维护成本。要用

    2024年02月01日
    浏览(63)
  • commonjs

    CommonJs 是 js 模块化的社区规范 随着前端页面复杂度的提升,依赖的第三方库的增加,导致的 js 依赖混乱,全局变量的污染,和命名冲突 单个 js 文件内容太多,导致了维护困难,拆分成为多个文件又会发生第一点描述的问题 v8 引擎的出现,让 js 有了媲美编译型语言的运行速

    2024年04月17日
    浏览(27)
  • 前端技术探秘-Nodejs的CommonJS规范实现原理

    Node.js是一个基于ChromeV8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node中增添了很多内置的模块,提供各种各样的功能,同时也提供许多第三

    2024年02月05日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包