نکته های مهم جاوا اسکریپت که باید در پروژه خود اعمال کنید

نکته های مهم جاوا اسکریپت که باید در پروژه خود اعمال کنید 3 نکته تصادفی جاوا اسکریپت که باید در پروژه خود اعمال کنید

1- فقط داده های مورد نیاز خود را در فروشگاه ذخیره کنید

این بدان معنا نیست که شما باید همه چیز را در فروشگاه خود ذخیره کنید زیرا از یک فروشگاه استفاده می کنید. بگذارید چند مثال بزنم تا این موضوع روشن شود.

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

سفارش ساخت سایت در فریلنس پروژه

شما نباید از فروشگاه استفاده کنید؛ برای مثال، هر داده ای خاص برای یک صفحه، فرض کنید صفحه ای داریم که کاربران را فهرست می کند. ما نیازی به ذخیره آن داده ها در فروشگاه نداریم زیرا دفعه بعد که از صفحه بازدید می کنیم به هر حال تغییر داده یا به روز می شود.

انجام پروژه برنامه نویسی(در تب جدید مرورگر باز می شود )

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

نکته های مهم جاوا اسکریپت که باید در پروژه خود اعمال کنید

2- کتابخانه ها را در خدمات خود پیاده کنید

بنابراین، من تعداد زیادی پروژه را می بینم که وابستگی ها را به کل برنامه نشان می دهد. برای مثال Axios را در نظر بگیرید. می‌توانید Axios را در همه جا در معرض دید قرار دهید، و کاملاً کار می‌کند. اما، اگر بخواهید به کتابخانه درخواست HTTP دیگری مهاجرت کنید، چه؟ یا اگر Axios یک نسخه اصلی جدید منتشر کند و همه چیز را تغییر دهد چه؟ در این مورد، شما باید هر استفاده از Axios را در برنامه خود به روز کنید.

در اینجا کاری است که باید به جای آن انجام دهید.

Axios را در یک HttpService بپیچید و برخی از روش‌های استاندارد مانند دریافت، ارسال، وصله… و غیره را در آنجا در معرض دید قرار دهید. و اگر مجبور نیستید از Axios مستقیماً در جای دیگری استفاده نکنید.

متلب و چند نکته(در تب جدید مرورگر باز می شود )

در اینجا مثال HttpService است.

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
import { set } from 'lodash-es';
import { IRequestParam } from '../model/http.model';
import HelperService from './helper.service';

export default class HttpService {
  /**
   * Axios instance
   */
  protected readonly axios: AxiosInstance;

  constructor(baseURL: string) {
    const token: string | null = HttpService.getToken();

    const config: AxiosRequestConfig = {
      baseURL,
      headers: {
        Apikey: import.meta.env.VITE_apiKey,
        'Accept-Language': 'en',
        'Access-Control-Max-Age': 7200,
      },
    };

    if (config.headers && token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    this.axios = axios.create(config);
  }

  public static getToken(): string | null {
    if (localStorage.getItem('token')) {
      return localStorage.getItem('token') as string;
    }

    if (sessionStorage.getItem('token')) {
      return sessionStorage.getItem('token') as string;
    }

    return null;
  }

  public setToken(token: string): void {
    set(this.axios.defaults, 'headers.Authorization', `Bearer ${token}`);
  }

  public removeToken(): void {
    set(this.axios.defaults, 'headers.Authorization', undefined);
  }

  public static generateFilter(filter: IRequestParam[]): string {
    let filterString = '';

    filter.forEach((param: IRequestParam) => {
      filterString += filterString.length === 0 ? '?' : '&';
      filterString += `${param.key}=${param.value}`;
    });

    return filterString;
  }

  /**
   * Generic GET request
   *
   * @async
   * @param {string} url - url to request
   * @returns {Promise<T>} response from endpoint
   */
  public async get<T>(url: string, params?: IRequestParam[]): Promise<T> {
    let requestURI = url;

    if (params) {
      requestURI += HttpService.generateFilter(params);
    }

    return HelperService.unwrapAxiosResponse(this.axios.get<T>(requestURI));
  }

  /**
   * Generic POST request
   *
   * @async
   * @param {string} url - url to request
   * @param {P} payload - payload to send
   * @returns {Promise<T>} response from endpoint
   */
  public async post<T, P>(url: string, payload?: P): Promise<T> {
    return HelperService.unwrapAxiosResponse(this.axios.post<T>(url, payload));
  }

  /**
   * Generic PATCH request
   *
   * @async
   * @param {string} url - url to request
   * @param {P} payload - payload to send
   * @returns {Promise<T>} response from endpoint
   */
  public async patch<T, P>(url: string, payload?: P): Promise<T> {
    return HelperService.unwrapAxiosResponse(this.axios.patch<T>(url, payload));
  }

  /**
   * Generic PUT request
   *
   * @async
   * @param {string} url - url to request
   * @param {P} payload - payload to send
   * @returns {Promise<T>} response from endpoint
   */
  public async put<T, P>(url: string, payload?: P): Promise<T> {
    return HelperService.unwrapAxiosResponse(this.axios.put<T>(url, payload));
  }

  /**
   * Generic DELETE request
   *
   * @async
   * @param {string} url - url to request
   * @returns {Promise<T>} response from endpoint
   */
  public async delete<T>(url: string): Promise<T> {
    return HelperService.unwrapAxiosResponse(this.axios.delete<T>(url));
  }
}

نکته های مهم جاوا اسکریپت که باید در پروژه خود اعمال کنید

3- همه چیز را در سرویس کمکی خود جمع نکنید.

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

اگر نیاز به طراحی سایت دارید با ما تماس بگیرید

اگر می‌خواهید نکات/بهترین شیوه‌های بیشتر برای جاوا اسکریپت/تایپ اسکریپت را ببینید، فراموش نکنید که دنبال کنید.

ساخت انتخابگر فونت در جاوا اسکریپت(در تب جدید مرورگر باز می شود )