1. خانه
  2. فروم
  3. ساختار فایل های Css و JS برای سایتی با تعداد صفحات کم اما کاملا متفاوت

ساختار فایل های 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 نام گذاری کردم تا توی استایل دهی متفاوت اینها به مشکل برنخورم. بنابر این الان سه تا مشکل دارم: 1 - لود JS برای هر صفحه جدا 2 - لود CSS برای هر صفحه حدا 3 - نام گذاری خیلی بد کلاس ها در صفحات مختلف ببخشید خیلی طولانی شد. ممنون که منو راهنمایی میکنید.
پاسخ ها
sokanacademy forum
کاربر سکان آکادمی 6 سال پیش
سلام راستش سوالتون رو خوب متوجه نشدم به همین دلیل 2 تا برداشت کردم و دو تا جواب میدم . 1-بسته به زبان برنامه نویسی و فریم ورک مورد استفاده شما در پیاده سازی ، هر کدام از فریمورکها یک سری TemplateEngine خاص خودشون رو دارن ؛ جاوا از ...ApacheTilles ، لاراول از blade استفاده میکنه ، موتورهای قالب عموما باعث میشن که شما کارهای روتین تکراری مثل ایمپورت کردن header,footer فایلهای css ,... رو راحت میکنه و راحتتر میتونید master page هاتون رو درست کنید، مثلا توی لاراول میتونید با استفاده از اونتیشن @yeild('') قسمتهایی از پیج اصلی رو مختص کارهای خاصی قرار بدید مثل لود کردن header,footer, اسکریپتها و... ، و دیگه لازم نیست توی هر صفحه تمامی js,css, ها رو دستی ایمپورت کنید، مثلا توی blade ، هدر ، فوتر ، js و... یک بار در page اصلی ایمپورت میشن و بقیه page ها از او page extends میکنن 2- اگر منظورتون از افزایش پرفورمنس برای import کردن فایلهای js ، جلو گیری از ایمپورت فایلهای js با تعداد زیاد هست ، میتونید از وب پک استفاده کنید ، وب پک میتونه تمام فایلهای js شما رو دریافت کنه و نهایتا یک فایل js خروجی بهتون میده و میتونید همون یک فایل رو import کنید. گالپ هم همین کارها رو انجام میده ، میتونید با جای css از lass استفاده کنید و اونها رو با گالپ و... تبدیل به css کنید برای قواعد نامگذاری در css هم میتونید از نام گذاریهای فریم ورکهای css کمک بگیرید ، مثلا اگر box های شما از همه لحاظ (رنگ، border و..) در تمامی صفحات یکی هست ، میتونید بزارید box ، مثل ،...panel,list-styles در بوت استرپ
sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

ممنون از پاسختون. 1 - من برای اینکه بیشتر با فریمورک ها و بخصوص دیزاین پترن ها آشنا بشم، خودم یک فریمورک بر پایه MVC نوشتم و توی پروژه الانم، از این فریمورک استفاده میکنم. همچنین طبیعتا فایل های header و footer رو در هر فایل اینکلود میکنم و فایل های JS و css هم به طبع اون ایمپورت میشن. اما مشکل اینه که خب توی فایل header و footer فقط JS های کلی رو ایمپورت کردم و فایل JS مربوط به مثلا صفحه B (یک صفحه بخصوص) رو در اینجا نیووردم (به دلیل مشکل شماره 2 که در پایین نوشتم) با Blade و ... هم کاملا آشنا هستم و از اون ها هم استفاده میکنم. 2 - حدس میزدم مشکل با Webpack حل بشه ولی سوالم این هستش که اگر تمام JS هارو اینطوری تجمیع کنم و همشونو باهم در همه فایل ها ایمپورت کنم (توسط header یا footer) با این مشکل مواجه میشم: فرص کنید در فایل A یک کلاس box وجود داره. الان فایل a.js من به این شکل هست:

let box = document.querySelector('.box');
box.addEventListener('click', () = {
  console.log('Clicked!');
});

الان اگر این فایل رو با فایل های دیگه مثلا b.js تجمیع کنم و توی تمام فایل ها ایمپورتش کنم، در فایل b.js اگر کلاس box موجود نباشه، هنگاه بایند کردن اون ایونت بهش با ارور برخورد میکنم (به دلیل null بودن متغیر box) و بقیه کدها اجرا نمیشه. حتی در صورتی که پایین اومدن پرفورمنس به دلیل وجود کدهای اضافی JS رو هم در فایل ها نادیده بگیریم، مشکل اصلیم با اینجور ارور ها هست که برنامه رو دچار مشکل میکنن و بنظرم نباید کد های فایل a.js رو در فایل B ایمپورت کنم. - راستی اگر این مشکل ارور حل بشه، چون فایل ها کش میشند، فایل JS فقط یکبار لود میشه و توی تمام صفحات از فایل کش شده استفاده میشه دیگه. درسته؟ اگر درست باشه پس برای سرعت و پرفورمنس کار هم نباید مشکلی پیش بیاد ? چرا تا الان به ذهنم نرسیده بود ؟ 3 - از Sass استفاده میکنم و اون رو با اکستنشن کامپایل میکنم ولی بنظرم مشکلم سر نام گذاری هاست چون کلاسِ box های یکسان تو صفحات مختلف، خصوصیات مختلفی هم دارند و نمیشه همشون رو یکجور استایل داد. باز هم ممنون که وقت میگذارید و من رو راهنمایی میکنید.

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش
با سلام خدمت شما کاربر گرامی، می‌توانید به مقالهٔ «نگاهی به ساختار اصولی فایل‌های CSS» از لینک https://sokanacademy.com/blog/1756/post نیز مراجعه نمایید. با تشکر از توجه شما ارادتمند تیم سکان آکادمی
sokanacademy forum
کاربر سکان آکادمی 6 سال پیش

ممنون. خودم هم الان با همین ساختار برای css کار میکردم ولی مشکل اصلیم سر ارور هایی بود که به دلیل تداخل فایل های JS به وجود میان.

این ارور رو برای کامنت پایین توضیح دادم.

اصلی ترین مشکلم الان این هست.

sokanacademy forum
کاربر سکان آکادمی 6 سال پیش
در سکان یک مقاله ای هست به ادرس https://sokanacademy.com/blog/1755/post در اون به مزیت های پروتکل http نسخه دوم اشاره شد که داخلش میگه اگر تعداد فایل ها زیاد باشه اشکالی نداره و اتفاقا بهتر هم هست
sokanacademy forum
کاربر سکان آکادمی 6 سال پیش
ممنونم حتما چک میکنم.
online-support-icon