12.1 Gestion des utilisateurs dans une application web
La programmation orientée objet (POO) en JavaScript permet de créer des applications complexes, évolutives et faciles à maintenir. Examinons quelques exemples pratiques d'utilisation de la POO en JavaScript, y compris les classes, l'héritage, l'encapsulation et le polymorphisme.
Imaginons que nous développons une application web pour la gestion des utilisateurs. Nous pouvons créer des classes pour différents types d'utilisateurs, tels que User, Admin et Guest, en utilisant l'héritage pour créer des classes spécialisées.
Explication :
- La classe
Usercontient les méthodesloginetlogout - La classe
Adminhérite deUseret ajoute la méthodedeleteUser - La classe
Guesthérite deUseret ajoute la méthoderequestAccess - Les instances des classes
AdminetGuestutilisent leurs méthodes de classe et celles de la classe de base
Code :
JavaScript
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
login() {
console.log(`${this.username} logged in.`);
}
logout() {
console.log(`${this.username} logged out.`);
}
}
class Admin extends User {
constructor(username, email) {
super(username, email);
this.role = 'admin';
}
deleteUser(user) {
console.log(`${this.username} deleted user ${user.username}.`);
}
}
class Guest extends User {
constructor(username, email) {
super(username, email);
this.role = 'guest';
}
requestAccess() {
console.log(`${this.username} requested access.`);
}
}
const admin = new Admin('adminUser', 'admin@example.com');
const guest = new Guest('guestUser', 'guest@example.com');
admin.login(); // "adminUser logged in."
admin.deleteUser(guest); // "adminUser deleted user guestUser."
admin.logout(); // "adminUser logged out."
guest.login(); // "guestUser logged in."
guest.requestAccess(); // "guestUser requested access."
guest.logout(); // "guestUser logged out."
12.2 Gestion des produits dans une boutique en ligne
Dans cet exemple, nous allons créer des classes pour représenter différents types de produits dans une boutique en ligne, tels que Product, Electronics, et Clothing. Nous allons également implémenter le polymorphisme pour la méthode calculateDiscount.
Explication :
- La classe
Productcontient la méthodecalculateDiscountqui calcule une remise de 10% par défaut - La classe
Electronicsredéfinit la méthodecalculateDiscount, offrant une réduction de 20% pour l'électronique - La classe
Clothingredéfinit la méthodecalculateDiscount, offrant une réduction de 15% pour les vêtements - Les instances des classes
ElectronicsetClothingutilisent leurs méthodescalculateDiscountpour calculer les réductions
Code :
JavaScript
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
calculateDiscount() {
return this.price * 0.1; // 10% remise par défaut
}
display() {
console.log(`${this.name} - $${this.price.toFixed(2)}`);
}
}
class Electronics extends Product {
constructor(name, price, brand) {
super(name, price);
this.brand = brand;
}
calculateDiscount() {
return this.price * 0.2; // 20% remise sur l'électronique
}
}
class Clothing extends Product {
constructor(name, price, size) {
super(name, price);
this.size = size;
}
calculateDiscount() {
return this.price * 0.15; // 15% remise sur les vêtements
}
}
const laptop = new Electronics('Laptop', 1000, 'BrandX');
const tshirt = new Clothing('T-Shirt', 20, 'M');
laptop.display(); // "Laptop - $1000.00"
console.log(`Discount: $${laptop.calculateDiscount().toFixed(2)}`); // "Discount: $200.00"
tshirt.display(); // "T-Shirt - $20.00"
console.log(`Discount: $${tshirt.calculateDiscount().toFixed(2)}`); // "Discount: $3.00"
12.3: Gestion d'une bibliothèque
Dans cet exemple, nous allons créer des classes pour la gestion d'une bibliothèque, y compris les classes Book, Magazine et Library. Nous allons également implémenter des méthodes pour ajouter et supprimer des éléments de la bibliothèque.
Explication :
- Les classes
BooketMagazinehéritent de la classeLibraryItemet redéfinissent la méthodedisplay - La classe
Librarygère une collection d'éléments de bibliothèque en fournissant les méthodesaddItem,removeItemetdisplayItems - Les instances des classes
BooketMagazinesont ajoutées et supprimées de la bibliothèque, leurs informations sont affichées à l'aide de la méthodedisplay
Code :
JavaScript
class LibraryItem {
constructor(title, year) {
this.title = title;
this.year = year;
}
display() {
console.log(`${this.title} (${this.year})`);
}
}
class Book extends LibraryItem {
constructor(title, year, author) {
super(title, year);
this.author = author;
}
display() {
console.log(`${this.title} by ${this.author} (${this.year})`);
}
}
class Magazine extends LibraryItem {
constructor(title, year, issueNumber) {
super(title, year);
this.issueNumber = issueNumber;
}
display() {
console.log(`${this.title} - Issue ${this.issueNumber} (${this.year})`);
}
}
class Library {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
console.log(`Added: ${item.title}`);
}
removeItem(title) {
this.items = this.items.filter(item => item.title !== title);
console.log(`Removed: ${title}`);
}
displayItems() {
this.items.forEach(item => item.display());
}
}
const library = new Library();
const book = new Book('JavaScript: The Good Parts', 2008, 'Douglas Crockford');
const magazine = new Magazine('JavaScript Weekly', 2021, 450);
library.addItem(book); // "Added: JavaScript: The Good Parts"
library.addItem(magazine); // "Added: JavaScript Weekly"
library.displayItems();
// "JavaScript: The Good Parts by Douglas Crockford (2008)"
// "JavaScript Weekly - Issue 450 (2021)"
library.removeItem('JavaScript Weekly'); // "Removed: JavaScript Weekly"
library.displayItems(); // "JavaScript: The Good Parts by Douglas Crockford (2008)"
GO TO FULL VERSION