مقدمه
من هنوز اولین باری را که خط جاوا اسکریپت نوشتم را به یاد می آورم که در واقع کار می کرد. این یک قطعه ساده بود که هنگام کلیک روی یک دکمه تغییر رنگ ایجاد کرد ، اما احساس می کردم نوعی جادوگری دیجیتال را باز کرده ام. آن لحظه سفر من به توسعه وب را برانگیخت و در حالی که من از آن زمان با چارچوب های بی شماری کار کرده ام ، من همچنان به قدرت خام جاوا اسکریپت باز می گردم.
در چشم انداز امروز از چارچوب ها و کتابخانه های براق ، می توان مستقیماً به واکنش ، VUE یا آخرین طعم JavaScript ماه پرداخت کرد. من خودم مقصر بوده ام! اما با گذشت سالها از اشکال زدایی و پروژه های ساختمانی ، من چیز مهمی را درک کردم: توسعه دهندگان که استاد وانیل JS ابتدا به سادگی کاربردهای بهتری را ایجاد می کنند ، صرف نظر از اینکه در نهایت چه چارچوبی را اتخاذ می کنند.
بیایید به این دلیل بپردازیم که چرا وانیل جاوا اسکریپت سزاوار توجه شما است ، چگونه می توان یک پروژه را از ابتدا تنظیم کرد و برخی از ترفندهای هوشمندانه که باعث می شود از سادگی ظریف JavaScript در خالص ترین شکل آن قدردانی کنید.
قدرت کم ارزش جاوا اسکریپت
وقتی به “وانیل جاوا اسکریپت” اشاره کردم ، من به JavaScript ساده و بدون هیچ گونه کتابخانه یا چارچوب اضافی اشاره می کنم. فقط شما و زبانی که بیش از 97 ٪ از وب سایت های اینترنت را قدرت می دهید.
در اینجا به همین دلیل با وجود بیش از 25 سالگی فوق العاده قدرتمند است:
1. پشتیبانی مرورگر جهانی
هر مرورگر مدرن با موتور JavaScript ساخته شده است. بدون نصب ، بدون مشکل سازگاری ، کابوس وابستگی. هنگامی که وانیل JS را می نویسید ، در حال نوشتن کد هستید که در همه جا کار می کند بدون سربار اضافی.
2. مزایای عملکرد
من یک بار پروژه ای را به ارث بردم که JQuery را فقط برای جابجایی چند کلاس و رسیدگی به دستکاری اساسی DOM بارگیری کند. کل کتابخانه (فشرده شده) 87 کیلوبایت پوند به بار صفحه اضافه شد ، در حالی که محلول معادل وانیل JS کمتر از 1 کیلوبایت بود. چارچوب ها راحتی را اضافه می کنند اما اغلب به هزینه عملکرد ، و کاربران متوجه وب سایت های آهسته می شوند!
3. کنترل کامل
با وانیل JS ، هیچ “جادویی” در پشت صحنه اتفاق نمی افتد. هر عملیاتی صریحاً توسط شما تعریف شده است ، به این معنی که شما دقیقاً می دانید که در کد شما چه اتفاقی می افتد. این کنترل هنگام اشکال زدایی موضوعات پیچیده بسیار ارزشمند می شود.
4. مهارت های ضد آینده
چارچوب ها می آیند و می روند (به یاد داشته باشید Angularjs؟) ، اما مفاهیم اصلی JavaScript باقی مانده است. زمانی که من در درک اصول JavaScript سرمایه گذاری کردم ، سود سهام را در هر چارچوبی که از آن زمان آموخته ام پرداخت کرده است.
چرا هر توسعه دهنده ابتدا باید وانیل JS را یاد بگیرد
من چندین توسعه دهنده جوان را راهنمایی کرده ام که مستقیماً بدون یادگیری اصول اولیه جاوا اسکریپت ، مستقیماً به React یا Angular پریدند. به ناچار ، آنها به موانع جاده ای رسیدند که اساساً مشکلات جاوا اسکریپت بودند ، نه مشکلات چارچوب.
در اینجا به همین دلیل است که تسلط بر وانیل JS باید اولویت اول شما باشد:
1. چارچوب ها انتزاعی هستند ، نه جایگزینی
React ، Angular ، Vue – همه آنها در JavaScript نوشته شده اند. هنگامی که از یک چارچوب بدون درک وانیل JS استفاده می کنید ، در حال ساختن بنیادی هستید که کاملاً آن را نمی فهمید. من دیده ام که توسعه دهندگان ساعت ها با موضوعاتی که با دانش بهتر JS آشکار خواهد بود ، می جنگند.
ترتیب مهارت های اشکال زدایی بهتر
هنگامی که چیزی در یک چارچوب شکسته می شود (و چیزی همیشه می شکند!) ، اشکال زدایی اغلب برای یافتن مسئله اصلی نیاز به لایه برداری لایه های انتزاع دارد. با دانش جامد وانیلی JS ، می توانید به سرعت تشخیص دهید که آیا مشکل در کد شما ، چارچوب یا جای دیگر است.
3. برنامه های کوچکتر و سریعتر
هر پروژه به یک چارچوب سنگین وزن احتیاج ندارد. برخی از موفق ترین پروژه های من به هیچ وجه از چارچوب های حداقل یا بدون استفاده استفاده می کنند. درک وانیل JS به شما امکان می دهد در مورد زمان استفاده از چارچوب ها و چه زمانی وانیل تصمیم گیری آگاهانه بگیرید.
4. انعطاف پذیری چارچوب
هنگامی که وانیل JS را عمیقاً درک کردید ، چیدن چارچوب های جدید به طور قابل توجهی آسان تر می شود. من در یک هفته از Angular به واکنش نشان دادم زیرا مفاهیم اساسی جاوا اسکریپت یکسان باقی مانده اند – فقط نحو و الگوهای تغییر یافته است.
منطق اصلی جاوا اسکریپت
JavaScript ویژگی های منحصر به فردی دارد که آن را قدرتمند و گاه ناامید کننده می کند. درک این مفاهیم اصلی به شما در ساختن یک مدل ذهنی قوی کمک می کند:
1. برنامه نویسی رویداد محور
JavaScript در وب اساساً رویداد محور است. به جای اجرای خطی از بالا به پایین ، بخش اعظم کد شما در پاسخ به رویدادهایی مانند کلیک ، ارسال فرم یا بارگیری داده ها اجرا می شود. این ماهیت واکنشی برای نحوه عملکرد جاوا اسکریپت در مرورگرها مهم است.
2. اعدام ناهمزمان
یکی از قدرتمندترین (و در ابتدا گیج کننده) جنبه های جاوا اسکریپت ، ماهیت ناهمزمان آن است. توابع مانند setTimeout، وعده ها ، و async/await اجازه اجرای کد غیر مسدود کننده را بدهید. من هفته ها واقعاً درک این مفهوم را صرف کردم ، اما این مسئله را تغییر داد که چگونه به مشکلات نزدیک می شوم.
3. وراثت مبتنی بر نمونه اولیه
بر خلاف زبانهای مبتنی بر کلاس مانند جاوا یا C#، JavaScript از میراث اولیه استفاده می کند. اشیاء مستقیماً از اشیاء دیگر به ارث می برند. این رویکرد انعطاف پذیر تر است اما اگر از پارادایم های برنامه نویسی دیگر آمده اید ، نیاز به تغییر ذهنی دارد.
4. API DOM
مدل Object Document (DOM) رابط بین JavaScript و HTML/CSS است که صفحه وب شما را تشکیل می دهد. درک چگونگی انتخاب ، اصلاح و ایجاد عناصر DOM برای توسعه وب بسیار مهم است.
راه اندازی یک پروژه وانیلی JS: بازگشت به آموزش اصول اولیه
بیایید با استفاده از هیچ چیز جز جاوا اسکریپت وانیل ، یک پروژه ساده ایجاد کنیم. من شما را از طریق فرآیند تنظیم معمولی خود طی می کنم:
مرحله 1: ساختار پروژه خود را ایجاد کنید
vanilla-js-project/
├── index.html
├── css/
│ └── style.css
└── js/
└── main.js
مرحله 2: پرونده HTML خود را تنظیم کنید
یک سند اساسی HTML5 ایجاد کنید که JavaScript و CSS شما را بارگیری کند:
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="todo-app">
Task List
"js/main.js">
مرحله 3: برخی از CSS اساسی را اضافه کنید
/* css/style.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
}
.todo-app {
background: #f5f5f5;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
form {
display: flex;
margin-bottom: 20px;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
}
button {
padding: 10px 15px;
background: #4caf50;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
ul {
list-style: none;
}
li {
padding: 10px;
background: white;
margin-bottom: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
}
li button {
background: #f44336;
border-radius: 4px;
}
.completed {
text-decoration: line-through;
color: #888;
}
مرحله 4: منطق JavaScript خود را بنویسید
// js/main.js
document.addEventListener('DOMContentLoaded', () => {
// Get DOM elements
const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
// Load tasks from localStorage
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// Render initial tasks
renderTasks();
// Add task event
taskForm.addEventListener('submit', (e) => {
e.preventDefault();
const taskText = taskInput.value.trim();
if (taskText === '') return;
// Create new task object
const task = {
id: Date.now(),
text: taskText,
completed: false
};
// Add to tasks array
tasks.push(task);
// Save to localStorage
saveTasksToStorage();
// Render tasks
renderTasks();
// Clear input
taskInput.value = '';
taskInput.focus();
});
// Event delegation for task list (click for complete or delete)
taskList.addEventListener('click', (e) => {
// If delete button clicked
if (e.target.classList.contains('delete-btn')) {
const taskId = parseInt(e.target.parentElement.getAttribute('data-id'));
tasks = tasks.filter(task => task.id !== taskId);
saveTasksToStorage();
renderTasks();
}
// If task item clicked (toggle completion)
else if (e.target.tagName === 'SPAN') {
const taskId = parseInt(e.target.parentElement.getAttribute('data-id'));
tasks = tasks.map(task => {
if (task.id === taskId) {
return { ...task, completed: !task.completed };
}
return task;
});
saveTasksToStorage();
renderTasks();
}
});
// Save tasks to localStorage
function saveTasksToStorage() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Render tasks to DOM
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.setAttribute('data-id', task.id);
const span = document.createElement('span');
span.textContent = task.text;
if (task.completed) {
span.classList.add('completed');
}
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.classList.add('delete-btn');
li.appendChild(span);
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
});
این یک برنامه کاربردی TODO با امکان اضافه کردن وظایف ایجاد می کند ، آنها را به صورت کامل علامت گذاری می کند ، آنها را حذف می کند و آنها را به LocalStorage ادامه می دهد – همه بدون یک کتابخانه یا چارچوب واحد!
وانیل JS هک می کند تا دوستان خود را تحت تأثیر قرار دهد
در اینجا برخی از تکنیک های مورد علاقه من وانیل JS که قدرت آن را نشان می دهد:
1. با استفاده از الگوی الگو برای ارائه HTML
به جای دستکاری دامنه پیچیده ، می توانید از الگوی الگوی برای ارائه HTML پاک کننده استفاده کنید:
function renderTasks() {
taskList.innerHTML = tasks.map(task => `
${ task.id}">
${task.completed ? 'completed' : ''}">${task.text}
`).join('');
}
این رویکرد به طرز چشمگیری شبیه JSX در React است ، اما JavaScript خالص است!
2. نمایندگی رویداد برای عناصر پویا
به جای اتصال شنوندگان رویداد به هر دکمه (که می تواند باعث نشت حافظه شود) ، از نمایندگی رویداد استفاده کنید:
document.getElementById('list').addEventListener('click', (e) => {
if (e.target.matches('.delete-btn')) {
// Handle delete button click
}
});
این الگوی برای عناصری کار می کند که حتی وقتی کد اجرا می شود ، هنوز وجود ندارند!
3. قدرت روش های آرایه
JavaScript مدرن روشهای آرایه باورنکردنی دارد که دستکاری داده ها را ظریف می کند:
// Filter items
const activeItems = items.filter(item => !item.completed);
// Transform items
const itemTexts = items.map(item => item.text);
// Find an item
const targetItem = items.find(item => item.id === targetId);
// Check if any/all items match a condition
const hasCompleted = items.some(item => item.completed);
const allCompleted = items.every(item => item.completed);
یادگیری این روشها نحوه نوشتن JavaScript را تغییر داد.
4. با استفاده از API Observer Compiresection
یکی از API های مرورگر مدرن مورد علاقه من ، ناظر تقاطع به شما امکان می دهد هنگام ورود عناصر به منظره ، به طور مؤثر تشخیص دهید:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
من قبلاً برای این قابلیت به افزونه های jQuery اعتماد می کردم ، اما وانیل JS اکنون راه حل های بهتری ارائه می دهد!
ویژگی های جاوا اسکریپت مدرن ارزش یادگیری
زبان جاوا اسکریپت در سالهای اخیر به طرز چشمگیری تکامل یافته است. این ویژگی های مدرن وانیل JS را از همیشه قدرتمندتر می کند:
1. تکالیف تخریب
// Extract values from objects
const { name, age } = person;
// Extract values from arrays
const [first, second] = items;
// Set default values
const { name = 'Anonymous' } = user;
2. اپراتورهای پخش و استراحت
// Combine arrays
const newArray = [...array1, ...array2];
// Clone objects
const clonedObject = { ...originalObject };
// Collect remaining arguments
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
3. زنجیر اختیاری
// Before
const userName = user && user.info && user.info.name;
// After
const userName = user?.info?.name;
4. همبستگی تهی
// Use default only if value is null/undefined (not falsy)
const count = data.count ?? 0;
چه موقع از یک چارچوب استفاده کنید (و چه موقع نیست)
بعد از سالها ساختن با هر دو وانیل JS و چارچوب ها ، توصیه های عملی من در مورد زمانی که هر رویکرد معنا پیدا می کند وجود دارد:
از وانیل JS استفاده کنید:
- ساخت برنامه های کوچک و متوسط با نیازهای محدود مدیریت دولت
- عملکرد بسیار مهم است (به خصوص در دستگاه های موبایل یا کم مصرف)
- شما می خواهید وابستگی ها را به حداقل برسانید و اندازه بسته نرم افزاری را کوچک نگه دارید
- برنامه شما نیازهای ساده دستکاری DOM دارد
- شما در حال ساخت کتابخانه یا ابزار دیگری هستید که دیگران از آن استفاده می کنند
چارچوبی را در نظر بگیرید که:
- ساختن برنامه های بزرگ و پیچیده با مدیریت پیشرفته دولت
- کار با تیمی که الگوهای و ساختار مداوم در آن مهم است
- ایجاد یک برنامه با به روزرسانی های مکرر در UI بر اساس تغییرات داده
- مزایای بهره وری از هزینه های عملکرد فراتر است
- شما به ویژگی هایی مانند مسیریابی ، مدیریت دولت و قابلیت استفاده مجدد جزء نیاز دارید
پایان
سفر من با JavaScript به من آموخته است که چارچوب ها ابزاری هستند نه میانبر. زمانی که من در تسلط بر وانیل جاوا اسکریپت سرمایه گذاری کرده ام ، در طول حرفه ام بارها و بارها پرداخت کرده است و به من این امکان را می دهد تا مسائل پیچیده را اشکال بزنم ، عملکرد را بهینه کنم و چارچوب های جدید را به سرعت انتخاب کنم.
این که آیا شما تازه سفر توسعه وب خود را شروع کرده اید یا به دنبال تقویت بنیاد خود هستید ، از اصول وانیلی JS پرش نکنید. دانشی که به دست می آورید ، صرف نظر از اینکه کدام چارچوب هایی را که در نهایت اتخاذ می کنید ، در کل حرفه خود به شما خدمت می کند.
چه تکنیک های وانیلی JS را در کار خود با ارزش ترین پیدا کرده اید؟ من دوست دارم تجربیات شما را در نظرات زیر بشنوم!
برنامه نویسی مبارک!
