جاوا اسکریپت یک زبان برنامه نویسی قدرتمند است که می‌تواند تجربه کاربری وبسایت شما را به طور چشمگیری ارتقا دهد. در این مقاله، 15 تکنیک کاربردی و ضروری را معرفی می کنیم که با بهره‌گیری از آنها می‌توانید وبسایت پویاتر و جذاب تری داشته باشید.

این تکنیک ها هم برای برنامه نویسان مبتدی و هم حرفه ای مفید هستند و میتوانند به بهبود عملکرد و قابلیت استفاده وبسایت شما کمک کنند.

• 💥

  1. دسترسی آسان به عناصر با querySelectorAll و querySelector:

  به جای بهره‌گیری از getElementById، از querySelectorAll و querySelector برای انتخاب دقیق تر عناصر DOM استفاده کنید. querySelectorAll لیستی از تمام عناصر منطبق را برمی گرداند، در حالی که querySelector فقط اولین عنصر منطبق را برمی گرداند.
• 💥

  3. کار با رویدادها با addEventListener و removeEventListener:

  برای اتصال رویدادها به عناصر، از addEventListener استفاده کنید و برای حذف رویدادها از removeEventListener. این روش امکان مدیریت دقیق تر رویدادها و جلوگیری از مشکلات حافظه را فراهم می کند.
• 💥

  4. بهره‌گیری از توابع Arrow:

  توابع arrow (=>) syntax کوتاه تری را برای تعریف توابع فراهم می کنند و به طور خودکار this را از محدوده والد به ارث می برند. این امر باعث می شود کد شما خواناتر و قابل فهم تر شود.
• 💥

  5. بهره‌گیری از Template Literals:

  به جای اتصال رشته ها با +، از template literals () برای ایجاد رشته های چند خطی و درج متغیرها به راحتی استفاده کنید. این روش کد شما را خواناتر و آسان تر برای نگهداری می کند.
• 💥

  6. مدیریت خطا با try. . .catch:

  برای جلوگیری از توقف اجرای اسکریپت به دلیل خطا، از بلوک های try. . .catch برای مدیریت خطاها استفاده کنید. در بلوک try کدی که ممکن است خطا ایجاد کند را قرار دهید و در بلوک catch کد مربوط به مدیریت خطا را بنویسید.
• 💥

  7. بهره‌گیری از localStorage و sessionStorage:

  برای ذخیره داده ها در مرورگر کاربر، از localStorage (ذخیره سازی دائمی) و sessionStorage (ذخیره سازی موقت) استفاده کنید. این روش امکان ذخیره اطلاعات کاربری، تنظیمات و داده های دیگر را بدون نیاز به سرور فراهم می کند.
• 💥

  8. کار با Promises و async/await:

  برای مدیریت عملیات غیرهمزمان (مانند درخواست های AJAX)، از Promises و async/await استفاده کنید. این روش کد شما را خواناتر و آسان تر برای مدیریت می کند و از ایجاد callback hell جلوگیری می کند.
• 💥

  9. بهره‌گیری از forEach، map، filter و reduce برای کار با آرایه ها:

  این متدها روش های کارآمد و خوانا برای پیمایش، تبدیل و فیلتر کردن آرایه ها را فراهم می کنند. به جای بهره‌گیری از حلقه های for سنتی، از این متدها برای انجام عملیات مختلف روی آرایه ها استفاده کنید.
• 💥

  10. اعتبارسنجی فرم سمت کلاینت:

  با بهره‌گیری از جاوا اسکریپت، فرم های خود را در سمت کلاینت اعتبارسنجی کنید تا از ارسال داده های نادرست به سرور جلوگیری شود. این کار باعث کاهش بار سرور و بهبود تجربه کاربری می شود.
• 💥

  11. انیمیشن های ساده با requestAnimationFrame:

  برای ایجاد انیمیشن های روان و بهینه، از requestAnimationFrame استفاده کنید. این تابع به مرورگر اجازه می دهد تا انیمیشن را با نرخ تازه سازی صفحه همگام کند.
• 💥

  12. ایجاد یک اسکرول به بالا (Scroll to Top) :

  با بهره‌گیری از جاوا اسکریپت می‌توانید به راحتی یک دکمه ایجاد کنید که با کلیک بر روی آن صفحه به بالای صفحه اسکرول کند.
• 💥

  13. بهره‌گیری از Debouncing و Throttling:

  برای بهبود عملکرد و جلوگیری از اجرای بیش از حد توابع در پاسخ به رویدادهای مکرر (مانند اسکرول یا تغییر اندازه پنجره)، از تکنیک های Debouncing و Throttling استفاده کنید.
• 💥

  14. کار با Modules (ES Modules):

  برای سازماندهی بهتر کد و جلوگیری از آلودگی فضای نام سراسری، از ES Modules استفاده کنید. این روش به شما امکان می دهد کد خود را به فایل های کوچکتر و قابل استفاده مجدد تقسیم کنید.
• 💥

  15. بهره‌گیری از لایبرری ها و فریم ورک های جاوا اسکریپت :

  برای انجام کارهای پیچیده تر و سریعتر ، می‌توانید از کتابخانه ها و فریم ورک های جاوا اسکریپت مانند React, Angular, Vue.js, jQuery و . . . استفاده کنید.

این تکنیک ها تنها بخشی از امکاناتی هستند که جاوا اسکریپت در اختیار شما قرار می دهد. با یادگیری و بهره‌گیری از این تکنیک ها، می‌توانید وبسایت های پویاتر، تعاملی تر و کاربرپسندتری ایجاد کنید. همیشه به روز باشید و به دنبال یادگیری تکنیک های جدیدتر و بهینه تر باشید.

15 تکنیک کاربردی جاوا اسکریپت برای سایت شما

1. بهره‌گیری از Template Literals برای ساخت رشته‌ها

 const name = "John"; const age = 30; const message = Hello, my name is ${name} and I am ${age} years old. ; console.log(message); // Output: Hello, my name is John and I am 30 years old. 

Template Literals یا Template Strings روشی نوین برای ایجاد رشته‌ها در جاوا اسکریپت هستند که امکان قرار دادن متغیرها و عبارات را به طور مستقیم درون رشته فراهم می‌کنند. به جای بهره‌گیری از علامت + برای الحاق رشته‌ها، می‌توانید از علامت (Backtick) استفاده کنید و متغیرها را با بهره‌گیری از ${} درون رشته قرار دهید. این روش کد شما را خواناتر و نگهداری آن را آسان‌تر می‌کند. مثال: این قابلیت به ویژه در ساخت HTML پویا بسیار مفید است.

2. بهره‌گیری از Destructuring Assignment

 const numbers = [1, 2, 3]; const [first, second, third] = numbers; console.log(first, second, third); // Output: 1 2 3 

 const person = { name: "Alice", age: 25 }; const { name, age } = person; console.log(name, age); // Output: Alice 25 

Destructuring Assignment راهی سریع و کارآمد برای استخراج مقادیر از آرایه‌ها و اشیاء و انتساب آنها به متغیرها است. این تکنیک کد شما را کوتاه‌تر و خواناتر می‌کند و از تکرار کدهای اضافی جلوگیری می‌کند. مثال برای آرایه: مثال برای شی:

3. بهره‌گیری از Spread Operator (. . . )

 const numbers = [1, 2, 3]; const newNumbers = [. . .numbers]; console.log(newNumbers); // Output: [1, 2, 3] 

 const array1 = [1, 2]; const array2 = [3, 4]; const mergedArray = [. . .array1, . . .array2]; console.log(mergedArray); // Output: [1, 2, 3, 4] 

Spread Operator ابزاری قدرتمند برای گسترش آرایه‌ها و اشیاء است. این عملگر با سه نقطه (. . . ) نشان داده می‌شود. می‌توانید از آن برای کپی کردن آرایه‌ها، ادغام آرایه‌ها، ایجاد آرایه‌های جدید از آرایه‌های موجود و ارسال آرگومان‌ها به توابع استفاده کنید. مثال برای کپی کردن آرایه: مثال برای ادغام آرایه:

4. بهره‌گیری از Arrow Functions

 const add = (a, b) => a + b; console.log(add(5, 3)); // Output: 8 

Arrow Functions یک راه مختصرتر برای تعریف توابع در جاوا اسکریپت هستند. این توابع از علامت <= برای تعریف بدنه تابع استفاده می‌کنند. Arrow Functions به ویژه برای توابع کوتاه و inline مناسب هستند. مثال: اگر بدنه تابع فقط یک عبارت باشد، نیازی به بهره‌گیری از براکت {} نیست.

5. بهره‌گیری از Optional Chaining (?. )

 const user = { profile: { address: { city: "Tehran" } } }; const city = user?.profile?.address?.city; console.log(city); // Output: Tehran const street = user?.profile?.address?.street; console.log(street); // Output: undefined 

Optional Chaining یک عملگر ایمن برای دسترسی به ویژگی‌های تودرتوی یک شی است. اگر یک ویژگی در زنجیره وجود نداشته باشد، به جای پرتاب خطا، مقدار undefined برگردانده می‌شود. این تکنیک از بروز خطاهای ناخواسته در کد جلوگیری می‌کند. مثال:

6. بهره‌گیری از Nullish Coalescing Operator (??)

 const value = null; const defaultValue = 10; const result = value ?? defaultValue; console.log(result); // Output: 10

Nullish Coalescing Operator (??) یک عملگر منطقی است که اگر عملوند سمت چپ null یا undefined باشد، عملوند سمت راست را برمی‌گرداند. بر خلاف || که مقادیر falsy (مانند 0 و “”) را نیز بررسی می‌کند، ?? فقط null و undefined را در نظر می‌گیرد. این عملگر برای ارائه مقادیر پیش فرض در صورت عدم وجود مقدار معتبر بسیار مفید است. مثال: const emptyString = “”; const defaultString = “Default”; const stringResult = emptyString ?? defaultString; console.log(stringResult); // Output: “”

7. بهره‌گیری از async/await برای مدیریت Promises

 async function fetchData() { const response = await fetch("https://api.example.com/data"); const data = await response.json(); console.log(data); } fetchData(); 

async/await روشی مدرن و خواناتر برای مدیریت Promises در جاوا اسکریپت است. async تابعی را به یک تابع ناهمزمان تبدیل می‌کند و await منتظر می‌ماند تا یک Promise حل شود. این تکنیک کد شما را از نظر ساختاری شبیه به کد همزمان می‌کند و خواندن و درک آن را آسان‌تر می‌کند. مثال:

8. بهره‌گیری از Closures

 function outerFunction() { const outerVariable = "Hello"; function innerFunction() { console.log(outerVariable); } return innerFunction; } const myFunc = outerFunction(); myFunc(); // Output: Hello 

Closure یک تابع است که به متغیرهای موجود در محدوده لغوی خود دسترسی دارد، حتی پس از اجرای تابع بیرونی. Closures برای ایجاد توابع خصوصی، حفظ حالت و پیاده‌سازی الگوهای طراحی مختلف مفید هستند. مثال:

9. بهره‌گیری از Higher-Order Functions

 const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(number => number number); console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25] 

Higher-Order Functions توابعی هستند که یک یا چند تابع دیگر را به عنوان آرگومان دریافت می‌کنند یا یک تابع را به عنوان مقدار بازگشتی برمی‌گردانند. توابعی مانند map، filter و reduce نمونه‌هایی از Higher-Order Functions هستند. این توابع به شما امکان می‌دهند کدهای قابل استفاده مجدد و انعطاف پذیر بنویسید. مثال:

10. بهره‌گیری از Modules (ES Modules)

 // moduleA.js export const message = "Hello from module A!";

ES Modules یک سیستم استاندارد برای ماژول‌بندی کد در جاوا اسکریپت است. با بهره‌گیری از کلمات کلیدی import و export می‌توانید کد خود را به ماژول های جداگانه تقسیم کنید. مثال: // moduleB.js import { message } from “. /moduleA.js”; console.log(message); // Output: Hello from module A!

11. بهره‌گیری از Generators

 function numberGenerator() { yield 1; yield 2; yield 3; }

Generators توابعی هستند که میتوانند اجرای خود را متوقف و از سر بگیرند. آنها از کلمه کلیدی yield برای برگرداندن مقادیر استفاده می کنند و حالت خود را در طول اجرای مجدد حفظ می کنند. Generators برای پیاده سازی Iterator ها، مدیریت حالت های پیچیده و ایجاد کدهای ناهمزمان قابل خواندن بسیار مفید هستند. مثال: const generator = numberGenerator(); console.log(generator.next().value); // Output: 1 console.log(generator.next().value); // Output: 2 console.log(generator.next().value); // Output: 3

12. بهره‌گیری از Proxy

 const target = { name: "John Doe", age: 30 };

Proxy شی ای است که به شما امکان می دهد عملیات اصلی بر روی یک شی دیگر (هدف) را رهگیری و سفارشی سازی کنید. می‌توانید تله هایی را برای رهگیری عملیات مختلف مانند خواندن، نوشتن، حذف و غیره تعریف کنید. Proxy ها برای اعتبارسنجی داده ها، نظارت بر دسترسی به ویژگی ها، ردیابی تغییرات و پیاده سازی الگوهای طراحی پیشرفته مفید هستند. مثال: const handler = { get: function(target, prop) { console.log(Reading property ${prop}); return target[prop]; }, set: function(target, prop, value) { console.log(Setting property ${prop} to ${value}); target[prop] = value; return true; } }; const proxy = new Proxy(target, handler); console.log(proxy.name); // Output: Reading property name n John Doe proxy.age = 35; // Output: Setting property age to 35

13. بهره‌گیری از Web Workers

 // worker.js self.addEventListener(message, function(e) { const data = e.data; const result = data 2; self.postMessage(result); }); 

 const worker = new Worker(worker.js); worker.addEventListener(message, function(e) { console.log(Result from worker:, e.data); }); worker.postMessage(10); // Output: Result from worker: 20 

Web Workers به شما امکان می دهند اسکریپت های جاوا اسکریپت را در پس زمینه، به طور جداگانه از اسکریپت اصلی مرورگر اجرا کنید. این امر باعث جلوگیری از مسدود شدن نخ اصلی و بهبود عملکرد کلی برنامه می شود. Web Workers برای انجام محاسبات سنگین، پردازش داده ها و اجرای وظایف زمان بر بدون تاثیر بر رابط کاربری مفید هستند. مثال (worker.js): مثال (main.js):

14. بهره‌گیری از Intersection Observer API

 const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { console.log(Element is visible!); observer.unobserve(entry.target); // Optional: stop observing after first intersection } }); });

Intersection Observer API به شما امکان می دهد زمانی که یک عنصر وارد دید مرورگر می شود یا از آن خارج می شود، تشخیص دهید. این API برای پیاده سازی اسکرول بی نهایت، بارگذاری تنبل تصاویر و اجرای انیمیشن ها بر اساس دید کاربر بسیار مفید است. این API عملکرد بهتری نسبت به بهره‌گیری از رویداد اسکرول دارد. مثال: const element = document.querySelector(.my-element); observer.observe(element);

15. بهره‌گیری از Service Workers

 self.addEventListener(install, function(event) { event.waitUntil( caches.open(my-cache).then(function(cache) { return cache.addAll([ /, /index.html, /style.css, /script.js ]); }) ); });

 if (serviceWorker in navigator) { navigator.serviceWorker.register(/service-worker.js) .then(function(registration) { console.log(Service Worker registered with scope:, registration.scope); }) .catch(function(error) { console.log(Service Worker registration failed:, error); }); } 

Service Workers اسکریپت هایی هستند که در پس زمینه مرورگر اجرا می شوند و به عنوان یک پروکسی بین برنامه وب و شبکه عمل می کنند. آنها به شما امکان می دهند ویژگی هایی مانند ذخیره سازی آفلاین، push notification ها و بهبود عملکرد را پیاده سازی کنید. Service Workers برای ایجاد برنامه های وب پیشرفته (PWA) ضروری هستند. مثال (service-worker.js): self.addEventListener(fetch, function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); }); مثال (main.js – registering the service worker):