JavaScript modullari: CommonJS va ES modules farqi

Assalamu alaykum bugun Javascriptdagi modullar haqida gaplashamiz. 1-bo'lib module nima ? va ular qaysilar degan savollarga javob olishimiz kerak . Keyin esa ular nima uchun foydaliligini bir necha misollar bilan ko'rib chiqamiz.

Agenda

Modullar nima va ular nimaga foydali ?
Turli xil modullar
CommonJS
ES modul
Misollar
require qanday ishlaydi ?

Modul nima va ular nimaga foydali ?

Modul— bir faylda foydalana olinadigan ammo o'zi boshqa faylda bo'lgan kod qismi.

Modul proektning hamma kodlari bir faylda joylashib qolmasligini oldini olib va fayllarga bo'lishga yordam beradi .

Katta proektlarda modullarga bo'lishning foydalari

Katta proektlarda kodlar ham juda kop' bo'ladi va ularni bir biridan ajratib olish juda muhim hisoblanadi.Bu holatda featurelarni har xil fayllarga bo'lish visual tomondam va kodni boshqarishga yordam beradi .Kodni support qilish ancha oson bo'ladi va kutilmagan xatolar kelib chiqishini oldini oladi .Va modullar proektning boshqa qismida osongina ishlatilishi mumkin va bu qayta qayta bir narsa yozishni oldini oladi.

Modulga bo'lishdan asosiy maqsad kodni qismlarga bo'lib har bir faylni har xil featurelarga bog'lab qo'yish .(Divide and Conquer)

Javascriptdagi modullar

Javascript o'zi shunchaki websitelarda uchun ishlab chiqarilgani uchun unda boshida modullarga bo'lish xususiyati bo'lmagan ammo uni keng qo'llanilishi natijasida bu keyinchalik qo'shilgan .Biz ulardan 2 ta eng mashhuri CommonJS va ES modules ko'rib chiqamiz.

CommonJS moduli

CommonJs bu Javascriptdagi modul implimentatsiya qilish standartlar to'plami bo'lib 2009 yil Mozilla dasturchisi tomonidan boshlangan. Commonjs asosan server tomonda ya’ni Nodejsda ishlatilinadi browserlar uni support qilmaydi.

Nodejs oldin modul ishlatish uchun faqatgina CommonJS ni support qilgan ammo ESM mahshurlashgani sababli uni ham support qilishni boshlagan.

Endi CommonJSni misollarda ko'ramiz modul1.js :

const justFunction = () => console.log('Modul 1')
module.exports = justFunction

module.exports kalit so'zi orqali fayldan export qilmoqchi bo'lgan qismlarni (funksiya o'zgaruvchi) kiritamiz.

require orqali boshqa fayldagi o'zgaruvchiga biriktiramiz. Bu holda bir necha narsani birdaniga ham export qilishimiz mumkin.

//main.js
const justFunction = require('./modul1.js')

const testFunction = () => {
    console.log('Im the main function')
    justFunction()
}

testFunction()

bir nechta export qilish :

const func1= () => console.log('Mod1 is alive!')
const func2= () => console.log('Mod1 is rolling, baby!')

module.exports = { func1, func2}

import qilish :

{ func1, func2} = require('./mod1.js'))

const testFunction = () => {
    console.log('Im the main function')
    func1()
    func2()
}

testFunction()

Modullar biri faylda boshqasida ishlatilishi uchun export qilingan bo'lishi zarur .

ES Modul

ES Modul bu ES6 bilan birgalikda tanishtirilgan browserda modullarni qanday implimentatsiya qilish standratlaridan iborat.

Nodejsda ES modulini ishlatish uchun package.jsonga type: “module”qo'shamiz.

Endi tepadagi misollarni ESda qayta ko'rib chiqamiz:

// mod1.js
const modul1func= () => console.log('modul1funcis alive!')
export { modul1func}

// main.js
import { modul1func} from './mod1.js'

const testFunction = () => {
    console.log('Im the main function')
    modul1func()
}

testFunction()

require o'rniga import , module.export o'rniga esa export ishlatamiz. Bu modulda da bir vaqta bir necha narsa export qilishimiz mumkin.

//mod1.js
const func1= () => console.log('Mod1 is alive!')
const func2= () => console.log('Mod1 is rolling, baby!')

export = { func1, func2}

//main.js
import { func1, func2} from './mod1.js'

const testFunction = () => {
    console.log('Im the main function')
    func1()
    func2()
}

testFunction()

Esda biz importlarni qayta nomlashimiz yoki bitta obyektga olishimiz mumkin .

// main.js
//import * as hello from from './mod1.js' bir obyektga olish
import { func1 as function1, func2 as function2 } from './mod1.js'

const testFunction = () => {
    console.log('Im the main function')
    function1()
    function2()
}

testFunction()

va default export ham qilishimiz mumkin (yani exportning o'zida boshlang'ich nom bilan).

// mod1.js
const mod1Function = () => console.log('Mod1 is alive!')
const mod1Function2 = () => console.log('Mod1 is rolling, baby!')

export default mod1Function
export { mod1Function2 }

default exportni destracture qilishimiz shart emas va osongina boshqa nom berishimiz mumkin .

// main.js
// import hello, { mod1Function2 } from './mod1.js' qayta nomlash
import mod1Function, { mod1Function2 } from './mod1.js' 

const testFunction = () => {
    console.log('Im the main function')
    mod1Function()
    mod1Function2()
}

testFunction()

Endi biroz require haqida gaplashamiz.

Require qanday ishlaydi ?

Nodejs modul yuklash mexanizmi cachelash bilan ishlaydi ya’ni birinchi marta require chaqirilganda ushbu modul cachelanadi.Bu degani siz bir necha marta require(“bar”) deb yozsangiz ham bir xil instanceni olasiz .Bu modulga butun dastur bo'ylab bir xil stateda bo'lishiga yordam beradi.

require orqali native yani Nodejsning o'zining modullarini fayl ko'rsatmalari bilan fayldagi modullar hamda yuklab olingan modullarni import qilish mumkin .Agarda requirega beriligna identifikator native module bo'lmasa yoki fayl ko'rsatmasi bo'lsa nodejs avval yuklangan (node\modules) modullardan so'ng ichki fayllardan qidiradi .U modul (import qilinayotgan fayl ) turgan papkadan boshlaydi va topa olmasa bir po'g'ona tepaga chiqib yana qidirishni davom ettiradi .U bu ishni modulni topgancha yoki dasturning bosh qismiga yetkancha davom ettiradi .Va topolmasa xatolik chiqaradi.

Require under the hood — 'module.js'

Nodejsda modul yuklanishi bilan shug’ullanuvchi modul module.js deb ataladi va uni Node.js omboridagi lib/module.js da topish mumkin.

Bu yerdagi eng muhim funksiyalardan load va _configure bilan biroz tanishamiz.

_load— funksiyasi modul cacheda bor yoki yo'qligini tekshiradi agarda topilsa export obyektini qaytaradi . Agar modul native module bo'lsa NativeModule.require orqali file nomini chaqiradi va natijani qaytaradi . Aks holda fayl uchun yangi modul yaratadi va uni cachega saqlab keyin file kontentini yuklab qaytaradi compile— funksiyasi fayl kontentini to'g'ri scopeda ishga tushuradi va yordamchi o'zgaruvchilar ya’ni module.export exportlarni ishlatish uchun tashqariga ochib qo'yadi

module wrapper funksiyasini tushunish

Nodejs modulni ishga tushirishdan oldin , har bir modulni wrapper funksiya bilan o'rab oladi . Quyida misol bilan ko'rishingiz mumkin :

(function(exports, require, module, __filename, __dirname) {
    // Module code
});

Masalan math.js moduli ishga tushurilishidan oldin quyidagi ko'rinishda bo'ladi :

(function (exports, require, module, __filename, __dirname) {
   function add(a, b) {
    return a + b;
  }
  function subtract(a, b) {
    return a - b;
  }

  module.exports.add = add;
  module.exports.subtract = subtract;
})

Bu orqali Nodejs quyidagi maqsadlarga erishadi :

(var, let, va const) o'zgaruvchilarni modul scopeda saqlab globlal obyektdan saqlab qolish .
Faqatgina modulga aloqador o'zgaruvchilarni yaratish masalan module va exports.

exports obyekti module.exports ga reference qiladi :

console.log(module.exports === exports); // true

Dynamic va Static import

Bu ikki modul faqat syntaksis tomondan farq qilmaydi .Ular export va importlar har xil ishlashi bilan ham farq qiladi .

CommonJS importlari dinamik ravishda qabul qilinadi yani runtimeda hamma narsa ishlashga tayyor bo'lganda va'require()'funksiyasi xuddi vaqtda ishlaydi. Natijada, biz kodni hamma joyda chaqirishimiz mumkin.

ES Modulida importlar static va ular parse time vaqtida aniqlanadi .Ular hostingga o'xshab ishlaydi yani javascript tomonidan faylni tepasiga chiqariladi va shuning uchun importni kodni o'rtasida ishlatolmaymiz.Buning foydali tomoni biz xatoni oldinroq ko'ramiz va to'g'ri kod yozishga yordam beradi.

Ko'proq ma'lumot uchun NodeJS documentation ko'rib chiqishingizni so'rayman

Module resoultion haqida alohida maqola bo'ladi bu yerda tushunchalar berildi xolos.

Bugun Javascript(Nodejsda) modullarni ko'rib chiqdik va ularni farqlarini va modul yaratishni o'rgandik.

E’tiboringiz uchun rahmat!!

Xuddi shunday maqolalarni yana o'qish uchun obuna bo'lib qo'ying.