ساختار فایل های Css و JS برای صفحات سایت
سلام. شاید سوالی که میخوام بپرسم خیلی پیش پا افتاده و ساده باشه ولی مدتیه که این سوال برام پیش اومده و نتونستم راه حل درستی براش پیدا کنم.
سایتی رو در نظر بگیرید که بیست صفحه مختلف داره و طبیعتا هم هر صفحه وظیفه بخصوصی داره.
توی یک همچین سایتی، استراکچر فایل های JS و css چطوری هست و چطور برای هر صحفه فایل متخص خودش رو لود میکنند؟
منظورم اینه که مثلا اگر صفحه A به فایل a.js و a.css نیاز داشته باشه و فایل B به همین صورت و ... .
اگر بخوایم تمام JS ها رو توی یک فایل بریزیم و بعد اون رو در تمام صفحات لود کنیم، هم پرفورمنس کار به دلیل حجم به نسبت زیاد فایل JS میره بالا و همچنین هنگام کار با DOM و سلکت کردن اونها قطعا با ارورهای زیاد مواجه میشیم و قطعا این روش منتفی هست.
اگر هم بخوایم فقط a.js (منظورم فایل مورد نیاز هر صفحه) رو جدا جدا برای هر صفحه لود کنیم بنظرم غیر اصولی هست و باید روش بهتری برای لود اتوماتیک JS و CSS مورد نیاز وجود داشته باشه.
البته این مشکل به وجود اومدن ارور رو اگر تمام CSS ها رو تجمیع کنیم و فقط یک فایل کلی استایل رو توی تمام صفحات لود کنیم، نداریم ولی خب باز کلی کد اضاف داره لود میشه و هیچ نیازی بهشون نیست.
البته این رو هم اضافه کنم فعلا چون روش بهتری رو بلد نیستم، دارم JS هارو جدا جدا لود میکنم، مثلا a.js رو برای صفحه A و ... و CSS هارو تجمیع کردم و توی تمام صفحات فقط style.css رو لود میکنم (قید پرفورمنس رو زدم).
یه مشکلی هم اینجا پیش میاد اینکه استایل های css برای اینکه با هم قاطی نشند و بتونم استایل مربوطه رو برای هر صفحه جدا داشته باشم، از یه پریفیکس اول اسم هر کلاس توی هر صفحه استفاده کردم. مثلا اگر کلاس box رو توی A و B داشته باشم، این کلاس رو توی صفحه A بصورت a-box و توی صفحه B بصورت b-box نام گذاری کردم تا توی استایل دهی متفاوت اینها به مشکل برنخورم.
بنابر این الان سه تا مشکل دارم:
۱ - لود JS برای هر صفحه جدا
۲ - لود CSS برای هر صفحه حدا
۳ - نام گذاری خیلی بد کلاس ها در صفحات مختلف
ببخشید خیلی طولانی شد.
ممنون که منو راهنمایی میکنید.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@samsihsajadi
من از یک صفحه js وscss برای تمام پروژم چه تک صفحه چه با صفحات داخلی استفاده میکنم. بنظر من برخی کدهای js رو که تداخل دارند را تو خود صفحه htmlبزنید. واگه کار با scss رو بلد باشید براحتی میتونید با یه کلاس به div اصلی اون صفحه aرو ازb متمایز کنید و هیچ مشکلی تو تداخل کلاس ها وجود ندارد. چه بسا بسیاری از کلاسها شبیه هم هستند. یکی از ویژگی های scss همینه که به کد مادر کلاس متمایز بدید هیچ تداخلی اتفاق نمیفته
سلام خسته نباشید
وقتی شما می گید تو همچین سایتی که بیست صفحه متفاوت داره وقتی شما بیست صفحه متفاوت دارید بهترین راهش فکر کنم همین باشه که برای اون بیست صفحه مجزاتون css و ،js جذا بنویسید که هر صفحه فایل های مخصوص خودش رو داره به غیر هدر با فوتر و بعضی چیزهای دیگه تو همه صفحه های سایت یکسان هست که اونو می تونید جداگانه از یه فایل دیگه فراخوانی کنید.
این نظر من تازه کار بود
سلام... مرورگر ها قابلیت کش کردن دارن و با یک‌بار لود فایل تو تمامی صفحات دیگه نیازی به لود مجدد که به کاهش پرفورمنس منجر بشه نداریم.. و نکته بعد اینه که بسیاری از css ها و J's ها معمولا توی کل صفحات تکرار میشن فقط تصور کنید که نیاز به تغییر فرایند یا ظاهر یه قسمت دارین اگه جدا ذخیره کنید چه مکافاتیه.... پس با خیال راحت توی یک فایل css هاتونو ذخیره کنید.. و برای js ساختار کامپوننتی رو اجرا کنید که برای دیباگ کمکتون میکنه ولی در نهایت یه فایل رو توی رفرنس های پیج بذارین...
سلام
مرورگر ها دفعه اول که فایل رو دریافت میکنن این فایل ها رو کش میکنن و دفعات بعد از روی کش میگیرن فایل ها رو.
نوشتن css و جاوااسکرپ توی فایل های جدا هم هیج مشکلی نداره.
ولی شاید شما دوست نداشته باشید که کدهاتون رو جدا کنید و میخوایید همه رو توی یه فایل قرار بدید
در این صورت میتونید از کتابخانه requiredjs استفاده کنید.
این کتابخانه اجازه ماژول بندی کدهارو بهتون میده و هر کجا که یک ماژول رو درخواست بدید فقط همون ماژول رو لود میکنه
ممنون از همه دوستان جواب ها عالی بودند. @lgo @zandi2015 @davoodkhany @nimadoustdar99
فقط یک سوال از آقای زندی دارم. الان فهمیدم که باید همه فایل های Css و JS رو توی یک فایل لود کنم.
البته یک مشکل دیگه هست.
فرض کنید توی فایل A یک کلاس box داریم و این کلاس رو توی فایل B نداریم.
حالا فرض کنیم تمام JS ها توی یک فایل الحاق شدند و لود شدند و قسمتی از کد داخل این فایل که مربوط به فایل a.js هست به صورت زیر هست:
let box = document.querySelector('.box');
box.addEventListener('click', () => {
console.log('Clicked!');
}); فرض کنید الان در فایل B هستیم. موقع لود و ران کردن این اسکریپت، به دلیل نبود کلاس box در این فایل (B) اون ایونت که بهش بایند شده ارور میده (ارور null بودن متغیر box) و از اسکریپت خارج میشه و بقیه اسکریپت دیگه خونده نمیشه.
در واقع سوالم این هست که برای اینجور کدها که باهم تداخل دارم چیکار کنم؟
آیا باید این کدها رو توی یک فایل جدا لود کنم - مثل همین کاری که تا الان دارم میکنم، فایل هایی که باهم تداخل ندارند توی فایل main.js و اونهایی که باهم تداخل دارند رو توی a.js جداگانه در فایل A لود میشند - یا مثلا این کدهایی که با هم تداخل دارند رو توی خود HTML بنویسم یا ... ؟
ممنون که راهنمایی میکنید.