1. Programmation Orientée Objet (Classes) Expert
ES6 a introduit une syntaxe claire pour créer des classes et gérer l'héritage.
// Définition d'une classe
class Animal {
constructor(nom, age) {
this.nom = nom;
this.age = age;
}
parler() {
return `${this.nom} fait un bruit.`;
}
get description() {
return `${this.nom} a ${this.age} ans.`;
}
set nouvelAge(age) {
if (age > 0) this.age = age;
}
}
// Héritage
class Chien extends Animal {
constructor(nom, age, race) {
super(nom, age);
this.race = race;
}
parler() {
return `${this.nom} aboie ! Wouf !`;
}
}
// Classe abstraite simulée / méthode statique
class MathUtils {
static addition(a, b) {
return a + b;
}
}
🐕 Création d'animaux
2. Modules ES6 (Import/Export)
Organisez votre code en modules réutilisables. (Simulation dans cet environnement)
// module.js
export const PI = 3.14159;
export function calculerAire(rayon) {
return PI * rayon ** 2;
}
export default class Utilisateur {
constructor(nom) {
this.nom = nom;
}
}
// main.js
import Utilisateur, { PI, calculerAire } from './module.js';
console.log(PI); // 3.14159
📦 Simulation de modules
3. Design Patterns essentiels
Des solutions réutilisables aux problèmes courants.
Singleton
class DatabaseConnection {
constructor() {
if (DatabaseConnection.instance) {
return DatabaseConnection.instance;
}
this.connection = "Connecté à la base";
DatabaseConnection.instance = this;
}
}
Observer
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(callback);
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(cb => cb(data));
}
}
}
🎯 Pattern Observer en action
4. Programmation Fonctionnelle avancée
Composition, curryfication, fonctions pures.
// Curryfication
const multiplier = a => b => a * b;
const double = multiplier(2);
console.log(double(5)); // 10
// Composition
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const ajouter1 = x => x + 1;
const multiplier2 = x => x * 2;
const transformer = compose(multiplier2, ajouter1);
console.log(transformer(5)); // (5+1)*2 = 12
// Fonctions pures et immutabilité
const personnes = [{ nom: "Alice", age: 30 }];
const ajouterPersonne = (liste, personne) => [...liste, personne];
🔄 Composition de fonctions
5. Proxy et Reflection API
Interceptez et personnalisez les opérations sur les objets.
const utilisateur = { nom: "Jean", age: 25 };
const proxy = new Proxy(utilisateur, {
get(target, prop) {
console.log(`Lecture de ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`Écriture de ${prop} = ${value}`);
if (prop === "age" && value < 0) {
throw new Error("L'âge ne peut pas être négatif");
}
target[prop] = value;
return true;
}
});
🛡️ Proxy de validation
6. Générateurs (function*)
Créez des fonctions qui peuvent être mises en pause et reprises.
function* generateurId() {
let id = 1;
while(true) {
yield id++;
}
}
const gen = generateurId();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// Générateur pour séquence de Fibonacci
function* fibonacci() {
let [prev, curr] = [0, 1];
while(true) {
yield curr;
[prev, curr] = [curr, prev + curr];
}
}
🔢 Suite de Fibonacci avec générateur
7. WebSocket - Communication temps réel
Créez des applications temps réel (chat, notifications).
💬 Chat temps réel (simulation)
8. Service Workers (Progressive Web Apps)
Rendez votre application disponible hors ligne.
// Enregistrement du service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service Worker enregistré'))
.catch(err => console.log('Erreur:', err));
}
// sw.js - Cache des ressources
const CACHE_NAME = 'mon-app-v1';
const urlsToCache = ['/', '/style.css', '/script.js'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
📱 Service Worker (simulation)
9. Canvas API - Graphiques et animations
Dessinez des graphiques, créez des jeux et des animations.
10. Mini-projet : Jeu du Morpion (Tic-Tac-Toe)
Application complète avec POO et patterns.
11. Techniques avancées de debug
Utilisez les outils du navigateur et les custom errors.
// Erreur personnalisée
class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}
// Debugging avec console
console.group("Groupe de logs");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();
console.table([{nom: "Alice", age: 30}, {nom: "Bob", age: 25}]);
console.time("Timer");
// code...
console.timeEnd("Timer");
12. Web Components
Créez des composants réutilisables personnalisés.
class MaCarte extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
Titre par défaut
`;
}
}
customElements.define('ma-carte', MaCarte);
🧩 Composant Web personnalisé
📋 Récapitulatif - Partie 3 (Expert)
✅ Ce que vous avez appris :
- Programmation Orientée Objet avancée (classes, héritage, getters/setters)
- Modules ES6 et organisation du code
- Design Patterns (Singleton, Observer)
- Programmation fonctionnelle (curryfication, composition)
- Proxy et Reflection API
- Generators et itérateurs
- WebSocket pour temps réel
- Service Workers pour PWA
- Canvas API pour graphiques
- Web Components
🎯 Prochaines étapes : TypeScript, React/Vue/Angular, Node.js, GraphQL, Tests unitaires, et DevOps JavaScript !