Rumah >hujung hadapan web >tutorial js >Corak Reka Bentuk yang Menyahmisti
Jadi era AI sudah tiba, lonjakan besar ke hadapan yang, pada masa ini, mengeluarkan kod Node dengan const fetch = require('node-fetch') ? (benar untuk kedua-dua ChatGPT dan Gemini setakat hari ini) dan memberi satu lagi putaran mesin kitaran iaitu Internet dan kandungannya.
Dalam penggabungan kandungan itu, corak reka bentuk muncul semula
Daripada siaran yang menerangkan cara menggunakan corak reka bentuk dalam Node(???) kepada siaran yang menerangkan dengan semua butiran usang seperti cara menggunakan corak kilang dalam Java (Java 8 dikeluarkan pada Mac 2014 tambah Lambdas ).
Pernah terjumpa guru Pemfaktoran Semula?
Ia adalah tapak web yang mungkin anda lawati dalam perjalanan pembelajaran anda melalui sains komputer, khususnya dalam pengaturcaraan. Bahagian corak reka bentuknya dijelaskan dengan cukup baik dan salah satu yang paling banyak dikongsi melalui forum yang berbeza selama ini.
Jika kita pergi ke definisi corak reka bentuk, kita dapati:
Corak reka bentuk ialah penyelesaian biasa kepada masalah biasa
dalam reka bentuk perisian. Setiap corak adalah seperti blueprint
yang boleh anda sesuaikan untuk menyelesaikan
tertentu masalah reka bentuk dalam kod anda.
Kalau begitu kenapa siaran ini? Maksud saya, terdapat banyak maklumat di laman web yang dipautkan di atas; ini sahaja.
Perkaranya, saya sentiasa bergelut untuk menerima definisi ini... "untuk menyelesaikan masalah reka bentuk tertentu dalam kod saya"... dalam kod saya? Adakah kod saya mempunyai masalah yang perlu saya selesaikan?
Apa yang sebenarnya berlaku, saya perlu mengekodkan "sesuatu" tertentu yang bahasa pengaturcaraan yang digunakan dalam projek itu kekurangan abstraksi untuk.
Mulus dan ringkas. Sekiranya ia masih belum sesuai dengan anda, mari lihat beberapa contoh dengan kod.
Ini adalah pelaksanaan yang sangat mudah bagi Corak Kilang dalam Java (terutamanya bahasa pengaturcaraan Berorientasikan Objek).
public class ShapeFactory { public Shape createShape(String type) { if (type.equalsIgnoreCase("CIRCLE")) { return new Circle(); } else if (type.equalsIgnoreCase("SQUARE")) { return new Square(); } return null; } }
Kemudian Java 8 (Mac 2014, sekiranya anda terlupa) menambahkan Lambdas (konsep daripada pengaturcaraan berfungsi) supaya kita boleh melakukan ini sebaliknya:
Map<String, Supplier<Shape>> shapeFactory = new HashMap<>(); shapeFactory.put("CIRCLE", Circle::new); shapeFactory.put("SQUARE", Square::new); Shape circle = shapeFactory.get("CIRCLE").get();
Tidak perlu corak reka bentuk kilang sekali lagi (sekurang-kurangnya di Jawa).
Ya, saya tahu corak kilang adalah contoh yang kebanyakan orang gunakan sepanjang masa, tetapi apa yang berlaku dengan yang lain? Dan apakah yang berlaku dalam bahasa pengaturcaraan lain?
Ini ialah corak pelawat dalam Typescript:
interface Shape { draw(): void; accept(visitor: ShapeVisitor): void; } class Circle implements Shape { radius: number; constructor(radius: number) { this.radius = radius; } draw() { console.log("Drawing a circle"); } accept(visitor: ShapeVisitor) { visitor.visitCircle(this); } } class Square implements Shape { sideLength: number; constructor(sideLength: number) { this.sideLength = sideLength; } draw() { console.log("Drawing a square"); } accept(visitor: ShapeVisitor) { visitor.visitSquare(this); } } interface ShapeVisitor { visitCircle(circle: Circle): void; visitSquare(square: Square): void; } class AreaCalculator implements ShapeVisitor { private area = 0; visitCircle(circle: Circle) { this.area = Math.PI * circle.radius * circle.radius; console.log(`Circle area: ${this.area}`); } visitSquare(square: Square) { this.area = square.sideLength * square.sideLength; console.log(`Square area: ${this.area}`); } getArea(): number { return this.area; } } // Using the Visitor const circle = new Circle(5); const square = new Square(4); const calculator = new AreaCalculator(); circle.accept(calculator); square.accept(calculator);
Kod berikut melakukan perkara yang sama tetapi menggunakan pantulan (keupayaan bahasa untuk memeriksa dan memanipulasi objeknya sendiri semasa masa jalan) dan bukannya corak Pelawat:
interface Shape { draw(): void; } class Circle implements Shape { // ... (same as before) radius: number; } class Square implements Shape { // ... (same as before) sideLength: number; } function calculateArea(shape: Shape) { if (shape instanceof Circle) { const circle = shape as Circle; // Type assertion const area = Math.PI * circle.radius * circle.radius; console.log(`Circle area: ${area}`); } else if (shape instanceof Square) { const square = shape as Square; // Type assertion const area = square.sideLength * square.sideLength; console.log(`Square area: ${area}`); } } const circle = new Circle(5); const square = new Square(4); calculateArea(circle); calculateArea(square);
Kini corak pemerhati, juga dalam TypeScript:
interface Observer { update(data: any): void; } class NewsPublisher { private observers: Observer[] = []; subscribe(observer: Observer) { this.observers.push(observer); } unsubscribe(observer: Observer) { this.observers = this.observers.filter(o => o !== observer); } notify(news: string) { this.observers.forEach(observer => observer.update(news)); } } class NewsletterSubscriber implements Observer { update(news: string) { console.log(`Received news: ${news}`); } } // Using the Observer const publisher = new NewsPublisher(); const subscriber1 = new NewsletterSubscriber(); const subscriber2 = new NewsletterSubscriber(); publisher.subscribe(subscriber1); publisher.subscribe(subscriber2); publisher.notify("New product launched!");
Sama tetapi menggunakan terbina dalam (dalam Node API) Pemancar Acara:
public class ShapeFactory { public Shape createShape(String type) { if (type.equalsIgnoreCase("CIRCLE")) { return new Circle(); } else if (type.equalsIgnoreCase("SQUARE")) { return new Square(); } return null; } }
Pada ketika itu, anda mungkin menyedari bahawa "masalah" ialah pelaksanaan OOP, dan anda mungkin betul, tetapi tidak sepenuhnya.
Setiap paradigma pengaturcaraan, terutamanya apabila diambil dalam bentuk yang paling tulen, mempunyai keanehan, kesukaran atau "perkara yang tidak boleh dicapai dalam garis lurus", jika anda mahu.
Mari kita masuk ke alam pengaturcaraan berfungsi. Anda mungkin pernah mendengar tentang Monads.
Sama ada anda jatuh untuk perangkap minda definisi matematik atau tidak, kami -pembangun perisian- boleh memahami Monads sebagai corak reka bentuk juga. Ini kerana dalam dunia fungsi murni, di mana tiada perkara yang tidak dijangka berlaku, sukar untuk membayangkan kesan sampingan, tetapi kebanyakan produk perisian memerlukan kesan sampingan, jadi bagaimana kita...?
Ini ialah contoh IO Monad dalam Haskell:
Map<String, Supplier<Shape>> shapeFactory = new HashMap<>(); shapeFactory.put("CIRCLE", Circle::new); shapeFactory.put("SQUARE", Square::new); Shape circle = shapeFactory.get("CIRCLE").get();
Kesan sampingan (membaca fail) terkandung dalam monad IO.
Mari tambahkan contoh monadik menggunakan skrip taip;
interface Shape { draw(): void; accept(visitor: ShapeVisitor): void; } class Circle implements Shape { radius: number; constructor(radius: number) { this.radius = radius; } draw() { console.log("Drawing a circle"); } accept(visitor: ShapeVisitor) { visitor.visitCircle(this); } } class Square implements Shape { sideLength: number; constructor(sideLength: number) { this.sideLength = sideLength; } draw() { console.log("Drawing a square"); } accept(visitor: ShapeVisitor) { visitor.visitSquare(this); } } interface ShapeVisitor { visitCircle(circle: Circle): void; visitSquare(square: Square): void; } class AreaCalculator implements ShapeVisitor { private area = 0; visitCircle(circle: Circle) { this.area = Math.PI * circle.radius * circle.radius; console.log(`Circle area: ${this.area}`); } visitSquare(square: Square) { this.area = square.sideLength * square.sideLength; console.log(`Square area: ${this.area}`); } getArea(): number { return this.area; } } // Using the Visitor const circle = new Circle(5); const square = new Square(4); const calculator = new AreaCalculator(); circle.accept(calculator); square.accept(calculator);
Sebuah yang klasik, saya telah melihat monad mungkin seperti 50 kali di seluruh Internet, tetapi apakah itu, sebenarnya?
Masalahnya yang cuba diselesaikan:
interface Shape { draw(): void; } class Circle implements Shape { // ... (same as before) radius: number; } class Square implements Shape { // ... (same as before) sideLength: number; } function calculateArea(shape: Shape) { if (shape instanceof Circle) { const circle = shape as Circle; // Type assertion const area = Math.PI * circle.radius * circle.radius; console.log(`Circle area: ${area}`); } else if (shape instanceof Square) { const square = shape as Square; // Type assertion const area = square.sideLength * square.sideLength; console.log(`Square area: ${area}`); } } const circle = new Circle(5); const square = new Square(4); calculateArea(circle); calculateArea(square);
Kami terlupa untuk menentukan sifat objek kami! ?
dalam kes penggunaan sebenar ini akan menjadi input daripada kesan sampingan kebanyakannya, seperti membaca daripada pangkalan data atau fail
Jadi sekarang jika kita lakukan:
interface Observer { update(data: any): void; } class NewsPublisher { private observers: Observer[] = []; subscribe(observer: Observer) { this.observers.push(observer); } unsubscribe(observer: Observer) { this.observers = this.observers.filter(o => o !== observer); } notify(news: string) { this.observers.forEach(observer => observer.update(news)); } } class NewsletterSubscriber implements Observer { update(news: string) { console.log(`Received news: ${news}`); } } // Using the Observer const publisher = new NewsPublisher(); const subscriber1 = new NewsletterSubscriber(); const subscriber2 = new NewsletterSubscriber(); publisher.subscribe(subscriber1); publisher.subscribe(subscriber2); publisher.notify("New product launched!");
program meletup.
Penyelesaian tanpa Maybe monad:
import { EventEmitter } from 'events'; class NewsPublisher extends EventEmitter { publish(news: string) { this.emit('news', news); } } const publisher = new NewsPublisher(); publisher.on('news', (news) => { console.log(`All subscribers received the news: ${news}`); }); publisher.publish("New product launched!");
Program ini tidak meletup.
mungkin monad tidak diperlukan dalam JavaScript atau skrip taip kerana operator rantaian pilihan tetapi jika anda menggunakan bahasa yang tidak melaksanakannya... anda boleh menggunakan mungkin monad atau boleh saya katakan corak reka bentuk?
Ya, saya tahu, ada orang yang baru mempelajari perkara Mungkin dan tidak sabar-sabar menerapkannya pada 6 projek sampingan sekaligus dan sekarang saya menjadi ketawa di pesta itu kerana memberitahu anda "anda tidak memerlukannya". Anda masih boleh menggunakannya, malah saya menjemput anda untuk berbuat demikian jika anda rasa ia bagus (pada penghujung hari itu kod anda dengan wajah cantik itu anda boleh melakukan apa sahaja yang anda mahu! ?)
Tetapi kembali kepada asas. Bagaimana dengan paradigma lain? Jika anda berfikir di luar kotak OOP/FP, saya suka!
Semua paradigma pasti mempunyai penyelesaian dan teknik berulang mereka sendiri, walaupun ia tidak selalu dipanggil secara rasmi "corak reka bentuk."
Berikut adalah beberapa contoh (terima kasih Gemini kerana mengelakkan saya berfikir, terima kasih kerana pemformatan yang cantik dan nilai tambah ?):
Terdapat banyak "teknik" dan "corak", senarai ini hanya untuk memberi anda benang untuk ditarik jika anda ingin tahu.
Semoga anda mendapati ini berguna, baca anda tidak lama lagi!
Walaupun istilah "corak reka bentuk" paling rapat dikaitkan dengan OOP, paradigma lain mempunyai set penyelesaian dan teknik berulang mereka sendiri. Teknik ini menangani cabaran dan kekangan khusus paradigma tersebut, menyediakan pendekatan yang mantap untuk masalah biasa. Jadi, walaupun ia tidak selalu dilabel secara rasmi sebagai "corak reka bentuk", ia mempunyai tujuan yang sama dalam membimbing pembangun ke arah penyelesaian yang berkesan dan boleh diselenggara.
Kami boleh memahami corak reka bentuk sebagai penyelesaian yang terkenal untuk menampal ciri yang bahasa pengaturcaraan yang kami gunakan tidak mempunyai abstraksi.
Siaran ini telah ditulis hampir keseluruhannya oleh saya, contoh yang ditentukan oleh Gemini 1.5 Pro
Atas ialah kandungan terperinci Corak Reka Bentuk yang Menyahmisti. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!