热搜：前端 vuedraggable 插件 vue

什么叫CommonJs和Es Module?有何不同?

lxf2023-03-12 19:51:01

什么叫CommonJs和Es Module？有何不同？下边本文来给大家聊一聊什么叫CommonJs和Es Module及他们的差别，希望能帮助到大家！

什么叫CommonJs和Es Module?有何不同?

为什么有CommonJs和Es Module呢

众所周知在初期JavaScript控制模块这一概念，也是通过script标识引进js文档编码。当然这个写基本上简易要求没有任何问题，但当我们新项目愈来愈巨大时，大家引入的js文档也就越多，这时候就容易出现以下问题：

  • js文档修饰符全是高层，这时候导致自变量环境污染
  • js文档多，越来越不太好维护保养
  • js文档依靠难题，一不注意次序引进错，编码全出错

为解决这些问题JavaScript小区出现CommonJs，CommonJs是一种模块化的标准，包含现今NodeJs里边也采用了一部分CommonJs词法在房间里。那在之后Es6版本号正式加入了Es Module控制模块，这几种全是处理上边难题，那样全是提供什么服务问题。

  • 处理自变量环境污染问题，每一个文档全是单独的修饰符，所以不用担心自变量环境污染
  • 处理代码维护难题，一个文档里编码很清晰
  • 处理文档依靠难题，一个文档中可以清楚的看到依靠了这些其他文档

那我们下面就来一一掌握它们词法及缺点吧

CommonJs 基本语法

导出来

CommonJs中应用module.exports导出来自变量及函数公式，还可以导出来随意种类数值，看如下所示实例。

// 导出来一个对象
module.exports = {
    name: "蛙人",
    age: 24,
    sex: "male"
}

// 导出来随意值
module.exports.name = "蛙人"
module.exports.sex = null
module.exports.age = undefined

立即导出来

导出来还可以省去module关键词，立即写exports导出来还可以，看如下所示实例。

exports.name = "蛙人"
exports.sex = "male"

留意：如果采用exports导出来单独值以后，就不可以在导出来一个对象值，这只能改动exports的对象更改，但是改动失效，最后导出来或是name，和sex，由于最后的导出来是通过module.exports决定的。

exports.name = "蛙人"
exports.sex = "male"
exports = {
    name: "蛙人"
}

上边example中，这样的事情可以改变对象的引用值则导出来失效，所以最终导出来还是name，sex。

混和导出来

混和导出来，exports和module.exports能够一起使用，不会出现难题。

exports.name = "蛙人"
module.exports.age = 24

导进

CommonJs中应用require词法能够导进，如果你想要单独数值，能通过结构目标来获得。

// index.js
module.exports.name = "蛙人"
module.exports.age = 24

let data = require("./index.js")
console.log(data) // { name: "蛙人", age: 24 }

反复导进

不论是CommonJs或是Es Module也不会反复导进，便是只需该文件内载入过一次这一文档了，我再一次导进一次一般不会实施的。

let data = require("./index.js")
let data = require("./index.js") // 不能在实施了

动态性导进

CommonJs适用动态性导进，是什么意思呢，就是能够在话语中，应用require词法，来说如下所示实例。

let lists = ["./index.js", "./config.js"]
lists.forEach((url) => require(url)) // 动态性导进

if (lists.length) {
    require(lists[0]) // 动态性导进
}

导进系数的转变

CommonJs导进数值是复制的，因此可以改动复制值，但这时候造成自变量环境污染，一不小心就同名。

// index.js
let num = 0;
module.exports = {
    num,
    add() {
          num 
    }
}

let { num, add } = require("./index.js")
console.log(num) // 0
add()
console.log(num) // 0
num = 10

上边example中，能够看见exports导出来数值是系数的复制，变更完 num值并没有产生变化，而且导进的num数值大家还可以进行改动

汇总

CommonJs克服了自变量环境污染，文档依靠等诸多问题，上边大家也阐述了它基本语法，它能够动态性导进(编码出现于运行中)，不能反复导进。

Es Module 基本语法

导出来

在Es Module中导出来分两种，单独导出来(export)、默认设置导出来(export default)，单独导出来在导进时不像CommonJs一样直接将值所有导进进来，Es Module中能够导进自己想要的值。那样默认设置导出来便是所有直接插入进去，自然Es Module之中能够导出来随意种类数值。

// 导出来自变量
export const name = "蛙人"
export const age = 24

// 导出来函数公式还可以
export function fn() {}
export const test = () => {}


// 假如有好几个得话
const name = "蛙人"
const sex = "male"
export { name, sex }

混和导出来

可以用export和export default一起使用而且互相不危害，只需在导进时地区留意，假如文档里有混和导进，则需主导入默认设置导出来的，在导进单独导进数值。

export const name = "蛙人"
export const age = 24

export default {
    fn() {}，
    msg: "hello 蛙人"
}

导进

Es Module采用的是import词法开展导进。如果想单独导进则必须采用花括号{} ，留意：这儿的花括号跟结构不一样。

// index,js
export const name = "蛙人"
export const age = 24

import { name, age } from './index.js'
console.log(name, age) // "蛙人" 24

// 假如里面都是单独导出来，大家就要所有直接插入则可这么写
import * as all from './index.js'
console.log(all) // {name: "蛙人", age: 24}

混和导进

混和导进，则该文件内使用混和导进，import句子务必起先默认设置导出来，后边接着是单独导出来，次序一定要恰当不然出错。

// index,js
export const name = "蛙人"
export const age = 24
export default {
    msg: "蛙人"
}

import msg, { name, age } from './index.js'
console.log(msg) // { msg: "蛙人" }

上边example中，假如导进的名字不愿跟本来地名字一样，则可起别称。

// index,js
export const name = "蛙人"
export const age = 24
export default {
    msg: "蛙人"
}

import { default as all,  name, age } from './index.js'
console.log(all) // { msg: "蛙人" }

导进系数的转变

export导出来数值是系数的引入，而且内部有映射关系，这也是export关键词的功效。并且导进数值，不可以进行调整其实就是写保护情况。

// index.js
export let num = 0;
export function add() {
       num
}

import { num, add } from "./index.js"
console.log(num) // 0
add()
console.log(num) // 1
num = 10 // 抛出去不正确

Es Module是静态数据

便是Es Module句子``import只有申明在该文件最顶端，不可以动态加载句子，Es Module`句子运行在代码编译时。

if (true) {
import xxx from 'XXX' // 出错
}

汇总

Es Module都是克服了自变量环境污染问题，依靠次序难题，Es Module词法都是更加高效，导出来值都是导出来的引入，导出来变量是可读状态，这增强了代码可读性。

CommonJs和Es Module的差别

CommonJs

  • CommonJs能够动态加载句子，编码出现于运行中
  • CommonJs混和导出来，还是一种词法，只不过是无需申明前边目标罢了，在我导出来引用对象时以前的导出来便被覆盖
  • CommonJs导出来值是复制，能够改动导出来数值，这一点在编码出差错时，不太好清查造成自变量环境污染

Es Module

  • Es Module是静态的，不能动态加载句子，只有申明在该文件最顶端，编码出现于编译时

  • Es Module混和导出来，单独导出来，默认设置导出来，彻底互相不危害

  • Es Module导出来是引入值以前都存在着映射关系，而且值全是可读的，不可以改动

感激

感谢各位百忙之中抽空打开本文，希望对大家能有一定的帮助，如有问题热烈欢迎各位大佬纠正。

我就是蛙人，如果你觉得写的如果可以的话，请点个赞吧。

全文详细地址：https://juejin.cn/post/6938581764432461854

创作者：蛙人

大量程序编写基本知识，请访问：编程视频！！

以上就是关于浅谈什么叫CommonJs和Es Module？有何不同？的具体内容，大量欢迎关注AdminJS其他类似文章！

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题