GoF, Arsitektur Murni, Kode Sempurna - Buku Pegangan Programmer Sejati. Tetapi di dunia front-end, banyak ide dari buku-buku ini tidak tersedia. Paling tidak kemiripan dengan dunia nyata sangat sulit ditemukan. Mungkin frontend modern lebih dulu? Mungkin pemrograman "fungsional" dan Bereaksi telah membuktikan keunggulan mereka atas OOP? Dalam artikel ini, saya ingin memberikan contoh aplikasi daftar-todo yang saya coba terapkan sesuai dengan prinsip dan pendekatan yang dijelaskan dalam buku-buku klasik.Ketergantungan kerangka kerja
Kerangka kerja adalah landasan dari front modern. Pada lowongan hh.ru adalah React vs Angular vs Vue developer. Saya bekerja dengan masing-masing kerangka kerja ini, dan untuk waktu yang sangat lama saya tidak bisa mengerti mengapa saya harus bekerja dengan Vue dari 3 tahun untuk mewarnai ulang tombol dari merah ke ungu? Mengapa saya perlu tahu cara mewarisi prototipe, atau cara kerja loop untuk memindahkan tombol yang sama dari sudut kiri ke kanan? Jawabannya sederhana - kami menulis aplikasi yang terikat perpustakaan.Mengapa perusahaan dengan pengalaman panjang bekerja dengan React? Ya, karena aplikasi ini sangat bergantung pada fitur Bereaksi itu sendiri, dan agar tidak merusak apa pun saat mengecat ulang sebuah tombol, Anda harus menghancurkan kepala Anda mengenai bagaimana deteksi perubahan, rendering dari komponen pohon bekerja di dalam React, dan bagaimana hubungannya dengan tugas mengecat ulang tombol. (Saya setuju, ini semua adalah kasus khusus ... Dan di perusahaan Anda, apakah Anda siap untuk mengambil spesialis tanpa pengalaman bekerja dengan kerangka kerja?)Program menggunakan bahasa, bukan bahasa. (McConnell)
Kerangka kerja adalah alat, bukan cara hidup. (Martin)
Bagi dunia depan, tesis-tesis ini adalah frasa kosong terbaik, dan paling buruk tantangan untuk membuktikan sebaliknya. Mari kita lihat dokumentasi Bereaksi resmi, dan lihat contoh aplikasi todo-list sederhana.Contoh daftar todo dari situs web Bereaksi resmiclass 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>
);
}
}
“Menggunakan alat peraga dan negara , Anda dapat membuat aplikasi daftar hal yang harus dilakukan. Dalam contoh ini, negara digunakan untuk melacak daftar elemen saat ini ... "Untuk programmer pemula (yaitu, saya beberapa tahun yang lalu), frasa ini secara otomatis menghasilkan output:" Ini adalah contoh ideal dari aplikasi daftar todo ". Tapi siapa yang menyimpan negara dalam komponen ?! Untuk ini ada perpustakaan manajemen negara.Contoh daftar tugas dari dokumentasi ReduxYa, begitulah cara aplikasi menjadi jauh lebih mudah dipahami dan lebih sederhana (tidak) . Bisakah kita mencoba menggambar dependensi ke arah yang benar?Keputusan independen
Mari kita lihat masalah daftar todo bukan sebagai front-end, yaitu, lupakan bahwa kita perlu menggambar HTML (“web is a detail”). Kami tidak akan dapat memeriksa hasilnya dengan mata kami, jadi kami harus menulis tes (seperti kata Paman Bob, "TDD dapat diterapkan kemudian"). Dan apa tugasnya? Apa itu daftar todo? Kami sedang mencoba menulis.Todo.spec.tsimport { 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.tsimport { 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));
}
}
Kami mendapatkan dua kelas sederhana dengan antarmuka informatif. Apakah itu semuanya? Tes lulus. Sekarang ambil Bereaksi.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>;
};
Dan pastikan bahwa ... Menambahkan item tidak berfungsi. Hmm ... Sekarang jelas mengapa semuanya harus ditulis dalam keadaan - sehingga komponen Bereaksi redraws setelah mempelajari tentang perubahan. Tetapi apakah ini alasan untuk melanggar semua prinsip yang mungkin dan menempatkan logika dalam komponen tampilan? Sedikit kesabaran dan keberanian. Untuk mengatasi masalah ini, memanggil forceUpdate () dalam loop tak terbatas atau pola Observer sempurna .Saya suka perpustakaan RxJs, tetapi saya tidak akan menghubungkannya, tetapi cukup salin API-nya yang diperlukan untuk tugas kami.Observable.spec.tsimport { 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));
}
Diamatiexport 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)));
}
}
Menurut saya, tidak ada yang terlalu rumit. Tambahkan tes (pemberitahuan perubahan - itu adalah logika). it('+TodoList.prototype.add() should emit changes', async () => {
const spy = jasmine.createSpy();
todoList.changes.subscribe(spy);
todoList.add('description');
await delay();
expect(spy).toHaveBeenCalled();
});
Mari kita berpikir sejenak, tetapi apakah perubahan dalam elemen Todo memengaruhi status TodoList? Mempengaruhi - metode getCompletedItems / getUncompletedItems harus mengembalikan elemen yang berbeda. Mungkin ada baiknya memindahkan toggleCompletion ke kelas TodoList? Itu adalah ide yang buruk - dengan pendekatan ini, kita harus mengembang TodoList untuk setiap fitur mengenai elemen-Todo baru (kita akan kembali ke sini nanti). Tapi bagaimana cara belajar tentang perubahan, lagi-lagi Pengamat? Untuk mempermudah, biarkan elemen-Todo itu sendiri mengkomunikasikan perubahan melalui panggilan balik.Versi lengkap dari program ini terlihat seperti ini.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>;
};
Ini tampaknya seperti apa aplikasi todo-list yang independen dari kerangka kerja seharusnya. Satu-satunya batasan adalah PL. Anda dapat mengimplementasikan tampilan untuk konsol, atau menggunakan Angular.Mungkin versi aplikasi saat ini tidak cukup kompleks untuk memastikan bahwa pendekatan independen berfungsi dan menunjukkan kekuatannya. Oleh karena itu, kami akan menghubungkan imajinasi kami untuk mensimulasikan skenario pengembangan todo-list yang kurang lebih masuk akal.Suntingan dari pelanggan
Mimpi buruk utama sebagian besar proyek adalah mengubah persyaratan. Anda tahu bahwa pengeditan tidak dapat dihindari, dan Anda tahu bahwa ini normal. Tetapi bagaimana Anda mempersiapkan perubahan di masa depan?Elemen Todo Khusus
Salah satu fitur utama dari OOP adalah kemampuan untuk menyelesaikan masalah melalui pengenalan tipe baru. Mungkin ini adalah teknik OOP paling kuat yang bisa dengan sendirinya menarik keluar program yang rumit dan rumit. Misalnya, saya tidak tahu apa yang diperlukan dari elemen Todo. Mungkin perlu untuk dapat mengubah namanya, mungkin perlu menambahkan atribut tambahan, dimungkinkan untuk mengubah elemen ini melalui akses langsung ke server SpaceX ... Tapi saya yakin bahwa persyaratan akan berubah, dan saya akan memerlukan berbagai jenis Todo.export class EditableTodo extends Todo {
changeTitle(title: string): void {
this.title = title;
this.onChange?.(this);
}
}
Tampaknya untuk menampilkan tipe khusus, kita juga perlu mengubah komponen tampilan. Dalam praktiknya, saya bertemu (dan menulis) komponen di mana sejuta kondisi berbeda mengubah blok div dari jerapah menjadi senapan mesin. Untuk menghindari masalah ini, Anda dapat membuat komponen hoc dengan daftar case switch yang besar. Atau terapkan pola Pengunjung dan pengiriman ganda, dan biarkan elemen Todo menentukan sendiri jenis komponen yang akan diambil.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>;
}
}
Opsi pengiriman ganda sangat berguna ketika satu jenis barang memiliki tampilan yang berbeda. Anda dapat mengubahnya dengan mengganti TodoRenderers yang berbeda ke dalam metode render.Sekarang kita siap. Ketakutan akan permintaan baru untuk elemen "spesial" Todo telah menghilang. Saya pikir para pengembang sendiri dapat mengambil inisiatif, dan menawarkan beberapa fitur yang memerlukan pengenalan tipe baru, yang sekarang ditambahkan dengan menulis kode baru dan sedikit perubahan pada yang sudah ada.Menyimpan data ke server
Apa jenis aplikasi tanpa berinteraksi dengan server? Tentu saja, Anda harus dapat menyimpan daftar kami melalui HTTP - persyaratan baru lainnya. Kami mencoba menyelesaikan masalah.AppTodoList.spec.tsimport { 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);
}
}
Kami tidak tahu bagaimana seharusnya aplikasi itu berlaku. Tunggu sampai save berhasil dan tampilkan perubahan? Izinkan perubahan ditampilkan, dan jika terjadi kesalahan, gulung kembali ke status tersinkronisasi? Atau abaikan simpan kesalahan sama sekali? Kemungkinan besar, pelanggan juga tidak tahu ini. Oleh karena itu, perubahan pada persyaratan tidak bisa dihindari, tetapi mereka harus memengaruhi hanya satu kelas yang bertanggung jawab atas konservasi. Dan di jalan edit selanjutnya.Ubah Sejarah
“Kami membutuhkan kemampuan untuk membatalkan / mengulangi tindakan” ...Tampaknya gelombang suntingan baru mengejutkan kami. Tetapi bagaimanapun juga, Anda tidak dapat mengorbankan tes. Sekarang benar-benar tidak jelas hierarki warisan mana yang lebih cocok, dan apakah warisan umumnya cocok. Oleh karena itu, tidak ada hal buruk yang akan terjadi jika kita hanya menambah kelas kotor kita (kita akan menganggap ini detail implementasi), mengorbankan prinsip tanggung jawab tunggal.TodoListHistory.spec.tsimport { 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.tsimport { 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);
}
}
Karena riwayat perubahan hampir sama, mari kita pisahkan manajemen riwayat daftar tugas ke dalam kelas dasar.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(() => {});
}
}
Solusi untuk masalah konservasi datang dengan sendirinya. Sekarang kita tidak bisa khawatir tentang strategi konservasi apa yang akan dipilih pelanggan dalam jangka panjang. Anda dapat memberinya 3 opsi untuk dipilih, memperluas kelas dasar.Ringkasan
Tampaknya dari daftar todo kami, kami memiliki prototipe kecil dari Google Keep. Tautkan ke repositori untuk meluncurkan aplikasi atau melihat riwayat commit.Apa yang membedakan secara mendasar contoh ini dari sebagian besar aplikasi front-end? Kami tidak bergantung pada perpustakaan, oleh karena itu, orang yang belum pernah bekerja dengan React dapat memahami aplikasi ini. Keputusan kami hanya bertujuan untuk mendapatkan hasilnya, tanpa gangguan pada detail kerangka kerja, sehingga kode tersebut kurang lebih mencerminkan masalah yang sedang dipecahkan. Kami berhasil membuatnya mudah untuk menambahkan tipe baru elemen Todo, dan kami siap untuk mengubah strategi konservasi.Kesulitan apa yang kita hadapi? Kami memecahkan masalah memperbarui tampilan menggunakan pola Observer tanpa referensi ke kerangka kerja. Ternyata, aplikasi pola ini masih diperlukan untuk menyelesaikan masalah utama (bahkan jika kita tidak perlu menggambar HTML). Oleh karena itu, kami tidak mengeluarkan biaya dengan meninggalkan "layanan" dari sistem deteksi perubahan yang ada di dalam kerangka kerja.Saya ingin menekankan bahwa tes menulis tidak ada kesulitan. Menguji objek independen sederhana dengan antarmuka informatif adalah suatu kesenangan. Kompleksitas kode hanya bergantung pada tugas itu sendiri dan keterampilan saya (atau kelengkungan).Bagaimana dengan tingkat pengembang yang akan menangani ini? Bisakah Junior React Developer menulis solusi seperti itu? "Pemrograman lebih seperti kerajinan", jadi tanpa praktik menggunakan OOP dan pola, saya pikir itu akan sulit. Tetapi Anda dan perusahaan Anda memutuskan apa yang Anda investasikan. Apakah Anda berlatih OOP atau memahami seluk-beluk kerangka kerja berikutnya? Saya hanya sekali lagi diyakinkan tentang relevansi karya-karya sastra para programmer berpengalaman, dan menunjukkan bagaimana mulai menggunakan saran klasik dengan kapasitas penuh di depan.Terima kasih sudah membaca!