LinkGenerator یک مشکل را با مسیریابی مبتنی بر دایرکتوری حل کرد

Summarize this content to 400 words in Persian Lang
در مرحله بعد، SvelteKit، Astro، Nuxt و چارچوب های وب رایج از مسیریابی مبتنی بر دایرکتوری استفاده می کنند.

متأسفانه با افزایش مسیرها نگهداری مسیریابی مبتنی بر دایرکتوری دشوارتر می شود و برای ایجاد مسیرهای پیچیده مناسب نیست.

LinkGenerator که من ایجاد کردم تا حدی این مشکل را با مدیریت مرکزی مسیرها (یا پیوندها) مورد استفاده در برنامه های کاربردی وب حل می کند.

در اینجا، من به طور خلاصه مسیریابی با SvelteKit را توضیح می دهم.

ابتدا اجازه دهید نگاهی به یک مسیر ثابت بیندازیم.

برای ایجاد یک صفحه درباره، مراحل زیر را دنبال کنید:

یک دایرکتوری با نام مسیر در داخل ایجاد کنید routes دایرکتوری:
src/routes/about

در داخل about دایرکتوری، ایجاد یک +page.svelte فایل:
src/routes/about/+page.svelte

مطالب را در +page.svelte فایل:
About

با این کار صفحه About نمایش داده می شود /about.

بعد، بیایید یک صفحه پویا ایجاد کنیم.در اینجا، ما یک مسیر مانند ایجاد خواهیم کرد /posts/:postid.

مسیر را ایجاد کنید و مطمئن شوید که نام دایرکتوری پارامترهای مسیر را در آن قرار دهید [ and ]:

src/routes/posts/[postid]

فایل صفحه را ایجاد کنید:

src/routes/posts/[postid]/+page.svelte

این تنظیمات به شما امکان می دهد مقدار پارامتر مسیر را از روی بازیابی کنید load عملکرد در +page.ts یا +page.server.ts فایل های داخل src/routes/posts/[postid] دایرکتوری زیاد نگران تفاوت این فایل ها نباشید.

// src/routes/posts/[postid]/+page.ts
export const load = (routeContext) => {
const postid = routeContext.params.postid;
return { postid };
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مقدار بازگشتی از load تابع را می توان در بازیابی کرد +page.svelte فایل مطابق شکل زیر:

// src/routes/posts/[postid]/+page.svelte
lang=]]>”ts”>
export let data;

Postid: {data.postid}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نتیجه، وقتی دسترسی دارید src/routes/posts/1، نمایش داده خواهد شد Postid: 1.

مسیریابی مبتنی بر دایرکتوری ممکن است ساده به نظر برسد، اما برای دستیابی به وظایف ساده باید دایرکتوری ها و فایل های زیادی ایجاد کنیم.

با افزایش تعداد مسیرها، ساختار دایرکتوری پیچیده تر می شود و به تدریج درک کل ساختار مسیریابی دشوار می شود.

هر بار که می خواهید به یک مسیر خاص در هر صفحه دسترسی داشته باشید، باید ساختار آن را بررسی کنید routes دایرکتوری

چگونه می توانیم این مشکل را به زیبایی حل کنیم؟

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

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

در مورد ایجاد تنها یک تابع که پیوندها را کاملاً ایمن تولید می کند، چطور؟

اگر مسیرها را به‌عنوان یک شی واحد نمایش دهیم و به‌طور مرکزی پیوندها را بر اساس آن تولید کنیم، چه؟ اگرچه ممکن است تضمین نشود که شی تعریف شده کاملاً با ساختار دایرکتوری مطابقت دارد، اگر بتوانیم پیوندها را به صورت متمرکز مدیریت کنیم، دیگر نیازی به صرف زمان برای باز کردن و بستن دایرکتوری ها نیست. علاوه بر این، هنگامی که مسیرها تغییر می کنند، انواع TypeScript می توانند تأثیر را در کل پروژه بررسی کنند.

اجازه دهید نحوه استفاده از LinkGenerator که ایجاد کردم را معرفی کنم.

این بسته در JSR منتشر شده است، یک رجیستری بسته جاوا اسکریپت که توسط Deno اداره می شود. می توان آن را به راحتی با استفاده از Deno، NPM، PNPM، Yarn یا Bun نصب کرد.

در اینجا از NPM استفاده خواهیم کرد. دایرکتوری پروژه خود را باز کنید و دستور زیر را اجرا کنید:

npx jsr add @kokomi/link-generator

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده بسیار ساده است. به کد زیر مراجعه کنید:

// 1. import modules
import { type RouteConfig, flattenRouteConfig, createLinkGenerator } from “@kokomi/link-generator”;

// 2. define route config
const routeConfig = {
posts: {
path: “/posts”,
children: {
post: {
path: “/:postid”
}
}
}
} as const satisfies RouteConfig;

// 3. flatten route config
const flatRouteConfig = flattenRouteConfig(routeConfig);

// 4. create link function
export const link = createLinkGenerator(flatRouteConfig);

link(“posts/post”, { postid: “1” }); // => /posts/1

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمونه ای از استفاده در Svelte به شکل زیر است:

همچنین به شدت پارامترها را تایپ می کند و از پارامترهای پرس و جو پشتیبانی می کند.

برای جزئیات بیشتر، مخزن LinkGenerator را در GitHub بررسی کنید.

ممنون که خواندید.

// src/routes/posts/[postid]/+page.ts
export const load = (routeContext) => {
  const postid = routeContext.params.postid;
  return { postid };
};

// src/routes/posts/[postid]/+page.svelte
"ts">
   export let data;


Postid: {data.postid}

npx jsr add @kokomi/link-generator

// 1. import modules
import { type RouteConfig, flattenRouteConfig, createLinkGenerator } from "@kokomi/link-generator";

// 2. define route config
const routeConfig = {
  posts: {
    path: "/posts",
    children: {
      post: {
        path: "/:postid"
      }
    }
  }
} as const satisfies RouteConfig;

// 3. flatten route config
const flatRouteConfig = flattenRouteConfig(routeConfig);

// 4. create link function
export const link = createLinkGenerator(flatRouteConfig);

link("posts/post", { postid: "1" }); // => /posts/1