Paintframe

Generalization over specification

მაგალითი: პოსტერი თუ ქარდი

დავუშვათ, გვჭირდება სამი ბარათი: Basquiat, Warhol, Banksy. ისინი ერთმანეთისგან ფერით, ზომითა და სათაურის განლაგებით განსხვავდებიან.

იმპლემენტაციის პირველი იდეა ასეთი, რომ შევქმნათ ახალი კომპონენტი პოსტერისთვის, რომელიც პროპსის/არგუმენტის მიხედვით განსასხვავებს სხვადასხვა პოსტერს.

App უბრალოდ არენდერებს სიას:

function App() {
  return <Posters />;
}

მშობელი — Posters — უკვე იცის სამი მხატვარი, მაგრამ გადაწყვეტილებებს Poster-ს გადააბარებს ერთი variant-ით:

function Posters() {
  return (
    <div className={styles.wrapper}>
      <Poster variant="basquiat" title="Basquiat" />
      <Poster variant="warhol" title="Warhol" />
      <Poster variant="banksy" title="Banksy" />
    </div>
  );
}

ხოლო Poster-ის ინტერფეისი ასე გამოიყურება:

interface PosterProps {
  variant: "basquiat" | "warhol" | "banksy";
  title?: string;
}

variant ერთ სიტყვაში სამ დამოუკიდებელ გადაწყვეტილებას მალავს: ფერს, ზომასა და alignment-ს. CSS-შიც იგივე ხდება — .wrapper--basquiat ერთდროულად ატარებს height-ს, gradient-სა და text-align: left-ს.

აქ რამდენიმე პრობლემაა:

  1. Poster-ის იმპლემენტაციის გარჩევის გარეშე გაუგებარია, რომელი variant რას აკეთებს
  2. ახალი პოსტერის დამატებისას აუცილებელია Poster კომპონენტის განახლება

ეს არის specification-ის მაგალითად, რომელიც ძალიან მჭიდროდაა დამოკიდებული დრევანდელი დღის მოთხოვნებთან და გარდა ამისა გარჩევის მხრივად, რთულად გასარჩევია.

იგივე App, იგივე Posters, სხვა პრიმიტივი:

function Posters() {
  return (
    <div className={styles.wrapper}>
      <Card color="red" size="small" title="Basquiat" titlePositions="left" />
      <Card color="blue" size="medium" title="Warhol" titlePositions="center" />
      <Card color="green" size="large" title="Banksy" titlePositions="right" />
    </div>
  );
}

Card-ის ინტერფეისი:

interface CardProps {
  color: "red" | "blue" | "green";
  size: "small" | "medium" | "large";
  title: string;
  titlePositions: "left" | "center" | "right";
}

ახლა კონტექსტი უფრო ნათელია. Posters წყვეტს რა უნდა გამოჩნდეს ამ გვერდზე: რომ Basquiat წითელია, small-ია და მარცხნივ დგას. Card-მა აღარ იცის, ვინ არის Basquiat, იცის მხოლოდ ფერი, ზომა და alignment.

სპეციალიზაცია მაღალ დონეზე დარჩა, იქ, სადაც ამ კონკრეტული გვერდის შესახებ ცოდნა ნამდვილად გვჭირდება. პრიმიტივი კი ზოგადი დარჩა.

ეს არის generalization. ფუნქციონალი ისევ დღევანდელი სამი ბარათია, თუმცა ინტერფეისი მათზე აღარ არის მიბმული.

რა იცვლება:

← ყველა სტატია