كتابة والرد

تطوير جافا سكريبت يصبح في بعض الأحيان مثل المباحث. كيف نفهم رمز شخص آخر؟ من الجيد أن يمتلك المطور فنًا دقيقًا لمتغيرات التسمية بحيث يفهم الآخرون هذه النقطة. ولكن ماذا لو كان أعضاء الفريق لا يزالون غير قادرين دائمًا على فهم نية زميلهم؟ كيف نفهم ما يأتي في حجة وظيفة؟

افترض أن الدالة الوسيطة تسمى أخطاء. ربما في الأخطاء هو مجموعة. الخطوط الأرجح؟ حسنا ، هذه المجموعة أمر مفهوم. بعد كل شيء ، يتم التحقق من طوله كذلك. لكن الخاصية طول لديها أيضا سلسلة. يبدو أنه من أجل معرفة ذلك بالضبط ، تحتاج إلى وضع نقطة توقف وتشغيل البرنامج النصي. ثم انتقل بالكامل من خلال البرنامج النصي على واجهة المستخدم (على سبيل المثال ، نحتاج إلى الخطوة الأخيرة من النموذج). الآن في devtools ، يمكن ملاحظة أن الأخطاء هي كائن يحتوي على مجموعة من الحقول المحددة ، بما في ذلك حقل الطول.

هذا الغموض في تحليل كود جافا سكريبت يؤدي إلى تضييع وقت المطور. يمكن أن يكون حلاً جيدًا في هذه الحالة هو typescript (المشار إليه فيما يلي باسم ts). يمكنك استخدامه في المشروع التالي ، أو حتى بشكل أفضل ، تقديم الدعم في المشروع الحالي. بعد ذلك ، سيتم تقليل الوقت لفهم رمز شخص آخر بشكل كبير. في الواقع ، من أجل فهم بنية أي بيانات ، نقرة واحدة كافية. يمكنك التركيز على منطق العمل مع البيانات وفي أي وقت تعرف أنك تفهم الكود بوضوح.

وتجدر الإشارة إلى بعض مزايا ts. يستخدم على نطاق واسع في مختلف الأطر ويرتبط ارتباطًا وثيقًا بجافا سكريبت. يتم تحديد تطوير ts بواسطة احتياجات مطوري الواجهة الأمامية.

تقدم هذه المقالة تطور تطبيقات ما يجب عمله ، ولكن فقط وصف موجز للنقاط المثيرة للاهتمام. يمكن العثور على الرمز الكامل هنا .

اعتدت رد الفعل ، typescript و mobx. Mobx هي أداة مرنة لإدارة حالة التطبيق. Mobx موجزة. يتيح لك العمل مع حالة مكونات التفاعل بأسلوب متزامن. لا مشكلة مثل:

this.setState({name: 'another string'}); alert(this.state.name); 

في هذه الحالة ، يتم عرض الحالة القديمة.

بالإضافة إلى ذلك ، mobx مريحة ولا تتداخل مع العمل مع أنواع ts. يمكنك وصف الحالة بفئات منفصلة أو مباشرة داخل مكون التفاعل.

للبساطة ، يتم وضع جميع المكونات في مجلد المكونات. يتم تعريف فئة في مجلد المكون مع وصف للحالة المرتبطة منطقيا بعرض وتشغيل المكون.

يحتوي المجلد TodoItem على ملف به مكون رد الفعل TodoItem.tsx وملف به أنماط TodoItem.module.scss وملف حالة TodoItemState.ts.

يصف TodoItemState.ts حقول تخزين البيانات وكيفية الوصول إليها وقواعد تغييرها. مجموعة الاحتمالات كبيرة للغاية بفضل OOP و ts. يمكن أن يكون جزء من البيانات خاصًا ، وجزءًا للقراءة فقط وما إلى ذلك. باستخدامo decor ، يتم تحديد الحقول القابلة للملاحظة. تتفاعل مكونات التفاعل مع تغييراتها. تُستخدم أدوات الزخرفةa ( الإجراء ) في أساليب لتغيير الحالة.

 // TodoItemState.ts import { action as a, observable as o } from 'mobx'; export interface ITodoItem { id: string; name: string; completed: boolean; } export class TodoItemState { @o public readonly value: ITodoItem; @o public isEditMode: boolean = false; constructor(value: ITodoItem) { this.value = value; } @a public setIsEditMode = (value: boolean = true) => { this.isEditMode = value; }; @a public editName = (name: string) => { this.value.name = name; }; @a public editCompleted = (completed: boolean) => { this.value.completed = completed; }; } 

في TodoItem.tsx ، يتم تمرير خاصيتين فقط إلى الدعائم. في mobx ، يكون الأداء الأمثل للتطبيق هو نقل هياكل البيانات المعقدة إلى مكون تفاعل الدعائم. بما أننا نستخدم ts ، يمكننا الإشارة بدقة إلى نوع الكائن الذي يقبله المكون.

 // TodoItem.tsx import React, { ChangeEventHandler } from 'react'; import { observer } from 'mobx-react'; import { TodoItemState } from './TodoItemState'; import { EditModal } from 'components/EditModal'; import classNames from 'classnames'; import classes from './TodoItem.module.scss'; export interface ITodoItemProps { todo: TodoItemState; onDelete: (id: string) => void; } @observer export class TodoItem extends React.Component<ITodoItemProps> { private handleCompletedChange: ChangeEventHandler<HTMLInputElement> = e => { const { todo: { editCompleted }, } = this.props; editCompleted(e.target.checked); }; private handleDelete = () => { const { onDelete, todo } = this.props; onDelete(todo.value.id); }; private get editModal() { const { todo } = this.props; if (!todo.isEditMode) return null; return ( <EditModal name={todo.value.name} onSubmit={this.handleSubmitEditName} onClose={this.closeEditModal} /> ); } private handleSubmitEditName = (name: string) => { const { todo } = this.props; todo.editName(name); this.closeEditModal(); }; private closeEditModal = () => { const { todo } = this.props; todo.setIsEditMode(false); }; private openEditModal = () => { const { todo } = this.props; todo.setIsEditMode(); }; render() { const { todo } = this.props; const { name, completed } = todo.value; return ( <div className={classes.root}> <input className={classes.chackbox} type="checkbox" checked={completed} onChange={this.handleCompletedChange} /> <div onClick={this.openEditModal} className={classNames( classes.name, completed && classes.completedName )}> {name} </div> <button onClick={this.handleDelete}>del</button> {this.editModal} </div> ); } } 

تصف واجهة ITodoItemProps خاصية ما يجب عمله للنوع TodoItemState. وبالتالي ، داخل عنصر التفاعل ، يتم تزويدنا ببيانات للعرض وطرق تغييرها. علاوة على ذلك ، يمكن وصف القيود على تغيير البيانات في فئة الحالة وفي أساليب مكون التفاعل ، حسب المهام.

يشبه مكون TodoList TodoItem. في TodoListState.ts ، يمكنك رؤية الحروف باستخدام مصمم الديكورc (computed). هذه عبارة عن مجموعات عادية ، يتم فقط حفظ قيمها وإعادة فرزها عندما تتغير تبعياتها. حساب حسب التصميم يشبه محددات الإرجاع. مريح ، ليس من الضروري ، مثل React.memo أو إعادة تحديد ، لتمرير قائمة التبعيات بشكل صريح. تستجيب مكونات التفاعل إلى التغييرات المحسوبة بالإضافة إلى التغييرات الملحوظة. ميزة مثيرة للاهتمام هي أن إعادة حساب القيمة لا تحدث إذا لم يتم حسابها حاليًا في التقديم (مما يوفر الموارد). لذلك ، على الرغم من الحفاظ على قيم التبعية الثابتة ، يمكن إعادة حسابها (هناك طريقة لإخبار mobx صراحة بحفظ القيمة المحسوبة).

 // TodoListState.ts import { action as a, observable as o, computed as c } from 'mobx'; import { ITodoItem, TodoItemState } from 'components/TodoItem'; export enum TCurrentView { completed, active, all, } export class TodoListState { @o public currentView: TCurrentView = TCurrentView.all; @o private _todos: TodoItemState[] = []; @c public get todos(): TodoItemState[] { switch (this.currentView) { case TCurrentView.active: return this.activeTodos; case TCurrentView.completed: return this.completedTodos; default: return this._todos; } } @c public get completedTodos() { return this._todos.filter(t => t.value.completed); } @c public get activeTodos() { return this._todos.filter(t => !t.value.completed); } @a public setTodos(todos: ITodoItem[]) { this._todos = todos.map(t => new TodoItemState(t)); } @a public addTodo = (todo: ITodoItem) => { this._todos.push(new TodoItemState(todo)); }; @a public removeTodo = (id: string): boolean => { const index = this._todos.findIndex(todo => todo.value.id === id); if (index === -1) return false; this._todos.splice(index, 1); return true; }; } 

لا يمكن الوصول إلى قائمة المهام إلا من خلال حقل محسوب ، حيث يتم ، حسب وضع العرض ، إرجاع مجموعة البيانات التي تمت تصفيتها (مكتملة أو نشطة أو غير مطلوبة بالكامل). تحدد التبعيات التي يجب القيام بها تحديد حقول Todos المحسوبة و activeTodos وحقول _todos التي يمكن ملاحظتها.

النظر في المكون الرئيسي للتطبيق. يعرض نموذجًا لإضافة مهمة جديدة وقائمة مهام. يتم إنشاء مثيل لحالة AppSate الرئيسية على الفور.

 // App.tsx import React from 'react'; import { observer } from 'mobx-react'; import { TodoList, initialTodos } from 'components/TodoList'; import { AddTodo } from 'components/AddTodo'; import { AppState } from './AppState'; import classes from './App.module.scss'; export interface IAppProps {} @observer export class App extends React.Component<IAppProps> { private appState = new AppState(); constructor(props: IAppProps) { super(props); this.appState.todoList.setTodos(initialTodos); } render() { const { addTodo, todoList } = this.appState; return ( <div className={classes.root}> <div className={classes.container}> <AddTodo onAdd={addTodo} /> <TodoList todoListState={todoList} /> </div> </div> ); } } 

يحتوي حقل appState على مثيل لفئة TodoListState لعرض مكون TodoList وطريقة إضافة مهام جديدة ، والتي يتم تمريرها إلى مكون AddTodo.

 // AppState.ts import { action as a } from 'mobx'; import { TodoListState } from 'components/TodoList'; import { ITodoItem } from 'components/TodoItem'; export class AppState { public todoList = new TodoListState(); @a public addTodo = (value: string) => { const newTodo: ITodoItem = { id: Date.now().toString(), name: value, completed: false, }; this.todoList.addTodo(newTodo); }; } 

المكون AddTodo لديه حالة معزولة. لا يوجد الوصول إليها من الحالة العامة. الاتصال الوحيد إلى appState هو من خلال طريقة appState.addTodo عند إرسال نموذج.
بالنسبة لحالة مكون AddTodo ، يتم استخدام مكتبة formstate ، والتي هي أصدقاء رائعون مع ts و mobx. Formstate يسمح لك بالعمل بشكل مريح مع النماذج ، والتحقق من صحة النماذج ، وأكثر من ذلك. يحتوي النموذج على اسم حقل واحد مطلوب فقط.

 // AddTodoState.ts import { FormState, FieldState } from 'formstate'; export class AddTodoState { // Create a field public name = new FieldState('').validators( val => !val && 'name is required' ); // Compose fields into a form public form = new FormState({ name: this.name, }); public onSubmit = async () => { // Validate all fields const res = await this.form.validate(); // If any errors you would know if (res.hasError) { console.error(this.form.error); return; } const name = this.name.$; this.form.reset(); return name; }; } 

بشكل عام ، لا معنى لوصف سلوك جميع المكونات بالكامل. ويرد رمز كامل هنا .

توضح هذه المقالة محاولة المؤلف كتابة رمز بسيط ومرن ومنظم يسهل الحفاظ عليه. React يقسم واجهة المستخدم إلى مكونات. تصف المكونات فئات الحالة (يمكن اختبار كل فصل على حدة). يتم إنشاء مثيلات الحالات إما في المكون نفسه أو على مستوى أعلى ، اعتمادًا على المهام. بشكل ملائم بما فيه الكفاية ، يمكنك تحديد أنواع حقول الفصل وأنواع خصائص المكون بفضل الطباع. بفضل mobx ، يمكننا ، بشكل غير محسوس تقريبًا للمطور ، جعل مكونات التفاعل تتفاعل مع تغييرات البيانات.