چند زبانه کردن سایت با Javascript

خب اگر فریمورک‌هایی مثل Vue یا React یا هر چرت‌وپرت دیگه‌ای استفاده میکنید خیلی راحت میتونید با i18n وبسایتتون رو چندزبانه کنید اما اگر بخوای از هیچ فریمورکی استفاده نکنید یا تو یه پروژه کوچیک وبسایت رو چندزبانه کنید یه سری راه حل‌ها هست که میتونید برید تو اینترنت سرچ کنید.

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

ایده‌ی کلی:

خب ایده کلی اینه، شما یه تگ تو html تعریف میکنید و بهش یه dataset می‌دید یعنی مثلا data-text که یه مقداری هم میگیره:

<h1 data-text=&quotfuck_this_universe&quot></h1>

بعد یه آرایه دارید که توش هر چندتا زبون که بخوایید تعریف میکنید مثلا en و fa و توی این زبون‌ها کلیدها کلماتتون رو تعریف میکنید:

const locales = [
    {
        en: {
            fuck_this_universe: &quotFuck This Universe&quot,
        },
    },
    {
        fa: {
            fuck_this_universe: &quotاین جهان رو ...&quot,
        }
    }
];

خب مرحله سوم اینه که از یه قبرستونی تشخیص بدیم زبون سایت چیه، رو تگ html یه اتریبیوت هست به اسم lang که فکر کنم منطقیه از طریق اون تشخیص بدیم زبون سایت باید چی باشه پس بیایید کد زیر رو بنویسید تا توضیح بدم که چکار میکنه چون ممکنه همه بلد نباشن و بلد نبودن اصلا اشکالی نداره.

من یه Event Listener گذاشتم که میاد لود شدن محتوای DOM رو بررسی میکنه، فکر کنم تو JQuery به شکل document.ready() مینویسنش! بعد یه callback function تعریف کردم(فکر کنم callback func باشه) ? که توش گفتم برو بگرد تگی که روش اتریبیوت lang رو داره پیدا کن و تو خط بعدش گفتم بیا مقدار اتریبیوت langی که روی اون تگه هست رو بفرست به یه function که تو مرحله بعدی میگم

document.addEventListener('DOMContentLoaded', () => {
    const locale = document.querySelector('[lang]');
    setText(locale.lang)
});

خب این setText همون فانکشنیه که قراره از تو آرایه متن‌ها رو بخونه و بذاره تو جای درستش. تو خط اولش اومدم همه تگ‌هایی که روشون اتریبیوت data-text هست رو گرفتم ریختم تو containers بعد اومدم روی آرایه locales که بالاتر تعریف کرده بودیم یه حلقه خوشکل و مامان زدم (I'm not a selfish ☹)

که فکر کنم وقتی یه مقداری رو از بیرون فانکشن میخونی بهش میگم کلوژر، راجع بهش سرچ کنید من حال نداشتم سرچ کنم!

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

اینجا payload همون مقداری میشه که تو این خط کد پاس دادیم setText(locale.lang) یعنی زبان سایت که از lang تو html گرفته میشه

حالا این دلیل وجود این شرط اینه که به runtime error نخوریم و نگه که فلان زبونی که اضافه کردی تو آرایه‌ات نیست و این حرفا. تو مرحله آخر یه حلقه دیگه زدیم روی containers که میشه لیست همه تگ‌هایی(المنت‌هایی) که data-text دارن و میگه بیا مقدار ... ? آقا نمیدونم واقعا چطور توضیح بدم، میاد مقدار درست رو میریزه تو innerHTML اون تگه دیگه

const setText = (payload) => {
    const containers = document.querySelectorAll(`[data-text]`);

    locales.forEach(locale => {
        if (locale[payload]) {
            containers.forEach(el => {
                el = locale[payload][el.dataset.text];
            })
        }
    });
};

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