Modern veb inkişafında iki vacib anlayış tez-tez qarşımıza çıxır: Shadow DOM və Virtual DOM. Bunlar fərqli məqsədlərə xidmət etsələr də, hər ikisi istifadəçi interfeyslərinin effektiv və strukturlaşdırılmış şəkildə yaradılması üçün istifadə olunur. Bu məqalədə bu iki anlayışı sadə dillə izah edəcəyik və aralarındakı fərqləri göstərəcəyik.
DOM nədir? (Qısa xatırlatma)
DOM (Document Object Model) – HTML sənədinin JavaScript ilə idarə olunan obyekt formasında təqdim olunmasıdır. DOM vasitəsilə biz səhifədəki elementləri oxuya və dəyişə bilirik.
Məsələn:
document.querySelector("h1").textContent = "Salam, dünya!";
Bu əmrlə h1 başlığının məzmununu dəyişirik.
1. Shadow DOM nədir?
Shadow DOM – DOM-un xüsusi bir hissəsidir ki, digər DOM elementlərindən izolyasiya olunmuşdur. Başqa sözlə, bu DOM strukturunda olan stil və ya funksiyalar əsas DOM-a təsir etməz və əsas DOM da ona təsir edə bilməz.
Harada istifadə olunur?
Shadow DOM əsasən Web Components texnologiyasının bir hissəsidir. Məsələn, siz öz my-button komponentinizi yaradırsınız və istəmirsiniz ki, başqa CSS qaydaları bu komponentin içini pozsun. O zaman Shadow DOM köməyə gəlir.
Nümunə:
<my-button></my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = `
<style>
button { background: red; color: white; }
</style>
<button>Click me</button>
`;
}
}
customElements.define("my-button", MyButton);
</script>
Üstünlükləri:
Stil və struktur tam izolyasiyalıdır.
Kapsullaşma (encapsulation) verir.
Yenidən istifadə edilə bilən komponentlər yaratmaq mümkün olur.
2. Virtual DOM nədir?
Virtual DOM – brauzerin real DOM-u ilə birbaşa işləmək əvəzinə, onun yaddaşda olan (virtual) surəti ilə işləmək metodudur. Bu texnika əsasən React, Vue kimi kitabxanalarda istifadə olunur.
Niyə lazımdır?
Real DOM ilə birbaşa işləmək çox yavaşdır, çünki hər dəyişiklik brauzerin render prosesini işə salır. Virtual DOM isə dəyişiklikləri əvvəlcə yaddaşda simulyasiya edir, sonra isə ən optimal formada real DOM-u yeniləyir.
Necə işləyir?
Komponentdə dəyişiklik olur.
Virtual DOM-da yeni vəziyyət yaranır.
Virtual DOM köhnə və yeni halı müqayisə edir (diffing).
Yalnız dəyişən hissələr real DOM-a tətbiq olunur (reconciliation).
Nümunə (React kontekstində):
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>Sayaç: {count}</p>
<button onClick={() => setCount(count + 1)}>Artır</button>
</div>
);
}
Bu halda React virtual DOM üzərində dəyişiklikləri hesablayır və yalnız p elementinin içini yeniləyir.
Shadow DOM vs Virtual DOM
Özəllik
Shadow DOM
Virtual DOM
Texnologiya
Web Components
React, Vue və b. UI kitabxanaları
Məqsəd
Stil və DOM kapsullaşması
Performansı artırmaq üçün DOM diffing
Brauzer dəstəyi
Native (birbaşa dəstəklənir)
Kitabxana səviyyəsində tətbiq olunur
Əlaqə
Real DOM-un bir hissəsidir
Real DOM-un surətidir (yaddaşda)
Qapsama
Bəli (izolyasiya olunmuşdur)
Xeyr (ümumi DOM strukturunu təqlid edir)
Hansı zaman hansından istifadə etməli?
Ssenari
Tövsiyə
Öz komponentinizi hazırlayırsınız və stil qarışıqlığının qarşısını almaq istəyirsiniz
Shadow DOM
İnteraktiv və tez dəyişən istifadəçi interfeysi qurursunuz
Virtual DOM (React, Vue və s.)
Bütün brauzerlərdə işləməli universal komponentlər istəyirsiniz
Shadow DOM-un dəstəyini yoxlayın və ya polyfill istifadə edin
Nəticə
Shadow DOM və Virtual DOM – hər ikisi veb inkişafında güclü texnologiyalardır. Shadow DOM daha çox komponent səviyyəsində təhlükəsizliyi və izolyasiyanı təmin edir. Virtual DOM isə performansı artıraraq böyük və interaktiv tətbiqlərin daha səmərəli işləməsinə şərait yaradır.
Əgər Web Components ilə maraqlanırsınızsa – Shadow DOM öyrənməyə dəyər. Əgər React və ya Vue istifadə edirsinizsə – artıq Virtual DOM ilə işləyirsiniz!
Node.js layihələri ilə işləyərkən ən önəmli fayllardan biri package.json faylıdır. Bu fayl layihə haqqında bütün əsas məlumatları, istifadə olunan asılılıqları (paketləri), skriptləri və digər konfiqurasiyaları ehtiva edir. Bir sözlə, layihənin idarəetmə mərkəzidir.
1. Əsas sahələr
name
Layihənin adıdır. Kiçik hərflərlə yazılmalı və boşluq əvəzinə - (kəsik xətt) istifadə edilməlidir.
"name": "my-first-app"
version
Layihənin versiyası. Bu versiya SemVer (Semantic Versioning) standartına əsaslanır: MAJOR.MINOR.PATCH (məs: 1.2.3)
"version": "1.0.0"
description
Layihənin qısa izahı.
"description": "Node.js ilə hazırlanmış API tətbiqi"
main
Node.js tərəfindən layihənin əsas giriş faylı kimi istifadə edilən yol.
"main": "index.js"
scripts
Terminalda npm run əmri ilə işlədilə bilən skriptlər. Layihənin işə düşməsi, test olunması və s. bu sahədə qeyd olunur.
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js",
"test": "jest"
}
keywords
Layihənin axtarışda tapılması üçün açar sözlər siyahısıdır.
"keywords": ["nodejs", "api", "express"]
author və contributors
Layihəni hazırlayan və ya ona töhfə verən şəxslərin siyahısı.
"author": "Elvin Huseynov",
"contributors": [
{
"name": "Aygün Məmmədova",
"email": "aygun@example.com"
}
]
license
Layihənin hüquqi istifadəsini müəyyən edən lisenziya tipi (məs: MIT, ISC, GPL-3.0 və s.)
"license": "MIT"
2. Asılılıqlar (Dependencies)
Node.js layihələrində istifadə etdiyimiz kitabxanalar 3 əsas qrupa bölünür:
dependencies
Layihənin işləməsi üçün zəruri olan əsas paketlər.
"dependencies": {
"express": "^4.18.2",
"mongoose": "~6.12.1"
}
devDependencies
Yalnız inkişaf zamanı lazım olan paketlər – məsələn, test alətləri, linters, bundlers və s.
"devDependencies": {
"jest": "^29.7.0",
"nodemon": "^3.0.1"
}
peerDependencies
Bu sahədəki paketlər layihəyə daxil edilmir. Əsasən plugin və ya kitabxananın müəyyən versiya ilə işləməsini tələb edir.
"peerDependencies": {
"react": ">=17.0.0"
}
optionalDependencies
Quraşdırılsa yaxşı olar, amma olmadan da işləyən paketlər. Quraşdırılarkən səhv olarsa, proses dayanmaz.
"optionalDependencies": {
"fsevents": "^2.3.2"
}
3. Versiya simvollarının mənası
Versiya nömrələrinin əvvəlində olan bəzi simvollar var ki, onlar versiyanın necə seçildiyini göstərir:
Simvol
Mənası
^
Eyni əsas versiya daxilində olan ən son versiyanı qəbul et (default)
~
Eyni minor versiya daxilində ən son patch versiyanı qəbul et
*
Hər hansı versiyanı qəbul et
>=
Göstərilən versiyadan daha yuxarı olan versiyaları qəbul et
<, <=
Müvafiq olaraq daha kiçik və ya kiçik bərabər versiyaları göstər
1.2.x
1.2.0 – 1.2.99 aralığında olan versiyalar
Nümunə:
"lodash": "^4.17.0"
Bu halda, 4.17.0-dan başlayaraq 4.x.x aralığında olan ən son versiya quraşdırıla bilər, lakin 5.x.x yox.
4. Digər faydalı sahələr
engines
Layihənin işləməsi üçün lazım olan Node.js və npm versiyasını göstərir.
"engines": {
"node": ">=16.0.0",
"npm": ">=8.0.0"
}
type
Modul sistemini təyin edir: "module" (ESM) və ya "commonjs".
"type": "module"
files
Layihə npm publish ilə paylaşılarkən daxil ediləcək faylları göstərir.
"files": ["dist/", "index.js"]
private
Layihənin səhvən npm publish ilə yayımlanmasının qarşısını alır.
"private": true
5. Tam package.json nümunəsi
{
"name": "codex-api",
"version": "1.0.0",
"description": "CodeX üçün REST API backend tətbiqi",
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"test": "jest"
},
"keywords": ["nodejs", "api", "backend"],
"author": "Elvin Huseynov",
"license": "MIT",
"dependencies": {
"express": "^4.18.2",
"mongoose": "~6.12.1"
},
"devDependencies": {
"jest": "^29.7.0",
"nodemon": "^3.0.1"
},
"engines": {
"node": ">=16.0.0"
},
"private": true
}
Nəticə
package.json – yalnız texniki fayl deyil, sizin layihənizin struktur kitabçasıdır. Onu düzgün qurmaq, həm layihənin idarə olunmasını asanlaşdırır, həm də digərlərinin onu rahat şəkildə başa düşməsini təmin edir. Versiya simvollarının mənasını anlamaq isə asılılıqların stabil və təhlükəsiz olmasında mühüm rol oynayır.
Singleton pattern – proqramlaşdırmada geniş istifadə olunan bir dizayn nümunəsidir. Bu nümunənin əsas məqsədi — bir class-ın yalnız bir nüsxəsinin (instance) yaradılmasını təmin etmək və bu nüsxəyə qlobal səviyyədə çıxış imkanının olmasıdır.
Bu pattern, proqram boyu paylaşılan resursların — məsələn, konfiqurasiya məlumatları, verilənlər bazası bağlantısı və s. — mərkəzləşdirilmiş şəkildə idarə olunması üçün çox yararlıdır.
Məsələn: Singleton class-ın yaradılması
class Singleton {
constructor() {
if (!Singleton.instance) {
Singleton.instance = this;
}
return Singleton.instance;
}
someMethod() {
console.log("Singleton method called");
}
}
Qeyd:
Singleton.instance: Bu statik dəyişən artıq yaradılmış nüsxəni yadda saxlamaq üçün istifadə olunur.
constructor(): Classın yaradılmasında Singleton.instance yoxlanılır. Əgər belə bir instansiya yoxdursa, this (yeni instansiya) dəyişənə təyin olunur və o qaytarılır.
someMethod(): Class daxilində sadə bir metoddur, misal üçün konsola mesaj çıxarır.
🧪 İstifadə
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true
instance1.someMethod(); // "Singleton method called"
Hər iki dəyişən eyni instansiyaya işarə edir.
İstifadə zamanı artıq mövcud olan nüsxə qaytarılır və yenidən yaradılmır.
Nəticə
Singleton Pattern aşağıdakı hallarda faydalıdır:
Bir obyektin sistem boyu bir dəfə yaradılması lazımdırsa
Mərkəzləşdirilmiş idarəetmə (məsələn, Logger, Configuration, Database bağlantısı)
Resursların düzgün istifadəsi və davranışın sabitliyini təmin etmək
Java-da məlumatları modelləşdirmək üçün iki əsas yanaşma var: POJO və Record. Hər ikisi obyektin sahələrini (field) təyin edir, lakin istifadəsi və sintaksisi fərqlidir.
POJO nədir?
POJO — “Plain Old Java Object” ifadəsinin qısaltmasıdır. Bu, heç bir xüsusi kitabxana və ya Java EE xüsusiyyətindən asılı olmayan, sadə Java obyektidir.
Əsas xüsusiyyətlər:
Sahələr (fields)
Getter və setter metodları
Constructor (konstruktor)
toString(), equals(), hashCode() metodlarının override edilməsi (lazım olduqda)
Misal:
public class Person {
private String name;
private int age;
public Person(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() { return name; }
public int getAge() { return age; }
public void setName(String name) { this.name = name; }
public void setAge(int age) { this.age = age; }
@Override
public String toString() {
return name + " is " + age + " years old";
}
}
🧾 Record nədir?
Record — Java 14 ilə tanıdılmış və Java 16-da stabil olmuş yeni xüsusiyyətdir. O, POJO-ların qısa və daha səmərəli variantıdır. Record-lar immutable (dəyişməz) obyektlər yaratmaq üçün nəzərdə tutulub.
Əsas xüsusiyyətlər:
Final sahələr (dəyişdirilə bilməz)
Avtomatik olaraq toString(), equals(), hashCode() metodları yaradılır
Getter-lər avtomatik olaraq ad ilə yaradılır (name(), age() və s.)
Setter yoxdur (dəyəri dəyişmək olmur)
Misal:
public record Person(String name, int age) { }
Bu bir sətrə bərabər POJO-nu əvəz edə bilər və avtomatik olaraq aşağıdakıları təmin edir:
Constructor
name() və age() metodları
toString(), equals(), hashCode() metodları
POJO vs Record
Xüsusiyyət
POJO
Record
Mutability
Dəyişilə bilən (mutable)
Dəyişməz (immutable)
Kod miqdarı
Uzun
Qısa və yığcam
Getter və Setter
Manual yazılır
Getter-lər avtomatik, setter yoxdur
Java versiyası
Java 1.0 və sonrası
Java 14+ (eksperimental), 16+ (stabil)
Tətbiq sahəsi
Mürəkkəb modellər, ORM, vs.
Sadə məlumat daşıyıcıları (DTO)
Nəticə
POJO daha çox konfiqurasiya və çeviklik tələb edən hallarda istifadə olunur.
Record isə daha çox dəyişməz və sadə məlumat modelləri üçün idealdır.
Əgər məqsədiniz sadəcə məlumatı daşımaqdır və onu dəyişmək ehtiyacınız yoxdursa, Record istifadəsi tövsiyə olunur. Əlavə olaraq Record Java proqramlarında DTO (Data Transfer Object) kimi geniş istifadə edilir, xüsusilə REST API-lərdə request və response modellərində çox faydalıdır.
-
-
-
-
Maşın öyrənməsi və Süni intellekt
Maşın öyrənməsi və intellektual verilənlərin analizi və Suni intelekt ilə bağlı paylaşımlar
1 1 -
-
-
-
0
Onlayn7
İstifadəçilər65
Mövzu76
YazıBilik paylaşdıqca artan bir sərvətdir