Rumah > hujung hadapan web > tutorial js > Corak Reka Bentuk yang Menyahmisti

Corak Reka Bentuk yang Menyahmisti

Susan Sarandon
Lepaskan: 2024-11-03 10:54:02
asal
353 orang telah melayarinya

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

Demystifying Design Patterns

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 ).

Definisi

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?

Definisi, dibayangkan semula

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;   
  }
}
Salin selepas log masuk
Salin selepas log masuk

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();
Salin selepas log masuk
Salin selepas log masuk

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); 
Salin selepas log masuk
Salin selepas log masuk

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);
Salin selepas log masuk
Salin selepas log masuk

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!");
Salin selepas log masuk
Salin selepas log masuk

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;   
  }
}
Salin selepas log masuk
Salin selepas log masuk

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();
Salin selepas log masuk
Salin selepas log masuk

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); 
Salin selepas log masuk
Salin selepas log masuk

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);
Salin selepas log masuk
Salin selepas log masuk

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!");
Salin selepas log masuk
Salin selepas log masuk

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!");
Salin selepas log masuk

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 ?):

Pengaturcaraan Logik:
  • Pengaturcaraan Logik Kekangan: Paradigma ini melibatkan penentuan kekangan dan hubungan antara pembolehubah, dan kemudian membenarkan sistem mencari penyelesaian yang memenuhi kekangan tersebut. Teknik seperti undur dan penyebaran kekangan adalah penting untuk penyelesaian masalah yang cekap dalam paradigma ini. (Agak berguna apabila berurusan dengan AI).
  • Pangkalan Data Deduktif: Pangkalan data ini menggunakan peraturan logik dan inferens untuk memperoleh maklumat baharu daripada data sedia ada. Teknik seperti rantaian ke hadapan/ke belakang adalah asas kepada cara pangkalan data ini beroperasi dan boleh dianggap sebagai corak dalam paradigma ini.
Pengaturcaraan Serentak:
  • Pengiriman Mesej: Dalam sistem serentak, di mana berbilang proses dilaksanakan secara serentak, penghantaran mesej ialah teknik biasa untuk komunikasi dan penyelarasan. Corak seperti pengeluar-pengguna dan penulis-pembaca menyediakan penyelesaian yang mantap untuk mengurus akses serentak kepada sumber dan memastikan ketekalan data.
  • Primitif Penyegerakan: Ini ialah binaan peringkat rendah seperti mutex, semaphore dan pembolehubah keadaan yang digunakan untuk mengawal akses kepada sumber kongsi dalam program serentak. Walaupun bukan "corak" dalam erti kata tradisional, ia mewakili penyelesaian yang ditakrifkan dengan baik kepada cabaran bersamaan bersama.

Pengaturcaraan Berorientasikan Data:

  • Saluran Paip Transformasi Data: Paradigma ini menekankan transformasi data melalui satu siri operasi. Teknik seperti peta, penapis dan kurangkan (biasa dalam pengaturcaraan berfungsi juga, dan BANYAK digunakan dalam javascript sejak penambahannya) adalah blok bangunan asas untuk membina saluran paip ini, dan boleh dianggap sebagai corak dalam paradigma ini.
  • Entity-Component-System (ECS): Corak seni bina ini popular dalam pembangunan permainan dan aplikasi intensif data yang lain. Ia melibatkan pemecahan entiti kepada komponen (data) dan sistem (logik), mempromosikan lokaliti data dan pemprosesan yang cekap.

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!

Demystifying Design Patterns


? Ringkasan, untuk yang tergesa-gesa!

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan