ادغام فایل های Js به منظور کاهش تعداد رکویست ها به سرور
سلام و سپاس-
فرض کنیم دو صفحه داریم /aboutUs و /ContactUs. توی هر دو تای این صفحات یک سری تابع و متغیر هم نام برای راحتی تعریف کردیم مثلا تابع ژیر در هر دو صفحه مجزا وجود داره و کار مختلفی انجام میده:
function SayHello()
{
alert("Hello AboutUS");
}
function SayHello()
{
alert("Hello ContactUs");
}
الان قصد دارم دو تابع هم نام با عملکرد متفاوت را بیارم توی یک فایل Js ... یعنی در نهایت میخام کل فایل های اسکریپت مربوط به صفحات مختلف وب اپ را با یک عالمه متغیر همسان با اسم های با مصما !! ولی یکسان (مثلا changeHistorySuggestionOfInputLatitudeByDrag و کلی اسم معنا دار مشابه ) که دوست ندارم تو هر صفحه اسم مجزا براش بذارم، حالا میخام همه را بیارم داخل یک فایل Js که با یک رکویست همش به کاربر ارسال بشه...یعنی نمیخام ContactUs.Js , AboutUs.JS به کلاینت ارسال بشه، فقط یک file.JS ارسال بشه که هر دو صفحه را ساپورت کنه !
به ذهن خودم رسید این کار را بکنم برای جدا کردن اسامی هم نام :جواب میده ولی نمیدونم کار خوب و قشنگی هست و ایا پیشنهاد بهتری به ذهنتون میره ؟؟ شما دوستان با تجربه لطفا راهنمای فرمایید.
$(document).ready(function () {
if (window.location.pathname == "/ContactUs") {
function SayHello()
{
alert("Hello AboutUS");
}
}
if (window.location.pathname == "/AboutUs") {
function SayHello()
{
alert("Hello ContactUs");
}
}
});
یعنی بیام آدرس صفحه را بخونم، و براساس یک کلمه توی ادرس تصمیم بگیرم کدام بخش از File.JS که یک جا دانلود شده در نزد کلاینت، مربوط به این صفحه جاری هست و توابع و .. اون قسمت باید ران بشه
و سوال اسون دیگه :) یک cdn معرفی کنید که این فایل های استاتیک را بریزم روشون که سرور خودم از شرشون راحت بشه... اگه رایگان باشه چه بهتر نباشه هم دیگه حالا چه میشه کرد .
روشی که برای این کار انتخاب کردید بیشتر یک ایده است و بد هم نیست. اما ببینید داشتن توابع هم نام اونم به تعداد زیاد کار صحیحی نیست بنظرم !!!
توابع رو به دو صورت میشه از هم تفکیک کرد.
- داشتن نام متفاوت
- داشتن امضای متفاوت
به عنوان مثال تابع زیر رو در نظر بگیرید.
function SayHello_1()
{
alert("Hello AboutUS");
}
function SayHello_2()
{
alert("Hello ContactUs");
}
در مثال بالا نام توابع تفاوت دارن و برای فراخوانی هم نام رو میتونید صدا بزنید. و اما مثال زیر رو ببینید.
function SayHello(param)
{
alert("Hello AboutUS");
}
function SayHello()
{
alert("Hello ContactUs");
}
دو تابع بالا هم همنام هستن ولی یکی از توابع به یک ورودی نیاز داره. بنابراین این دو تابع گرچه همنام هستن ولی موقعی که صداشون میزنید چون یکی بدون پارامتر هست و دیگری با پارامتر به راحتی قابل تشخصی هستن.
اما در هر صورت روشی که شما هم استفاده کردید جواب داده اما در هر بار فراخوانی باید به آدرس مورد نظر بره و تابع رو پیدا کنه که احتمالا در سرعت کار تاثیر خواهد گذاشت.
ضمنا در نظر داشته باشید فایلهای Js و Css که در فایل جداگانه در پروژه قرار دارن در اولین فراخوانی سایت و نمایش صفحه در مرورگر کش میشن و دیگه فشاری رو از اون ببعد به سرور شما نمیارن.
ممنون از پاسخ گویی..
اخه مشکل فقط متغیر ها نیست شاید بشه با دو روز وقت کامل نام ها را وابسته به صفحات کرد و مثلا به اخر اسامی یک _AboutUs مثلا اصافه کرد. مشکل اینجاست که بعنوان مثال کلید BackSpace توی برخی صفحات غیرفعال شده یا توی بعضی جاها که فارسی کلا غیر فعال شده و در حالت فارسی هم تایپ بشه شما انگلیسی میبینی و کلی چیزهای دیگه...
یعنی مثلا keypress تعریف شده واسه صفحه aboutUs که نمیخام توی ContactUs اجرا بشه و دنبال هستم فایل js دو تا را ادغام کنم.
به نظرتون اگه بیام کل کدهای مربوط به صفحه aboutus را داخل یک فانکشن AboutUs() بذارو و کل کدهای جاوا اسکریپت مربوط به صفحه ContactUs() را بیام داخل تابع ContactUs() بذارم بعد این توابع را میتونم به راحتی داخل یک فایل مشترک جای بدم، الان یک فایل دارم با یک عالمه تابع خیلی گنده !! هر کدام شاید 10 کیلو بایت مینی فای شده تکست دارن، به هر حال.
بعد توی صفحه Html هر کدام از صفحات وبسایتم مطابق زیر عمل کنم .
Url: www.example.com/AboutUs
<script> AboutUs() <script/>
و یا :
Url: www.example.com/ContactUs
<script> ContactUs() <script/>
داخل File.js هم دارم :
function ContactUs() {
//many functions, variable , ... are here
}
function AboutUs() {
//many functions, variable , ...
}
در این صورت توی هر کدام از صفحات Html مربوط به وبسایتم فقط یک خط کد جاوا اسکریپت دارم که مربوط به اجرای تابع اون صفحه و در ادامه اجرای یک عالمه دستور دیگه داخل فایل مشترک File.js میشه.