🧔🏽 🎾 👨‍⚖️ स्वतंत्र मोर्चा 🈂️ 👨‍👧‍👦 🍐

GoF, प्योर आर्किटेक्चर, परफेक्ट कोड - ट्रू प्रोग्रामर की हैंडबुक। लेकिन फ्रंट-एंड की दुनिया में, इन पुस्तकों के कई विचार उपलब्ध नहीं हैं। वास्तविक दुनिया में कम से कम समानता बहुत मुश्किल है। शायद आधुनिक सीमांत समय से पहले है? हो सकता है कि "कार्यात्मक" प्रोग्रामिंग और रिएक्ट पहले ही ओओपी पर अपनी श्रेष्ठता साबित कर चुके हों? इस लेख में, मैं एक टूडू-सूची एप्लिकेशन का एक उदाहरण देना चाहता हूं जिसे मैंने क्लासिक किताबों में वर्णित सिद्धांतों और दृष्टिकोणों के अनुसार लागू करने की कोशिश की थी।

ढांचा निर्भरता

रूपरेखा आधुनिक मोर्चे की आधारशिला है। Hh.ru पर रिक्तियां रिएक्ट बनाम एंगुलर बनाम वी डेवलपर्स हैं। मैंने इनमें से प्रत्येक चौखटे के साथ काम किया, और बहुत लंबे समय तक मैं यह नहीं समझ सका कि मुझे 3 साल से Vue के साथ काम करना पड़ा था एक बटन को लाल से बैंगनी रंग तक? मुझे यह जानने की आवश्यकता है कि एक ही बटन को बाएं से दाएं स्थानांतरित करने के लिए प्रोटोटाइप, या इवेंट लूप के सिद्धांत पर कैसे वार किया जाए? इसका उत्तर सरल है - हम लाइब्रेरी-बाउंड एप्लिकेशन लिखते हैं।

क्यों प्रतिक्रिया के साथ काम करने वाले लंबे अनुभव वाली कंपनियां हैं? हां, क्योंकि एप्लिकेशन इस रिएक्ट की विशेषताओं पर अत्यधिक निर्भर है, और बटन को दोहराते समय कुछ भी नहीं तोड़ने के लिए, आपको अपने सिर को तोड़ना चाहिए कि कैसे परिवर्तन का पता लगाने के लिए, घटक पेड़ के रिएक्शन के अंदर काम करता है, और यह बटन को फिर से दबाने के कार्य से कैसे संबंधित है। (मैं मानता हूं, ये सभी विशेष मामले हैं ... और आपकी कंपनी में, क्या आप ढांचे के साथ काम करने के अनुभव के बिना विशेषज्ञ लेने के लिए तैयार हैं?)

भाषा का उपयोग करते हुए कार्यक्रम, भाषा नहीं। (मैककोनेल) एक
ढांचा एक उपकरण है, जीवन का एक तरीका नहीं है। (मार्टिन)

मोर्चे की दुनिया के लिए, ये शोध सबसे अच्छा खाली वाक्यांश हैं, और विपरीत साबित करने के लिए सबसे खराब चुनौती है। आइए आधिकारिक प्रतिक्रिया दस्तावेज देखें, और एक सरल टूडू-सूची एप्लिकेशन का एक उदाहरण देखें।

आधिकारिक प्रतिक्रिया वेबसाइट से टूडू-सूची का उदाहरण

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3> </h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
              ?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
             #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

“ सहारा और राज्य का उपयोग करके , आप एक छोटी सी टू-डू सूची एप्लिकेशन बना सकते हैं। इस उदाहरण में, तत्वों की वर्तमान सूची को ट्रैक करने के लिए राज्य का उपयोग किया जाता है ... "

नौसिखिए प्रोग्रामर के लिए (अर्थात, मुझे कुछ साल पहले), यह वाक्यांश स्वचालित रूप से आउटपुट उत्पन्न करता है:" यहां एक टूडू-सूची एप्लिकेशन का एक आदर्श उदाहरण है "। लेकिन घटक में राज्य को कौन संग्रहीत करता है? इसके लिए एक राज्य प्रबंधन पुस्तकालय है।

Redux प्रलेखन से एक टूडू-सूची का एक उदाहरण

हां, यह है कि कैसे आवेदन अधिक समझ में आ गया है और सरल (नहीं) है । क्या हम निर्भरता को सही दिशा में खींचने की कोशिश कर सकते हैं?

स्वतंत्र निर्णय

आइए, टूडू-लिस्ट की समस्या को फ्रंट-एंड के रूप में नहीं देखें, अर्थात, यह भूल जाएं कि हमें एचटीएमएल ("वेब एक विवरण है") आकर्षित करना होगा। हम अपनी आंखों से परिणाम की जांच नहीं कर पाएंगे, इसलिए हमें परीक्षण लिखना होगा (जैसा कि अंकल बॉब कहते हैं, "आप TDD का उपयोग कर सकते हैं")। और कार्य क्या है? टूडू-सूची क्या है? हम लिखने की कोशिश कर रहे हैं।

Todo.spec.ts

import { Todo } from './Todo';

describe('Todo', () => {
  let todo: Todo;

  beforeEach(() => {
    todo = new Todo('description');
  });

  it('+getItems() should returns Todo[]', () => {
    expect(todo.getTitle()).toBe('description');
  });

  it('+isCompleted() should returns completion flag', () => {
    expect(todo.isCompleted()).toBe(false);
  });

  it('+toggleCompletion() should invert completion flag', () => {
    todo.toggleCompletion();
    expect(todo.isCompleted()).toBe(true);
  });
});

TodoList.spec.ts

import { TodoList } from './TodoList';

describe('TodoList', () => {
  let todoList: TodoList;

  beforeEach(() => {
    todoList = new TodoList();
  });

  it('+getItems() should returns Todo[]', () => {
    expect(todoList.getItems()).toEqual([]);
  });

  it('+add() should create item and add to collection', () => {
    todoList.add('Write tests');
    expect(todoList.getItems()).toHaveLength(1);
  });

  it('+add() should create item with the description', () => {
    const description = 'Write tests';
    todoList.add(description);
    const [item] = todoList.getItems();
    expect(item.getTitle()).toBe(description);
  });

  it('+getCompletedItems() should not returns uncompleted Todo[]', () => {
    const description = 'Write tests';
    todoList.add(description);
    expect(todoList.getCompletedItems()).toEqual([]);
  });

  it('+getCompletedItems() should returns completed Todo[]', () => {
    const description = 'Write tests';
    todoList.add(description);
    const [item] = todoList.getItems();
    item.toggleCompletion();
    expect(todoList.getCompletedItems()).toEqual([item]);
  });

  it('+getUncompletedItems() should returns uncompleted Todo[]', () => {
    const description = 'Write tests';
    todoList.add(description);
    const [item] = todoList.getItems();
    expect(todoList.getUncompletedItems()).toEqual([item]);
  });

  it('+getUncompletedItems() should not returns completed Todo[]', () => {
    const description = 'Write tests';
    todoList.add(description);
    const [item] = todoList.getItems();
    item.toggleCompletion();
    expect(todoList.getUncompletedItems()).toEqual([]);
  });
});

export class Todo {
  private completed: boolean = false;

  constructor(private description: string) {}

  getTitle(): string {
    return this.description;
  }

  isCompleted(): boolean {
    return this.completed;
  }

  toggleCompletion(): void {
    this.completed = !this.completed;
  }
}

import { Todo } from './Todo';

export class TodoList {
  private items: Todo[] = [];

  getItems(): Todo[] {
    return this.items;
  }

  getCompletedItems(): Todo[] {
    return this.items.filter((todo) => todo.isCompleted());
  }

  getUncompletedItems(): Todo[] {
    return this.items.filter((todo) => !todo.isCompleted());
  }

  add(description: string): void {
    this.items.push(new Todo(description));
  }
}

हमें सूचनात्मक इंटरफेस के साथ दो सरल कक्षाएं मिलती हैं। यही बात है न? टेस्ट पास करते हैं। अब रिएक्ट उठाएं।

import React from 'react';

import { TodoList } from './core/TodoList';

export class App extends React.Component {
  todoList: TodoList = this.createTodoList();

  render(): any {
    return (
      <React.Fragment>
        <header>
          <h1>Todo List App</h1>
        </header>
        <main>
          <TodoListCmp todoList={this.todoList}></TodoListCmp>
          <AddTodoCmp todoList={this.todoList}></AddTodoCmp>
        </main>
      </React.Fragment>
    );
  }

  private createTodoList(): TodoList {
    const todoList = new TodoList();
    todoList.add('Initial created Todo');
    return todoList;
  }
}

export const TodoListCmp: React.FC<{ todoList: TodoList }> = ({ todoList }) => {
  return (
    <div>
      <h2>What to do?</h2>
      <ul>
        {todoList.getItems().map((todo) => (
          <li key={todo.getTitle()}>{todo.getTitle()}</li>
        ))}
      </ul>
    </div>
  );
};

export const AddTodoCmp: React.FC<{ todoList: TodoList }> = ({ todoList }) => {
  return <button onClick={() => todoList.add(`Todo ${todoList.getItems().length}`)}>Add</button>;
};

और सुनिश्चित करें कि ... कोई आइटम जोड़ना काम नहीं करता है। हम्म ... अब यह स्पष्ट है कि राज्य में सब कुछ क्यों लिखा जाना चाहिए - ताकि परिवर्तनों के बारे में जानने के बाद रिएक्ट घटक फिर से तैयार हो जाए। लेकिन क्या यह सभी संभावित सिद्धांतों का उल्लंघन करने और दृश्य घटक में तर्क रखने का एक कारण है? थोड़ा धैर्य और साहस। समस्या को हल करने के लिए, ~~एक अनंत लूप या~~ ऑब्जर्वर पैटर्न ~~में फोर्सअपडेट () कॉलिंग~~ एकदम सही है ।

मुझे आरएक्सजे लाइब्रेरी पसंद है, लेकिन मैं इसे कनेक्ट नहीं करूंगा, लेकिन हमारे काम के लिए जरूरी इसकी एपीआई कॉपी करें।

Observable.spec.ts

import { Observable, Subject } from './Observable';

describe('Observable', () => {
  let subject: Subject<any>;
  let observable: Observable<any>;

  beforeEach(() => {
    subject = new Subject();
    observable = subject.asObservable();
  });

  it('should call callback on next value', async () => {
    const spy = jasmine.createSpy();
    observable.subscribe(spy);
    subject.next({});
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('should not call callback on next value if unsubscribed', async () => {
    const spy = jasmine.createSpy();
    const subscription = observable.subscribe(spy);
    subscription.unsubscribe();
    subject.next({});
    await delay();
    expect(spy).not.toHaveBeenCalled();
  });

  it('should send to callback subject.next value', async () => {
    const spy = jasmine.createSpy();
    observable.subscribe(spy);
    const sendingValue = {};
    subject.next(sendingValue);
    await delay();
    expect(spy.calls.first().args[0]).toBe(sendingValue);
  });
});

function delay(timeoutInMs?: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, timeoutInMs));
}

Observable.ts

export interface Observable<T = unknown> {
  subscribe(onNext: (value: T) => void): Subscription;
}

export interface Subscription {
  unsubscribe(): void;
}

export class Subject<T = unknown> implements Observable<T> {
  protected callbackSet: Set<(value: T) => void> = new Set();

  asObservable(): Observable<T> {
    return this;
  }

  subscribe(onNext: (value: T) => void): Subscription {
    this.callbackSet.add(onNext);
    return { unsubscribe: () => this.callbackSet.delete(onNext) };
  }

  next(value: T): void {
    Promise.resolve().then(() => this.callbackSet.forEach((onNext) => onNext(value)));
  }
}

मेरी राय में, कुछ भी जटिल नहीं है। एक परीक्षण जोड़ें (परिवर्तनों की सूचना - वह तर्क है)।

  it('+TodoList.prototype.add() should emit changes', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    todoList.add('description');
    await delay();
    expect(spy).toHaveBeenCalled();
  });

आइए एक पल के लिए सोचें, लेकिन क्या एक टोडो तत्व में बदलाव से टोडोलिस्ट की स्थिति प्रभावित होती है? प्रभावित करता है - getCompletedItems / getUncompletedItems विधियों को तत्वों का एक अलग सेट वापस करना होगा। हो सकता है कि यह टॉडलिस्ट वर्ग को टॉगल कॉमप्लेक्शन में ले जाने लायक हो? यह एक बुरा विचार है - इस दृष्टिकोण के साथ, हमें एक नया टोडो-तत्व के बारे में हर सुविधा के लिए टोडलिस्ट को बढ़ाना होगा (हम इस पर बाद में लौटेंगे)। लेकिन परिवर्तनों के बारे में कैसे सीखना है, फिर से प्रेक्षक? चीजों को सरल बनाने के लिए, टोडो-तत्व को कॉलबैक के माध्यम से परिवर्तनों का संचार करने दें।

कार्यक्रम का पूर्ण संस्करण इस तरह दिखता है।

import React from 'react';
import { Observable, Subject } from 'src/utils/Observable';
import { generateId } from 'src/utils/generateId';

export class Todo {
  private completed: boolean = false;

  id: string = generateId();

  constructor(private description: string, private onCompletionToggle?: (todo: Todo) => void) {}

  getTitle(): string {
    return this.description;
  }

  isCompleted(): boolean {
    return this.completed;
  }

  toggleCompletion(): void {
    this.completed = !this.completed;
    this.onCompletionToggle?.(this);
  }
}

export class TodoList {
  private items: Todo[] = [];
  private changesSubject = new Subject();

  readonly changes: Observable = this.changesSubject.asObservable();

  getItems(): Todo[] {
    return this.items;
  }

  getCompletedItems(): Todo[] {
    return this.items.filter((todo) => todo.isCompleted());
  }

  getUncompletedItems(): Todo[] {
    return this.items.filter((todo) => !todo.isCompleted());
  }

  add(description: string): void {
    this.items.push(new Todo(description, () => this.changesSubject.next({})));
    this.changesSubject.next({});
  }
}

export class App extends React.Component {
  todoList: TodoList = this.createTodoList();

  render(): any {
    return (
      <React.Fragment>
        <header>
          <h1>Todo List App</h1>
        </header>
        <main>
          <TodoListCmp todoList={this.todoList}></TodoListCmp>
          <AddTodoCmp todoList={this.todoList}></AddTodoCmp>
        </main>
      </React.Fragment>
    );
  }

  componentDidMount(): void {
    this.todoList.changes.subscribe(() => this.forceUpdate());
  }

  private createTodoList(): TodoList {
    const todoList = new TodoList();
    todoList.add('Initial created Todo');
    return todoList;
  }
}

export const TodoListCmp: React.FC<{ todoList: TodoList }> = ({ todoList }) => {
  return (
    <div>
      <h2>What to do?</h2>
      <ul>
        {todoList.getUncompletedItems().map((todo) => (
          <TodoCmp key={todo.id} todo={todo}></TodoCmp>
        ))}
        {todoList.getCompletedItems().map((todo) => (
          <TodoCmp key={todo.id} todo={todo}></TodoCmp>
        ))}
      </ul>
    </div>
  );
};

export const TodoCmp: React.FC<{ todo: Todo }> = ({ todo }) => (
  <li
    style={{ textDecoration: todo.isCompleted() ? 'line-through' : '' }}
    onClick={() => todo.toggleCompletion()}
  >
    {todo.getTitle()}
  </li>
);

export const AddTodoCmp: React.FC<{ todoList: TodoList }> = ({ todoList }) => {
  return <button onClick={() => todoList.add(`Todo ${todoList.getItems().length}`)}>Add</button>;
};

ऐसा प्रतीत होता है कि फ्रेमवर्क से स्वतंत्र टूडू-सूची एप्लिकेशन को क्या देखना चाहिए। केवल सीमा पीएल है। आप कंसोल के लिए प्रदर्शन को लागू कर सकते हैं, या कोणीय का उपयोग कर सकते हैं।

शायद अनुप्रयोग का वर्तमान संस्करण इतना जटिल नहीं है कि यह सुनिश्चित कर सके कि एक स्वतंत्र दृष्टिकोण काम कर रहा है और अपनी ताकत का प्रदर्शन कर रहा है। इसलिए, हम अपनी कल्पना को अधिक या कम प्रशंसनीय टूडू-सूची विकास परिदृश्य से जोड़ने के लिए जोड़ते हैं।

ग्राहक से संपादन

अधिकांश परियोजनाओं का मुख्य दुःस्वप्न आवश्यकताओं को बदल रहा है। आप जानते हैं कि संपादन से बचा नहीं जा सकता है, और आप जानते हैं कि यह सामान्य है। लेकिन आप भविष्य के बदलावों के लिए कैसे तैयार होते हैं?

विशेष टोडो तत्व

OOP की प्रमुख विशेषताओं में से एक नए प्रकार की शुरूआत के माध्यम से समस्या को हल करने की क्षमता है। शायद यह सबसे शक्तिशाली ओओपी तकनीक है जो एक जटिल और बोझिल कार्यक्रम को एकल रूप से बाहर निकाल सकती है। उदाहरण के लिए, मुझे नहीं पता कि टोडो तत्व की क्या आवश्यकता है। इसका नाम बदलने में सक्षम होना आवश्यक हो सकता है, अतिरिक्त विशेषताओं को जोड़ना आवश्यक हो सकता है, इस तत्व को स्पेसएक्स सर्वर तक सीधे पहुंच के माध्यम से बदलना संभव हो सकता है ... लेकिन मुझे यकीन है कि आवश्यकताओं में बदलाव होगा, और मुझे विभिन्न प्रकार के टोडो की आवश्यकता होगी।

export class EditableTodo extends Todo {
  changeTitle(title: string): void {
    this.title = title;
    this.onChange?.(this);
  }
}

ऐसा लगता है कि एक विशेष प्रकार को प्रदर्शित करने के लिए, हमें दृश्य घटकों को भी बदलना होगा। व्यवहार में, मुझे मिले (और लिखे गए) घटक जिसमें एक लाख अलग-अलग स्थितियां जिराफ से एक मशीन ब्लॉक में एक डिव ब्लॉक को बदल देती हैं। इस समस्या से बचने के लिए, आप एक विशाल स्विच-केस सूची के साथ एक घटक बना सकते हैं। या विज़िटर पैटर्न और दोहरी प्रेषण लागू करें , और टोडो तत्व को खुद तय करने दें कि किस प्रकार के घटक को आकर्षित करना है।

export class Todo {
  id: string = '';

  constructor(
    protected title: string,
    private completed: boolean = false,
    protected onChange?: (todo: Todo) => void,
  ) {}

  getTitle(): string {
    return this.title;
  }

  isCompleted(): boolean {
    return this.completed;
  }

  toggleCompletion(): void {
    this.completed = !this.completed;
    this.onChange?.(this);
  }

  render(renderer: TodoRenderer): any {
    return renderer.renderSimpleTodo(this);
  }
}

export class EditableTodo extends Todo {
  changeTitle(title: string): void {
    this.title = title;
    this.onChange?.(this);
  }

  render(renderer: TodoRenderer): any {
    return renderer.renderEditableTodo(this);
  }
}

export class TodoRenderer {
  renderSimpleTodo(todo: Todo): any {
    return <SimpleTodoCmp todo={todo}></SimpleTodoCmp>;
  }

  renderFixedTodo(todo: Todo): any {
    return <FixedTodoCmp todo={todo}></FixedTodoCmp>;
  }

  renderEditableTodo(todo: EditableTodo): any {
    return <EditableTodoCmp todo={todo}></EditableTodoCmp>;
  }
}

दोहरी प्रेषण विकल्प विशेष रूप से उपयोगी होता है जब एक प्रकार के आइटम में अलग-अलग विचार होते हैं। आप उन्हें अलग-अलग टोडरेंडर को रेंडर विधि में बदलकर बदल सकते हैं।

अब हम तैयार हैं। "विशेष" टोडो तत्वों के लिए नई मांगों का डर गायब हो गया है। मुझे लगता है कि डेवलपर्स खुद पहल कर सकते हैं, और कुछ ऐसे फीचर्स पेश कर सकते हैं जिनके लिए नए प्रकारों की शुरुआत की आवश्यकता होती है, जो अब नए कोड और मौजूदा में न्यूनतम परिवर्तन लिखकर जोड़े जाते हैं।

सर्वर पर डेटा की बचत

सर्वर के साथ बातचीत के बिना किस तरह का अनुप्रयोग है? बेशक, आपको HTTP के माध्यम से हमारी सूची को बचाने में सक्षम होना चाहिए - एक और नई आवश्यकता। हम समस्या को हल करने की कोशिश कर रहे हैं।

AppTodoList.spec.ts

import { delay } from 'src/utils/delay';
import { TodoType } from '../core/TodoFactory';
import { AppTodoList } from './AppTodoList';

describe('AppTodoList', () => {
  let todoList: AppTodoList;

  beforeEach(() => {
    todoList = new AppTodoList({
      getItems: async () => [{ type: TodoType.Simple, title: 'Loaded todo', completed: false }],
      save: () => delay(),
    });
  });

  it('+resolve() should load saved todo items', async () => {
    await todoList.resolve();
    expect(todoList.getItems().length).toBeGreaterThan(0);
  });

  it('+resolve() should emit changes', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    await todoList.resolve();
    await delay(1);
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should emit changes', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    todoList.add({ title: '' });
    await delay(1);
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should emit changes after resolve()', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    await todoList.resolve();
    todoList.add({ title: '' });
    await delay(1);
    expect(spy).toHaveBeenCalledTimes(2);
  });

  it('+todo.onChange() should emit changes', async () => {
    await todoList.resolve();
    await delay(1);
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    const [todo] = todoList.getItems();
    todo.toggleCompletion();
    await delay(1);
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should call TodoListApi.save', async () => {
    const spy = jasmine.createSpy();
    todoList = new AppTodoList({ getItems: async () => [], save: async () => spy() });
    todoList.add({ title: '' });
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+todo.onChange() should call TodoListApi.save', async () => {
    const spy = jasmine.createSpy();
    todoList = new AppTodoList({ getItems: async () => [{ title: '' }], save: async () => spy() });
    await todoList.resolve();
    const [todo] = todoList.getItems();
    todo.toggleCompletion();
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should save todoList state on success and rollback to it on error', async () => {
    const api = { getItems: async () => [], save: () => Promise.resolve() };
    todoList = new AppTodoList(api);
    todoList.add({ title: '1' });
    await delay(1);
    const savedData = JSON.stringify(todoList.getItems());
    api.save = () => Promise.reject('Mock saving failed');
    todoList.add({ title: '2' });
    expect(todoList.getItems()).toHaveLength(2);
    await delay(1);
    expect(JSON.stringify(todoList.getItems())).toBe(savedData);
  });
});

export interface TodoListApi {
  getItems(): Promise<TodoParams[]>;
  save(todoParamsList: TodoParams[]): Promise<void>;
}

export class AppTodoList implements TodoList {
  private todoFactory = new TodoFactory();
  private changesSubject = new Subject();

  changes: Observable = this.changesSubject.asObservable();

  private state: TodoList = new TodoListImp();
  private subscription: Subscription = this.state.changes.subscribe(() => this.onStateChanges());
  private synchronizedTodoParamsList: TodoParams[] = [];

  constructor(private api: TodoListApi) {}

  async resolve(): Promise<void> {
    const todoParamsList = await this.api.getItems();
    this.updateState(todoParamsList);
  }

  private updateState(todoParamsList: TodoParams[]): void {
    const todoList = new TodoListImp(todoParamsList);
    this.state = todoList;
    this.subscription.unsubscribe();
    this.subscription = todoList.changes.subscribe(() => this.onStateChanges());
    this.synchronizedTodoParamsList = todoParamsList;
    this.changesSubject.next({});
  }

  private async onStateChanges(): Promise<void> {
    this.changesSubject.next({});
    try {
      const params = this.state.getItems().map((todo) => this.todoFactory.serializeTodo(todo));
      await this.api.save(params);
      this.synchronizedTodoParamsList = params;
    } catch {
      this.updateState(this.synchronizedTodoParamsList);
    }
  }

  destroy(): void {
    this.subscription.unsubscribe();
  }

  getItems(): Todo[] {
    return this.state.getItems();
  }

  getCompletedItems(): Todo[] {
    return this.state.getCompletedItems();
  }

  getUncompletedItems(): Todo[] {
    return this.state.getUncompletedItems();
  }

  add(todoParams: TodoParams): void {
    this.state.add(todoParams);
  }
}

हमें नहीं पता कि एप्लिकेशन को कैसे व्यवहार करना चाहिए। सफल होने और परिवर्तनों को प्रदर्शित करने के लिए सहेजें की प्रतीक्षा करें? परिवर्तनों को प्रदर्शित करने की अनुमति दें, और त्रुटि के मामले में, सिंक्रनाइज़ राज्य में वापस जाएं? या त्रुटियों को पूरी तरह से अनदेखा करें? सबसे अधिक संभावना है, ग्राहक को भी यह पता नहीं है। इसलिए, आवश्यकताओं में परिवर्तन अपरिहार्य है, लेकिन उन्हें संरक्षण के लिए जिम्मेदार केवल एक वर्ग को प्रभावित करना चाहिए। और रास्ते में अगला एडिट।

इतिहास बदलें

"हमें कार्रवाई / रद्द करने की क्षमता की आवश्यकता है" ...

ऐसा लगता है कि नए संपादन की एक लहर हमें आश्चर्यचकित करती है। लेकिन किसी भी मामले में, आप परीक्षणों का त्याग नहीं कर सकते। अब यह पूरी तरह से स्पष्ट नहीं है कि वंशानुक्रम पदानुक्रम बेहतर अनुकूल है, और क्या विरासत आमतौर पर उपयुक्त है। इसलिए, कुछ भी बुरा नहीं होगा यदि हम केवल हमारे गंदे वर्ग को पूरक करते हैं (हम इसे कार्यान्वयन विवरण पर विचार करेंगे), एकमात्र जिम्मेदारी के सिद्धांत का त्याग करते हुए।

TodoListHistory.spec.ts

import { TodoParams } from 'src/core/TodoFactory';
import { delay } from 'src/utils/delay';
import { TodoListHistory } from './TodoListHistory';

describe('TodoListHistory', () => {
  let history: TodoListHistory;

  beforeEach(() => {
    history = new TodoListHistory();
  });

  it('+getState() should returns TodoParams[]', () => {
    expect(history.getState()).toEqual([]);
  });

  it('+setState() should rewrite current state', () => {
    const newState = [{ title: '' }] as TodoParams[];
    history.setState(newState);
    expect(history.getState()).toBe(newState);
  });

  it('+hasPrev() should returns false on init', () => {
    expect(history.hasPrev()).toBe(false);
  });

  it('+hasPrev() should returns true after setState()', () => {
    history.setState([]);
    expect(history.hasPrev()).toBe(true);
  });

  it('+switchToPrev() should switch on prev state', () => {
    const prevState = [{ title: '' }] as TodoParams[];
    history.setState(prevState);
    history.setState([]);
    history.switchToPrev();
    expect(history.getState()).toBe(prevState);
  });

  it('+hasPrev() should returns false after switch to first', () => {
    history.setState([]);
    history.switchToPrev();
    expect(history.hasPrev()).toBe(false);
  });

  it('+hasNext() should returns false on init', () => {
    expect(history.hasNext()).toBe(false);
  });

  it('+hasNext() should returns true after switchToPrev()', () => {
    history.setState([]);
    history.switchToPrev();
    expect(history.hasNext()).toBe(true);
  });

  it('+switchToNext() should switch on next state', () => {
    const prevState = [{ title: '' }] as TodoParams[];
    history.setState([]);
    history.setState(prevState);
    history.switchToPrev();
    history.switchToNext();
    expect(history.getState()).toBe(prevState);
  });

  it('+hasNext() should returns false after switchToNext()', () => {
    history.setState([]);
    history.switchToPrev();
    history.switchToNext();
    expect(history.hasNext()).toBe(false);
  });

  it('+hasNext() should returns false after setState()', () => {
    history.setState([]);
    history.switchToPrev();
    history.setState([]);
    expect(history.hasNext()).toBe(false);
  });

  it('+switchToPrev() should switch on prev state after setState()', () => {
    const prevState = [{ title: '' }] as TodoParams[];
    history.setState(prevState);
    history.setState([]);
    history.switchToPrev();
    history.setState([]);
    history.switchToPrev();
    expect(history.getState()).toBe(prevState);
  });

  it('+setState() should not emit changes', async () => {
    const spy = jasmine.createSpy();
    history.changes.subscribe(spy);
    history.setState([]);
    await delay();
    expect(spy).not.toHaveBeenCalled();
  });

  it('+switchToPrev() should emit changes', async () => {
    history.setState([]);
    await delay();
    const spy = jasmine.createSpy();
    history.changes.subscribe(spy);
    history.switchToPrev();
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+switchToPrev() should emit changes', async () => {
    history.setState([]);
    history.switchToPrev();
    await delay();
    const spy = jasmine.createSpy();
    history.changes.subscribe(spy);
    history.switchToNext();
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+reset() should reset history and apply initial state', async () => {
    history.setState([]);
    expect(history.hasPrev()).toBe(true);
    const initState = [{ title: '' }] as TodoParams[];
    history.reset(initState);
    expect(history.hasPrev()).toBe(false);
    expect(history.getState()).toBe(initState);
  });
});

AppTodoList.spec.ts

import { delay } from 'src/utils/delay';
import { TodoType } from '../core/TodoFactory';
import { AppTodoList } from './AppTodoList';

describe('AppTodoList', () => {
  let todoList: AppTodoList;

  beforeEach(() => {
    todoList = new AppTodoList({
      getItems: async () => [{ type: TodoType.Simple, title: 'Loaded todo', completed: false }],
      save: () => delay(),
    });
  });

  it('+resolve() should load saved todo items', async () => {
    await todoList.resolve();
    expect(todoList.getItems().length).toBeGreaterThan(0);
  });

  it('+resolve() should emit changes', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    await todoList.resolve();
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should emit changes', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    todoList.add({ title: '' });
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should emit changes after resolve()', async () => {
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    await todoList.resolve();
    todoList.add({ title: '' });
    await delay();
    expect(spy).toHaveBeenCalledTimes(2);
  });

  it('+todo.onChange() should emit changes', async () => {
    await todoList.resolve();
    await delay();
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    const [todo] = todoList.getItems();
    todo.toggleCompletion();
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should call TodoListApi.save', async () => {
    const spy = jasmine.createSpy();
    todoList = new AppTodoList({ getItems: async () => [], save: async () => spy() });
    todoList.add({ title: '' });
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+todo.onChange() should call TodoListApi.save', async () => {
    const spy = jasmine.createSpy();
    todoList = new AppTodoList({ getItems: async () => [{ title: '' }], save: async () => spy() });
    await todoList.resolve();
    const [todo] = todoList.getItems();
    todo.toggleCompletion();
    await delay();
    expect(spy).toHaveBeenCalled();
  });

  it('+add() should ignore error on save', async () => {
    const api = { getItems: async () => [], save: () => Promise.resolve() };
    todoList = new AppTodoList(api);
    todoList.add({ title: '1' });
    await delay();
    api.save = jasmine.createSpy().and.returnValue(Promise.reject('Mock saving failed'));
    todoList.add({ title: '2' });
    expect(todoList.getItems()).toHaveLength(2);
    await delay();
    expect(api.save).toHaveBeenCalled();
    expect(todoList.getItems()).toHaveLength(2);
  });

  it('+resolve() should provide current todoList state to history', async () => {
    expect(todoList.getItems()).toHaveLength(0);
    expect(todoList.getHistory().getState()).toHaveLength(0);
    await todoList.resolve();
    await delay();
    expect(todoList.getItems()).toHaveLength(1);
    expect(todoList.getHistory().getState()).toHaveLength(1);
  });

  it('+add() should provide current todoList state to history', async () => {
    expect(todoList.getItems()).toHaveLength(0);
    expect(todoList.getHistory().getState()).toHaveLength(0);
    todoList.add({ title: '' });
    await delay();
    expect(todoList.getItems()).toHaveLength(1);
    expect(todoList.getHistory().getState()).toHaveLength(1);
  });

  it('+history.switchToPrev() should change todoList state on prev', async () => {
    todoList.add({ title: '' });
    await delay();
    expect(todoList.getItems()).toHaveLength(1);
    expect(todoList.getHistory().getState()).toHaveLength(1);
    todoList.getHistory().switchToPrev();
    await delay();
    expect(todoList.getHistory().getState()).toHaveLength(0);
    expect(todoList.getItems()).toHaveLength(0);
  });

  it('+history.switchToPrev() should change todoList state on prev after resolve()', async () => {
    await todoList.resolve();
    todoList.add({ title: '' });
    await delay();
    expect(todoList.getItems()).toHaveLength(2);
    expect(todoList.getHistory().getState()).toHaveLength(2);
    todoList.getHistory().switchToPrev();
    await delay();
    expect(todoList.getHistory().getState()).toHaveLength(1);
    expect(todoList.getItems()).toHaveLength(1);
  });

  it('+add() should emit changes after history.switchToPrev()', async () => {
    todoList.add({ title: '' });
    todoList.getHistory().switchToPrev();
    await delay();
    const spy = jasmine.createSpy();
    todoList.changes.subscribe(spy);
    todoList.add({ title: '' });
    await delay();
    expect(spy).toHaveBeenCalled();
  });
});

import { TodoParams } from 'src/core/TodoFactory';
import { Observable, Subject } from 'src/utils/Observable';

export class TodoListHistory {
  private changesSubject = new Subject();
  private history: TodoParams[][] = [this.state];

  changes: Observable = this.changesSubject.asObservable();

  constructor(private state: TodoParams[] = []) {}

  reset(state: TodoParams[]): void {
    this.state = state;
    this.history = [this.state];
  }

  getState(): TodoParams[] {
    return this.state;
  }

  setState(state: TodoParams[]): void {
    this.deleteHistoryAfterCurrentState();
    this.state = state;
    this.history.push(state);
  }

  private nextState(state: TodoParams[]): void {
    this.state = state;
    this.changesSubject.next({});
  }

  private deleteHistoryAfterCurrentState(): void {
    this.history = this.history.slice(0, this.getCurrentStateIndex() + 1);
  }

  hasPrev(): boolean {
    return this.getCurrentStateIndex() > 0;
  }

  hasNext(): boolean {
    return this.getCurrentStateIndex() < this.history.length - 1;
  }

  switchToPrev(): void {
    const prevStateIndex = Math.max(this.getCurrentStateIndex() - 1, 0);
    this.nextState(this.history[prevStateIndex]);
  }

  switchToNext(): void {
    const nextStateIndex = Math.min(this.getCurrentStateIndex() + 1, this.history.length - 1);
    this.nextState(this.history[nextStateIndex]);
  }

  private getCurrentStateIndex(): number {
    return this.history.indexOf(this.state);
  }
}

import { Observable, Subject, Subscription } from 'src/utils/Observable';
import { Todo } from '../core/Todo';
import { TodoFactory, TodoParams } from '../core/TodoFactory';
import { TodoList, TodoListImp } from '../core/TodoList';
import { TodoListApi } from './TodoListApi';
import { HistoryControl, TodoListHistory } from './TodoListHistory';

export class AppTodoList implements TodoList {
  private readonly todoFactory = new TodoFactory();
  private readonly history: TodoListHistory = new TodoListHistory();

  private changesSubject = new Subject();
  readonly changes: Observable = this.changesSubject.asObservable();

  private state: TodoList = new TodoListImp();
  private stateSubscription: Subscription = this.state.changes.subscribe(() =>
    this.onStateChanges(),
  );
  private historySubscription = this.history.changes.subscribe(() => this.onHistoryChanges());

  constructor(private api: TodoListApi) {}

  private onStateChanges(): void {
    const params = this.state.getItems().map((todo) => this.todoFactory.serializeTodo(todo));
    this.history.setState(params);
    this.api.save(params).catch(() => {});
    this.changesSubject.next({});
  }

  private onHistoryChanges(): void {
    const params = this.history.getState();
    this.updateStateTodoList(params);
    this.api.save(params).catch(() => {});
  }

  private updateStateTodoList(todoParamsList: TodoParams[]): void {
    const todoList = new TodoListImp(todoParamsList);
    this.state = todoList;
    this.stateSubscription.unsubscribe();
    this.stateSubscription = this.state.changes.subscribe(() => this.onStateChanges());
    this.changesSubject.next({});
  }

  async resolve(): Promise<void> {
    const todoParamsList = await this.api.getItems();
    this.history.reset(todoParamsList);
    this.updateStateTodoList(todoParamsList);
  }

  destroy(): void {
    this.stateSubscription.unsubscribe();
    this.historySubscription.unsubscribe();
  }

  getHistory(): HistoryControl<TodoParams[]> {
    return this.history;
  }

  getItems(): Todo[] {
    return this.state.getItems();
  }

  getCompletedItems(): Todo[] {
    return this.state.getCompletedItems();
  }

  getUncompletedItems(): Todo[] {
    return this.state.getUncompletedItems();
  }

  add(todoParams: TodoParams): void {
    this.state.add(todoParams);
  }
}

चूंकि परिवर्तन इतिहास बहुत समान है, इसलिए टूडू-सूची इतिहास के प्रबंधन को आधार वर्ग में अलग करें।

import { Todo } from 'src/core/Todo';
import { Observable, Subject, Subscription } from 'src/utils/Observable';
import { TodoFactory, TodoParams } from '../core/TodoFactory';
import { TodoList, TodoListImp } from '../core/TodoList';
import { HistoryControl, HistoryState } from './HistoryState';

export class HistoricalTodoList implements TodoList, HistoryControl {
  protected readonly todoFactory = new TodoFactory();
  protected readonly history = new HistoryState<TodoParams[]>([]);

  private changesSubject: Subject = new Subject();
  readonly changes: Observable = this.changesSubject.asObservable();

  private state: TodoList = new TodoListImp();
  private stateSubscription: Subscription = this.state.changes.subscribe(() =>
    this.onStateChanged(this.getSerializedState()),
  );

  constructor() {}

  protected onStateChanged(params: TodoParams[]): void {
    this.history.addState(params);
    this.changesSubject.next({});
  }

  protected onHistorySwitched(): void {
    this.updateState(this.history.getState());
  }

  protected updateState(todoParamsList: TodoParams[]): void {
    this.state = new TodoListImp(todoParamsList);
    this.updateStateSubscription();
    this.changesSubject.next({});
  }

  private updateStateSubscription(): void {
    this.stateSubscription.unsubscribe();
    this.stateSubscription = this.state.changes.subscribe(() =>
      this.onStateChanged(this.getSerializedState()),
    );
  }

  private getSerializedState(): TodoParams[] {
    return this.state.getItems().map((todo) => this.todoFactory.serializeTodo(todo));
  }

  destroy(): void {
    this.stateSubscription.unsubscribe();
  }

  getItems(): Todo[] {
    return this.state.getItems();
  }

  getCompletedItems(): Todo[] {
    return this.state.getCompletedItems();
  }

  getUncompletedItems(): Todo[] {
    return this.state.getUncompletedItems();
  }

  add(todoParams: TodoParams): void {
    this.state.add(todoParams);
  }

  canUndo(): boolean {
    return this.history.hasPrev();
  }

  canRedo(): boolean {
    return this.history.hasNext();
  }

  undo(): void {
    this.history.switchToPrev();
    this.onHistorySwitched();
  }

  redo(): void {
    this.history.switchToNext();
    this.onHistorySwitched();
  }
}

import { TodoParams } from 'src/core/TodoFactory';
import { HistoricalTodoList } from './HistoricalTodoList';
import { TodoListApi } from './TodoListApi';

export class ResolvableTodoList extends HistoricalTodoList {
  constructor(private api: TodoListApi) {
    super();
  }

  async resolve(): Promise<void> {
    const todoParamsList = await this.api.getItems();
    this.history.reset(todoParamsList);
    this.updateState(todoParamsList);
  }

  protected onStateChanged(params: TodoParams[]): void {
    super.onStateChanged(params);
    this.api.save(params).catch(() => this.undo());
  }

  protected onHistorySwitched(): void {
    super.onHistorySwitched();
    this.api.save(this.history.getState()).catch(() => {});
  }
}

संरक्षण समस्या का समाधान खुद ही आ गया। अब हम इस बारे में चिंता नहीं कर सकते हैं कि ग्राहक लंबी अवधि में किस संरक्षण रणनीति का चयन करेंगे। बेस क्लास का विस्तार करते हुए, आप उसे चुनने के लिए सभी 3 विकल्प प्रदान कर सकते हैं।

सारांश

ऐसा लगता है कि हमारी टूडू सूची से हमें Google Keep का एक छोटा प्रोटोटाइप मिल गया है। एप्लिकेशन लॉन्च करने के लिए रिपॉजिटरी से लिंक करें या कमिट के इतिहास पर जाएं।

इस उदाहरण को ज्यादातर फ्रंट-एंड एप्लिकेशन से मौलिक रूप से क्या अलग करता है? हम पुस्तकालयों पर निर्भर नहीं थे, इसलिए, एक व्यक्ति जिसने कभी भी रिएक्ट के साथ काम नहीं किया है, वह इस एप्लिकेशन को समझ सकता है। हमारे निर्णय केवल परिणाम प्राप्त करने के उद्देश्य से थे, फ्रेमवर्क के विवरण पर ध्यान भंग किए बिना, इसलिए कोड कम या ज्यादा समस्या को हल करता है। हम नए प्रकार के टोडो तत्वों को जोड़ना आसान बनाने में कामयाब रहे, और हम संरक्षण रणनीति को बदलने के लिए तैयार हैं।

हमें किन कठिनाइयों का सामना करना पड़ा? हमने फ्रेमवर्क के संदर्भ के बिना ऑब्जर्वर पैटर्न का उपयोग करके दृश्य को अपडेट करने की समस्या को हल किया। जैसा कि यह निकला, इस पैटर्न के आवेदन को अभी भी मुख्य समस्या को हल करने की आवश्यकता थी (भले ही हमें HTML खींचने की आवश्यकता नहीं थी)। इसलिए, हमने फ्रेमवर्क में निर्मित परिवर्तन का पता लगाने वाली प्रणाली की "सेवाओं" को छोड़ कर लागत का अनुमान नहीं लगाया था।

मैं इस बात पर जोर देना चाहूंगा कि लेखन परीक्षण में कोई कठिनाई नहीं थी। एक सूचनात्मक इंटरफ़ेस के साथ सरल स्वतंत्र वस्तुओं का परीक्षण एक खुशी है। कोड की जटिलता केवल कार्य और मेरे कौशल (या वक्रता) पर निर्भर करती थी।

डेवलपर के स्तर के बारे में क्या जो इसे संभालेंगे? क्या जूनियर रिएक्टर डेवलपर ऐसा समाधान लिख सकता है? "प्रोग्रामिंग एक शिल्प की तरह अधिक है", इसलिए ओओपी और पैटर्न का उपयोग करने के अभ्यास के बिना, मुझे लगता है कि यह मुश्किल होगा। लेकिन आप और आपकी कंपनी तय करती है कि आप किसमें निवेश करते हैं। क्या आप OOP का अभ्यास करते हैं या अगले ढांचे की पेचीदगियों को समझते हैं? मैं केवल अनुभवी प्रोग्रामरों के साहित्यिक कार्यों की प्रासंगिकता के बारे में आश्वस्त हो गया, और यह दिखाया कि सामने की क्षमता पर क्लासिक्स की सलाह का उपयोग कैसे शुरू करें।

पढ़ने के लिए धन्यवाद!

स्वतंत्र मोर्चा