الگوهای طراحی در قسمت جلویی: ساختمان رابط های باهوش تر و مقیاس پذیر

از آنجا که برنامه های جلویی در پیچیدگی رشد می کنند ، نیاز به ساختار ، وضوح و مقیاس پذیری نیز وجود دارد. این جایی است که الگوهای طراحی وارد می شوند. نه به عنوان قوانین سفت و سخت ، بلکه به عنوان راه حل های قابل استفاده مجدد برای مشکلات مشترک در طراحی نرم افزار.

الگوهای طراحی به توسعه دهندگان جلو کمک می کند تا کد حفظ ، قابل آزمایش و ظریف تر بنویسند. در این مقاله ، ما بررسی خواهیم کرد که چگونه برخی از الگوهای کلاسیک و مدرن برای توسعه جلو ، به ویژه در چارچوب هایی مانند React ، Vue ، Angular یا حتی JavaScript وانیل اعمال می شود.

الگوهای طراحی راه حل های تعمیم یافته برای مشکلات مکرر هستند. آنها کد خاصی نیستند ، اما قالب هایی که بسته به متن خود می توانید سازگار شوید.

در توسعه جلو ، این الگوهای به ما کمک می کنند:

• پیچیدگی UI را مدیریت کنید
• نگرانی های جداگانه (به عنوان مثال ، منطق در مقابل ارائه)
• قابلیت استفاده مجدد و آزمایش را بهبود بخشید
• با سایر توسعه دهندگان قصد ارتباط برقرار کنید

در مرحله بعد برخی از الگوهای با نمونه های کد را مشاهده خواهیم کرد.

الگوی مجتمع

الگوی مرکب یک روش طراحی است که در آن چندین مؤلفه با هم کار می کنند تا یک حالت ضمنی را به اشتراک بگذارند. این اجازه می دهد تا یک جزء والدین در حالی که مؤلفه های کودک خود را از طریق زمینه یا غرفه ها به آن دسترسی و دستکاری می کند ، مدیریت کند و یک API انعطاف پذیر و اعلامی تر ایجاد کند. این الگوی برای ساختن عناصر UI قابل استفاده مجدد مانند زبانه ها یا آکاردئون ها ایده آل است.

const List = ({ children }) => (
  
);

const Item = ({ text }) => {

  return (
    

      {text}
    
  );
};

الگوی کارخانه

الگوی کارخانه هنگامی که شما نیاز به تولید پویا یا عناصر DOM بر اساس ورودی خاص دارید ، مفید است.

نمونه

اجزای مرتبه بالاتر (HOC)

این یک الگوی دکوراتور کلاسیک است. شما یک مؤلفه را با بسته بندی آن در بخش دیگری تقویت می کنید. این الگوی به شما امکان می دهد منطق را بین مؤلفه به اشتراک بگذارید ، مؤلفه های خود را متمرکز کنید و از کپی کردن عملکرد خودداری کنید.

نمونه

const withLoading = (Component) => {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return 
Loading...
;
    return ;
  };
};

const DataList = ({ data }) => ;
const DataListWithLoading = withLoading(DataList);

الگوی ناظر

این پایه و اساس ابزارهایی مانند Redux است. در برنامه های جلویی ، این الگوی برای مدیریت تغییرات حالت و به روزرسانی های واکنشی در مؤلفه ها ضروری است.

الگوی Observer یک الگوی طراحی است که در آن یک شی (به نام موضوع) لیستی از ناظران (شنوندگان ، مشترکان) را در اختیار دارد و به طور خودکار از هرگونه تغییر حالت مطلع می شود.

نمونه

const listeners = [];

function subscribe(fn) {
  listeners.push(fn);
}

function notify(data) {
  listeners.forEach(fn => fn(data));
}

notify('Data updated');

الگوی شار

در حالی که الگوی Observer بسیاری از سیستم های واکنشی را زیر پا می گذارد ، Flux با اجرای یک جریان داده یک طرفه ، آن را بیشتر می کند ، که استدلال در مورد وضعیت در برنامه های بزرگ جلویی را ساده می کند.

Flux توسط فیس بوک محبوب شد تا پیچیدگی تغییرات دولتی در برنامه های React را مدیریت کند. بر خلاف الگوی Observer ، که در آن چندین اشیاء ممکن است به طور مستقل گوش دهند و به روز شوند ، Flux به روزرسانی ها را در یک چرخه دقیق سازماندهی می کند: Action → Dispatcher → فروشگاه → مشاهده.

// Dispatcher
function dispatch(action) {
  store.receive(action);
}

// Store
const store = {
  state: [],
  listeners: [],
  receive(action) {
    if (action.type === 'ADD_TODO') {
      this.state.push(action.payload);
      this.notify();
    }
  },
  subscribe(fn) {
    this.listeners.push(fn);
  },
  notify() {
    this.listeners.forEach(fn => fn(this.state));
  }
};

// Usage
store.subscribe(data => console.log('Updated:', data));
dispatch({ type: 'ADD_TODO', payload: 'Buy milk' });

الگوی کانتینر

یکی از الگوهای مورد علاقه من. این مفید است زیرا به شما امکان می دهد منطق خود را “ظروف” فقط از مؤلفه های “ارائه دهنده” جدا کنید.

نمونه

//user.container.jsx
const User = () => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  return ;
};

//user.view.jsx
const UserView = ({ user }) => (
  
);

الگوی استراتژی

خانواده ای از الگوریتم های قابل تعویض را تعریف می کند و باعث می شود رفتار در زمان اجرا انتخاب شود. به جای نوشتن منطق مشروط که بسته به الگوریتم مورد استفاده ، رفتار را تغییر می دهد ، شما رفتار را به یک شیء استراتژی که عملکرد مورد نیاز را پیاده سازی می کند ، واگذار می کنید.

نمونه

const required = (value) => value ? null : 'Required';
const email = (value) => /\S+@\S+\.\S+/.test(value) ? null : 'Invalid email';

const validate = (value, strategies) => {
  for (let fn of strategies) {
    const error = fn(value);
    if (error) return error;
  }
  return null;
};

const error = validate('leia@organa.com', [required, email]);

الگوی پروکسی

یک شیء بسته بندی که دسترسی به شیء دیگر را کنترل می کند. این الگوی برای ذخیره ، بارگیری تنبل یا ورود به سیستم مفید است.

نمونه

const fetchUser = (function () {
  const cache = {};
  return async (id) => {
    if (cache[id]) return cache[id];
    const res = await fetch(`/user/${id}`);
    const data = await res.json();
    cache[id] = data;
    return data;
  };
})();

الگوی آداپتور

یکی از موارد مورد علاقه من یک رابط را به دیگری ترجمه می کند. در هنگام ادغام API یا کتابخانه یا در هنگام مهاجرت مفید است.

نمونه

const apiUser = { user_name: 'leia', user_email: 'leia@organa.com' };

// Adapter
const adaptUser = (user) => ({
  name: user.user_name,
  email: user.user_email,
});

const user = adaptUser(apiUser);

الگوی بارگذاری تنبل

الگوی بارگیری تنبل ، بارگذاری منابع را تا زمانی که در واقع مورد نیاز باشد ، به تأخیر می اندازد و عملکرد را بهبود می بخشد. این الگوی را می توان برای بارگذاری اجزای موجود در تقاضا اعمال کرد. این معمولاً در React با استفاده می شود Suspenseبشر

الگوی بارگیری تنبل سودمند است زیرا با بارگیری منابع فقط در صورت لزوم عملکرد را بهبود می بخشد و باعث کاهش زمان بار اولیه ، به ویژه در برنامه های بزرگ می شود.

نمونه

import React, { Suspense, lazy } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

const App = () => {
  return (
    Loading...

}>

) ؛ } ؛ برنامه پیش فرض صادرات ؛