JavaScript المتقدمة عملياً

// بنية المشروع /* task-manager/ ├── index.html ├── css/ │ └── styles.css ├── js/ │ ├── app.js │ ├── store.js │ ├── api.js │ ├── components/ │ │ ├── TaskList.js │ │ ├── TaskItem.js │ │ └── TaskForm.js │ └── utils/ │ ├── debounce.js │ └── validators.js └── sw.js */ // store.js - إدارة الحالة باستخدام Proxy class Store { constructor(initialState = {}) { this.state = new Proxy(initialState, { set: (target, property, value) => { target[property] = value; this.notify(property, value); return true; } }); this.listeners = new Map(); } subscribe(property, callback) { if (!this.listeners.has(property)) { this.listeners.set(property, new Set()); } this.listeners.get(property).add(callback); // إرجاع دالة إلغاء الاشتراك return () => { this.listeners.get(property).delete(callback); }; } notify(property, value) { if (this.listeners.has(property)) { this.listeners.get(property).forEach(callback => { callback(value); }); } } getState() { return { ...this.state }; } setState(updates) { Object.assign(this.state, updates); } } // تهيئة المتجر const store = new Store({ tasks: [], filter: 'all', isLoading: false, error: null }); // api.js - طبقة API مع معالجة الأخطاء class TaskAPI { constructor(baseURL) { this.baseURL = baseURL; } async request(endpoint, options = {}) { const url = `${this.baseURL}${endpoint}`; const config = { headers: { 'Content-Type': 'application/json', ...options.headers }, ...options }; try { const response = await fetch(url, config); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('API request failed:', error); throw error; } } async getTasks() { return this.request('/tasks'); } async createTask(task) { return this.request('/tasks', { method: 'POST', body: JSON.stringify(task) }); } async updateTask(id, updates) { return this.request(`/tasks/${id}`, { method: 'PATCH', body: JSON.stringify(updates) }); } async deleteTask(id) { return this.request(`/tasks/${id}`, { method: 'DELETE' }); } } const api = new TaskAPI('https://api.example.com'); // TaskItem.js - مكون مع أحداث مخصصة class TaskItem { constructor(task) { this.task = task; this.element = null; this.render(); } render() { this.element = document.createElement('div'); this.element.className = `task-item ${this.task.completed ? 'completed' : ''}`; this.element.innerHTML = ` <input type="checkbox" ${this.task.completed ? 'checked' : ''}> <span class="task-title">${this.escapeHtml(this.task.title)}</span> <span class="task-priority ${this.task.priority}">${this.task.priority}</span> <button class="edit-btn">تعديل</button> <button class="delete-btn">حذف</button> `; this.attachEventListeners(); return this.element; } attachEventListeners() { const checkbox = this.element.querySelector('input[type="checkbox"]'); const editBtn = this.element.querySelector('.edit-btn'); const deleteBtn = this.element.querySelector('.delete-btn'); checkbox.addEventListener('change', () => { this.dispatchEvent('toggle', { id: this.task.id }); }); editBtn.addEventListener('click', () => { this.dispatchEvent('edit', { task: this.task }); }); deleteBtn.addEventListener('click', () => { this.dispatchEvent('delete', { id: this.task.id }); }); } dispatchEvent(type, detail) { this.element.dispatchEvent(new CustomEvent(type, { bubbles: true, detail })); } escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } update(task) { this.task = task; const newElement = this.render(); this.element.replaceWith(newElement); this.element = newElement; } } // TaskList.js - مكون حاوية مع التمرير الافتراضي class TaskList { constructor(container) { this.container = container; this.tasks = []; this.components = new Map(); this.observer = null; this.setupIntersectionObserver(); this.attachEventListeners(); } setupIntersectionObserver() { this.observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1 } ); } attachEventListeners() { this.container.addEventListener('toggle', async (e) => { const { id } = e.detail; await this.handleToggle(id); }); this.container.addEventListener('edit', (e) => { const { task } = e.detail; this.handleEdit(task); }); this.container.addEventListener('delete', async (e) => { const { id } = e.detail; await this.handleDelete(id); }); } async handleToggle(id) { try { const task = this.tasks.find(t => t.id === id); const updated = await api.updateTask(id, { completed: !task.completed }); this.updateTask(updated); } catch (error) { store.setState({ error: 'فشل تحديث المهمة' }); } } handleEdit(task) { // إرسال حدث للأصل للتعامل معه document.dispatchEvent(new CustomEvent('edit-task', { detail: { task } })); } async handleDelete(id) { if (!confirm('هل أنت متأكد من رغبتك في حذف هذه المهمة؟')) { return; } try { await api.deleteTask(id); this.removeTask(id); } catch (error) { store.setState({ error: 'فشل حذف المهمة' }); } } render(tasks) { this.tasks = tasks; this.container.innerHTML = ''; if (tasks.length === 0) { this.container.innerHTML = '<p class="empty-state">لا توجد مهام</p>'; return; } const fragment = document.createDocumentFragment(); tasks.forEach(task => { const taskItem = new TaskItem(task); this.components.set(task.id, taskItem); fragment.appendChild(taskItem.element); this.observer.observe(taskItem.element); }); this.container.appendChild(fragment); } updateTask(task) { const index = this.tasks.findIndex(t => t.id === task.id); if (index !== -1) { this.tasks[index] = task; const component = this.components.get(task.id); if (component) { component.update(task); } } } removeTask(id) { this.tasks = this.tasks.filter(t => t.id !== id); const component = this.components.get(id); if (component) { component.element.remove(); this.components.delete(id); } } destroy() { this.observer.disconnect(); this.components.clear(); } }

1. بيئة التطوير: // package.json { "name": "task-manager", "version": "1.0.0", "scripts": { "dev": "vite", "build": "vite build", "test": "jest", "lint": "eslint src", "format": "prettier --write src" }, "devDependencies": { "vite": "^5.0.0", "jest": "^29.0.0", "eslint": "^8.0.0", "prettier": "^3.0.0" } } 2. جودة الكود: // .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: ['eslint:recommended'], rules: { 'no-console': 'warn', 'no-unused-vars': 'error', 'prefer-const': 'error' } }; // .prettierrc { "semi": true, "singleQuote": true, "tabWidth": 4, "trailingComma": "es5" }

1. TypeScript - إضافة أمان النوع // التثبيت npm install --save-dev typescript // tsconfig.json { "compilerOptions": { "target": "ES2020", "module": "ESNext", "strict": true, "esModuleInterop": true } } 2. React - مكتبة واجهة المستخدم القائمة على المكونات // التثبيت npx create-react-app my-app # أو مع Vite npm create vite@latest my-app -- --template react 3. Node.js - JavaScript من جانب الخادم // التثبيت # قم بالتنزيل من nodejs.org // مثال خادم Express const express = require('express'); const app = express(); app.use(express.json()); app.get('/api/tasks', (req, res) => { res.json(tasks); }); app.post('/api/tasks', (req, res) => { const task = req.body; tasks.push(task); res.status(201).json(task); }); app.listen(3000, () => { console.log('Server running on port 3000'); }); 4. تقنيات إضافية للاستكشاف: - Vue.js أو Angular (أطر بديلة) - Next.js أو Nuxt.js (أطر فوقية) - GraphQL (بديل لواجهات REST APIs) - MongoDB أو PostgreSQL (قواعد البيانات) - Docker (الحاويات) - AWS أو Azure (منصات السحابة)

المهارات الأساسية لمطوري JavaScript: 1. إتقان JavaScript الأساسية - ميزات ES6+ - البرمجة غير المتزامنة - أنماط التصميم - تحسين الأداء 2. معرفة الأطر - React أو Vue أو Angular - إدارة الحالة (Redux، Zustand) - التوجيه والملاحة 3. تطوير الواجهة الخلفية - Node.js و Express - واجهات RESTful APIs - عمليات قاعدة البيانات - المصادقة 4. أدوات التطوير - التحكم في الإصدار Git - مديرو الحزم (npm، yarn) - أدوات البناء (Webpack، Vite) - أطر الاختبار 5. المهارات الناعمة - حل المشكلات - مراجعة الكود - التوثيق - التعاون الجماعي موارد التعلم: - MDN Web Docs (التوثيق) - JavaScript.info (دروس) - Frontend Masters (دورات) - GitHub (مشاريع مفتوحة المصدر) - Dev.to و Medium (مقالات) - Stack Overflow (المجتمع) بناء محفظتك: 1. إنشاء 3-5 مشاريع كبيرة 2. المساهمة في المصادر المفتوحة 3. كتابة مقالات تقنية 4. الحفاظ على ملف GitHub نشط 5. المشاركة في تحديات البرمجة نصائح البحث عن وظيفة: - بناء محفظة قوية - ممارسة مقابلات البرمجة - التواصل في مجتمعات المطورين - المساهمة في المصادر المفتوحة - الاستمرار في التعلم والبقاء على اطلاع