for (var i = 1; i <= 10; i++) {
function foo(x) {
setTimeout(() => {
console.log(x);
}, 0);
}
foo(i);
}function addGlobalEventListener(type, selector, callback, options) {
document.addEventListener(type, e => {
if (e.target.matches(selector)) callback(e)
}, options)
}
addGlobalEventListener("click", ".btn", () => {
console.log("Clicked Button")
}, { once: true })Nullish operator qattiqroq tekshiradi logical OR(||) operatorga qaraganda
const x = false;
const y = 0;
const z = '';
const a = x || 'default'; // 'default'
const b = y || 'default'; // 'default'
const c = z || 'default'; // 'default'
const d = x ?? 'default'; // false
const e = y ?? 'default'; // 0
const f = z ?? 'default'; // ''
Javascript dasturlash tilida bir nechta funksiya turlari bor.
1.Function declaration. Ushbu tur juda keng foydalaniladi. Function declarationda funksiya
Misol:
Bu turdagi funksiyani siz anonim tarzda yaratasiz va biror bir o'zgaruvchiga tenglashtirasiz.
Misol:
Misol:
Misol:
1.Function declaration. Ushbu tur juda keng foydalaniladi. Function declarationda funksiya
"function" kalit so'zi bilan boshlanadi va hohlagan nomingizni yozasiz.Misol:
function myFunction(param1, param2) {
// Function body
}
2. Function expression. Bu turdagi funksiyani siz anonim tarzda yaratasiz va biror bir o'zgaruvchiga tenglashtirasiz.
Misol:
const myFunction = function(param1, param2) {
// Function body
};
3. Arrow functionlar. Bu funksiya turi ES6 versiyada kirgizilgan, Bu funksiyalar doim anonimus bo'ladi.Misol:
const myFunction = (param1, param2) => {
// Function body
};
4. Konstrkuturli funksiyalar. Bu turdagi funksiyalar yangi funksiyali obyekt yaratish uchun ishlatiladiMisol:
const myFunction = new Function("param1", "param2", "return param1 + param2");Javascriptda first-class function nima?
First-class function biror bir o'zgaruvchiga tenglashtirilib, boshqa bir funksiya uchun argument sifatida ishlatilinishi mumkin
Misol:
First-class function biror bir o'zgaruvchiga tenglashtirilib, boshqa bir funksiya uchun argument sifatida ishlatilinishi mumkin
Misol:
function multiplyByTwo(num) {
return num * 2;
}
function mapArray(arr, fn) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(fn(arr[i]));
}
return result;
}
const numbers = [1, 2, 3, 4];
const doubledNumbers = mapArray(numbers, multiplyByTwo);
console.log(doubledNumbers); // [2, 4, 6, 8]
Bu misolda multiplyByTwo nomli funksiya yaratdik. Shungdek mapArray funksiyani argumentlari, array, va funksiya qabul qiladigan qilib yaratdik. Va natijada biz multiplyByTwo funksiyasini argument sifatida ishlatishimiz va callback qilib chaqirishimiz mumkin#vuejs #interview
Vue.js xususiyatlarini sanab bering?
Quyida javob: 👇
https://telegra.ph/Vuejs-xususiyatlarini-sanab-bering-05-12
Vue.js xususiyatlarini sanab bering?
Quyida javob: 👇
https://telegra.ph/Vuejs-xususiyatlarini-sanab-bering-05-12
Telegraph
Vue.js xususiyatlarini sanab bering?
1.Virtual DOM Vue.js-dagi Virtual DOM - bu foydalanuvchiga interfeysni ko'rsatish samaradorligi oshirish uchun foydalaniladigan usul. HTML DOM-ni to'g'ridan-to'g'ri manipulyatsiya qilish o'rniga (bu sekin va resurs talab qilishi mumkin), Vue.js JavaScript…
#vuejs
Bir qancha reflar yaratishni oldini ol!
reactive object orqali biz state data ni ixchamlashtirishimiz mumkin.
Quyidagi misollarni taqqoslang:
Bir qancha reflar yaratishni oldini ol!
reactive object orqali biz state data ni ixchamlashtirishimiz mumkin.
Quyidagi misollarni taqqoslang:
// Just a bunch a refs :/
const firstName = ref('Michael');
const lastName = ref('Thiessen');
const website = ref('michaelnthiessen.com');
const twitter = ref('@MichaelThiessen');
Endi shuni yagona reactive objectga o'tkazamiz.// A single object to think about
const michael = reactive({
firstName: 'Michael',
lastName: 'Thiessen',
website: 'michaelnthiessen.com',
twitter: '@MichaelThiessen',
});#js #interview
HTML DOM nima?
HTML DOM - bu HTML uchun standart obyekt modeli va dasturlash interfeysi. U belgilaydi o'zida:
HTML elementlarnii obyektlar sifatida
Barcha HTML elementlarining xossalari
Barcha HTML elementlariga kirish usullari
Barcha HTML elementlari uchun eventlar
Boshqacha qilib aytganda: HTML DOM HTML elementlarini olish, o'zgartirish, qo'shish yoki o'chirish uchun standartdir.
HTML DOM nima?
HTML DOM - bu HTML uchun standart obyekt modeli va dasturlash interfeysi. U belgilaydi o'zida:
HTML elementlarnii obyektlar sifatida
Barcha HTML elementlarining xossalari
Barcha HTML elementlariga kirish usullari
Barcha HTML elementlari uchun eventlar
Boshqacha qilib aytganda: HTML DOM HTML elementlarini olish, o'zgartirish, qo'shish yoki o'chirish uchun standartdir.
#js #interview
DOM Content Loaded hodisasi nima?
DOMContentLoaded hodisasi qachonki DOM kontenti yuklanganda ishga tushadi, rasm va stylesheetlarni yuklanishini kutib o'tirmaydi.
DOMContentLoaded hodisasini faqat, qachonki body qismidagi elementlarga havola qiluvchi JavaScript kodini head tegiga joylashtirganingizda ishlating!
Misol:
Bu yerda DOM Content Loaded hodisasini ishlatmaganimizda, button bilan ishlay olmasdik
DOM Content Loaded hodisasi nima?
DOMContentLoaded hodisasi qachonki DOM kontenti yuklanganda ishga tushadi, rasm va stylesheetlarni yuklanishini kutib o'tirmaydi.
DOMContentLoaded hodisasini faqat, qachonki body qismidagi elementlarga havola qiluvchi JavaScript kodini head tegiga joylashtirganingizda ishlating!
Misol:
<!DOCTYPE html>P.S
<html>
<head>
<title>JS DOMContentLoaded Event</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// handle the click event
console.log("clicked");
});
});
</script>
</head>
<body>
<button id="btn">Click Me!</button>
</body>
</html>
Bu yerda DOM Content Loaded hodisasini ishlatmaganimizda, button bilan ishlay olmasdik
#js #interview
Data attributelar nima❓
✅ Data attributelar orqali biz HTMLda data saqlashimiz mumkin.
Masalan:
@seniorDevBlog
Data attributelar nima❓
✅ Data attributelar orqali biz HTMLda data saqlashimiz mumkin.
Masalan:
<div
id="test-div"
data-first-name="Kyle"
data-last-name="Cook"
data-active
></div>
Uni quyidagicha o'qib olishimiz mumkinconst div = document.getElementById("test-div")
console.log(div.dataset)
{
active: ""
firstName: "Kyle"
lastName: "Cook"
}
Real misol sifatida esa quyidagi kodga e'tibor bering:<button data-modal-id="modal-1">Open Modal 1</button>
<button data-modal-id="modal-2">Open Modal 2</button>
<div id="modal-1">Modal 1</div>
<div id="modal-2">Modal 2</div>
const buttons = document.querySelectorAll("[data-modal-id]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const modalId = button.dataset.modalId
const modal = document.getElementById(modalId)
modal.classList.add("show")
})
})
Yuqorida biz 2 ta turli xil modalni ishga tushirish uchun data attributelardan foydalanib , yagona eventListener funksiya yozdik.@seniorDevBlog
👍2
#js #interview
Qanday qilib Javascript obyektlarga yangi propertylar qo'shishni taqiqlash mumkin❓
Qanday qilib Javascript obyektlarga yangi propertylar qo'shishni taqiqlash mumkin❓
✅ const myObj = { a: 1, b: 2 };
Object.defineProperty(myObj, 'a', { writable: false });
myObj.a = 3; // error: cannot assign to read only property 'a'
@seniorDevBlog#js #tips
Javascriptda "default exports" ishlatishni oldini olgan afzal
Bilganingizdek, JavaScriptda funksiyalarni almashishning ikki xil usuli mavjud: default exports va named exports. default exports moduldan bitta qiymatni eksport qilish uchun ishlatiladi, named exports esa moduldan bir nechta qiymatlarni eksport qilish imkonini beradi.
Funksiya yoki class kabi moduldan biror narsani eksport qilmoqchi bo'lsangiz, default exports asqotadi. Shuning bilan birga, named exports moduldan bir vaqtning o'zida bir nechta narsalarni eksport qilmoqchi bo'lganingizda juda mos keladi.
Ushbu maqolada nega default exportsdan foydalanish tavsiya etilmasligi va undan qochish kerakligini ko'rib chiqamiz.
👉 Maqola Havolasi
@seniorDevBlog
Javascriptda "default exports" ishlatishni oldini olgan afzal
Bilganingizdek, JavaScriptda funksiyalarni almashishning ikki xil usuli mavjud: default exports va named exports. default exports moduldan bitta qiymatni eksport qilish uchun ishlatiladi, named exports esa moduldan bir nechta qiymatlarni eksport qilish imkonini beradi.
Funksiya yoki class kabi moduldan biror narsani eksport qilmoqchi bo'lsangiz, default exports asqotadi. Shuning bilan birga, named exports moduldan bir vaqtning o'zida bir nechta narsalarni eksport qilmoqchi bo'lganingizda juda mos keladi.
Ushbu maqolada nega default exportsdan foydalanish tavsiya etilmasligi va undan qochish kerakligini ko'rib chiqamiz.
👉 Maqola Havolasi
@seniorDevBlog
Telegraph
JavaScriptda "default exports" ishlatishni oldini olgan afzal
Named exports Yuqoridagi misolda biz add nomli funksiyani add.ts faylidan turib eksport qildik.Quyida esa biz app.ts fayldan turib uni funksiya nomi orqali import qilib oldik. Default exports Endi keling yuqoridagi funksiyamizni default exports yordamida…
#css #tips
Nima uchun CSS qisqa xususiyatidan foydalanmasligingiz kerak?
Boshqa odamlarning kodida tez-tez e'tibor beriladigan kichik, ammo hayratlanarli darajada muhim masala - bu CSS xususiyat qisqartmasidan foydalanish.
Masalan:
@seniorDevBlog
Nima uchun CSS qisqa xususiyatidan foydalanmasligingiz kerak?
Boshqa odamlarning kodida tez-tez e'tibor beriladigan kichik, ammo hayratlanarli darajada muhim masala - bu CSS xususiyat qisqartmasidan foydalanish.
Masalan:
.btn {
background: red;
}
Biz tugmachamiz qizil fon rangiga ega bo'lishini xohlaymiz. Ammo, aslida, biz bir qator ortiqcha qoidalarni o'rnatamiz: .btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}
Bu ortiqcha narsalar ko'plab muammolarga sabab bo'lishi mumkin.@seniorDevBlog
#js #tips
Call stack va task queue
JavaScriptda asinxron dasturlash uchun zarur bo'lgan 2ta muhim tushuncha mavjud: Call stack va task queue. Bu ikkalasining qanday ishlashini bilish sizga samarali va xatosiz yaxshiroq kod yozishga yordam beradi. Ushbu maqolada shular haqida gaplashamiz
👉 Maqola Havolasi
@seniorDevBlog
Call stack va task queue
JavaScriptda asinxron dasturlash uchun zarur bo'lgan 2ta muhim tushuncha mavjud: Call stack va task queue. Bu ikkalasining qanday ishlashini bilish sizga samarali va xatosiz yaxshiroq kod yozishga yordam beradi. Ushbu maqolada shular haqida gaplashamiz
👉 Maqola Havolasi
@seniorDevBlog
Telegraph
Call stack vs task queue
JavaScriptda asinxron dasturlash uchun zarur bo'lgan ikkita muhim tushuncha mavjud: Call stack va task queue. Bu ikkalasining qanday ishlashini bilish sizga samarali va xatosiz kod yozishga yordam beradi. Call stack Call stack - bu dasturdagi funksiya chaqiruvlarini…
🏆2
#vue #tips
Vue js da watch va watchEffect , qaysi birini qachon ishlatish kerak?
Ushbu kichik maqola sizga ularni kengroq ajratib olishga yordam beradi
👉 Maqola Havolasi
@seniorDevBlog
Vue js da watch va watchEffect , qaysi birini qachon ishlatish kerak?
Ushbu kichik maqola sizga ularni kengroq ajratib olishga yordam beradi
👉 Maqola Havolasi
@seniorDevBlog
Telegraph
Vue js da watch va watchEffect , qaysi birini ishlatish kerak?
Demak, keling kichik eslatmadan boshlaymiz, Vueda biz reaktiv xususiyatning o'zgarib borishini kuzatmoqchi bo'lsak watchdan foydalanamiz. Bilasizmi, eng keng tarqalgan xato - bu computedni watch o'rniga muqobil sifatida ishlatish. Agar siz watch funksiyangizda…
#vue #js #tips
Vue 3 nega Proxy obyektlardan foydalanadi?
Ushbu maqola sizga Proxy imkoniyatlari haqida kengroq muhim ma'lumotlarni beradi.
👉 Maqola Havolasi
@seniorDevBlog
Vue 3 nega Proxy obyektlardan foydalanadi?
Ushbu maqola sizga Proxy imkoniyatlari haqida kengroq muhim ma'lumotlarni beradi.
👉 Maqola Havolasi
@seniorDevBlog
Telegraph
Javascript Proxy obyekti haqida
JavaScriptda Proxy boshqa(target) bir obyektni o'rab turuvchi va o'sha obyektning fundamental metodlarini kuzatib boruvchi maxsus obyektdir. Demak, yangi proxy obyekt yaratish uchun quyidagi usuldan foydalanamiz: let proxy = new Proxy(target, handler); Yuqoridagi…
👍3🏆1