Analisis ringkas tentang apa itu Modul CommonJs dan Es? Apa bezanya?

Apakah itu Modul CommonJs dan Es? Apa bezanya? Artikel berikut akan bercakap dengan anda tentang apa itu Modul CommonJs dan Es dan perbezaannya, saya harap ia akan membantu anda!

Mengapa terdapat Modul CommonJs dan Es?

Kita semua tahu bahawa pada zaman awal, konsep modul ialah Perkenalkan kod fail JavaScript melalui tag script. Sudah tentu, tidak ada salahnya menulis keperluan mudah asas, tetapi apabila projek kami menjadi lebih besar dan lebih besar, lebih banyak js fail yang kami perkenalkan, masalah berikut akan berlaku: js

Skop js semua fail adalah peringkat atas, yang akan menyebabkan pencemaran berubah
• Terdapat terlalu banyak fail js, menjadikannya sukar untuk diselenggara
• isu pergantungan fail JS, jika anda tidak memberi perhatian kepada pesanan, ralat akan diperkenalkan, dan semua kod akan melaporkan ralat

Untuk menyelesaikan masalah di atas, komuniti

menghasilkan JavaScript ialah spesifikasi modular, termasuk CommonJs semasa yang turut menggunakan sebahagian daripada sintaks CommonJs . Kemudian versi NodeJs secara rasmi menambah modul CommonJs Kedua-duanya menyelesaikan masalah di atas, jadi apakah masalah yang mereka selesaikan? Es6Es Module

Selesaikan masalah pencemaran berubah, setiap fail adalah skop bebas, jadi tiada pencemaran berubah

• Selesaikan masalah penyelenggaraan kod, kod dalam satu fail sangat jelas
• Selesaikan masalah pergantungan fail Anda boleh melihat dengan jelas fail lain yang bergantung pada fail

Kemudian mari kita pelajari tentang sintaks dan kelemahannya satu demi satu

Sintaks asas CommonJs

Eksport

Gunakan

untuk mengeksport pembolehubah dan functions , anda juga boleh mengeksport sebarang jenis nilai, lihat kes berikut. CommonJsmodule.exports

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

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

Eksport terus

Anda juga boleh meninggalkan kata kunci

untuk eksport, atau tulis eksport terus untuk eksport. Lihat kes berikut.

module

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

Nota: Jika anda menggunakan eksport untuk mengeksport satu nilai, anda tidak boleh mengeksport nilai objek Ini hanya akan mengubah suai perubahan objek eksport eksport masih nama dan jantina , kerana eksport akhir ditentukan oleh modul.eksport.

Dalam contoh di atas, situasi ini akan mengubah nilai rujukan objek dan eksport akan menjadi tidak sah, jadi eksport akhir masih

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

,

. namesex

Eksport campuran

Eksport campuran,

dan

boleh digunakan pada masa yang sama tanpa sebarang masalah. exportsmodule.exports

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

import

menggunakan sintaks

boleh diimport. Jika anda mahukan satu nilai, anda boleh gunakan objek pemusnah untuk mendapatkan. CommonJsrequire

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

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

Import berulang

Tidak kira

atau

, ia tidak akan diimport berulang kali, iaitu, selagi fail telah dimuatkan sekali, Jika saya mengimportnya semula, ia tidak akan berkesan. CommonJsEs Module

let data = require("./index.js")
let data = require("./index.js") // 不会在执行了

Import dinamik

menyokong import dinamik Apakah maksudnya Anda boleh menggunakan sintaks

dalam pernyataan lihat kes berikut. CommonJsrequire

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

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

Perubahan dalam nilai yang diimport

Nilai yang diimport disalin, jadi nilai yang disalin boleh diubah suai, tetapi ini akan menyebabkan pencemaran berubah-ubah Berhati-hati dengan nama yang sama.

CommonJs

Dalam contoh di atas, anda dapat melihat bahawa nilai eksport

// 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

ialah salinan nilai

tidak berubah selepas menukarnya, dan kami juga boleh mengubah suai nilai exports yang diimport numnum

Ringkasan

menyelesaikan masalah pencemaran berubah-ubah, pergantungan fail, dll. Kami juga memperkenalkan sintaks asasnya di atas, ia boleh Import Dinamik (kod berlaku pada masa jalan) dan tidak boleh diimport berulang kali.

CommonJs

Sintaks asas Modul Es

EksportEksport dalam

dibahagikan kepada dua Terdapat dua pilihan: eksport tunggal (

) dan eksport lalai (Es Module eksport tunggal tidak mengimport semua nilai secara langsung seperti export apabila mengimport nilai I mahu. Kemudian eksport lalai adalah untuk mengimport semuanya secara langsung Sudah tentu, sebarang jenis nilai juga boleh dieksport dalam export default. CommonJsEs ModuleEs Module

Eksport campuran

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

// 导出函数也可以
export function fn() {}
export const test = () => {}


// 如果有多个的话
const name = "蛙人"
const sex = "male"
export { name, sex }

Anda boleh menggunakan dan

pada masa yang sama tanpa menjejaskan satu sama lain Anda hanya perlu memberi perhatian semasa mengimport . Jika dalam fail Jika anda mempunyai import bercampur, anda mesti mengimport eksport lalai dahulu, dan kemudian mengimport nilai import tunggal.

exportexport default

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

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

Import

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

作者：蛙人

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Analisis ringkas tentang apa itu Modul CommonJs dan Es? Apa bezanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!