جعبه ابزار

جی کوئری در پروژه شما

استفاده از کتابخانه‌های جاوا اسکریپتی در طراحی‌های رابط کاربری در زمان حاضر بسیار معمول و فراگیر شده و از بین تمام این کتابخانه‌ها، جی کوئری بیشترین طرفدار رو به خودش اختصاص داده. همین معروف شدن باعث شده تا جی کوئری آپدیت های ماهیانه داشته باشه و همواره در جهت بیشتر کردن قابلیتهاش و از بین بردن مشکلاتش، نسخه های جدید رو خیلی زود به زود ایجاد کنه.

به این علت که در ورژن‌‎های جدیدتر جی کوئری، علاوه بر اضافه شدن امکانات بیشتر، بر روی سرعت و مشکلات ورژن قبلی هم کار میشه و بهبود پیدا میکنه، بهتر است همواره در پروژه‌های خودتون آخرین ورژن جی کوئری رو استفاده کنید. رعایت این مورد نه تنها در مورد خود فایل اصلی جی کوئری مفید هست بلکه در مورد پلاگین‌های نوشته شده برای jQuery نیز باید قابل توجه قرار بگیره و همیشه از آخرین ورژن استفاده بشه.

در یک پروژه وب، ممکن هست تعداد زیادی از فایلهای جاوا اسکریپت مورد استفاده قرار بگیره که شامل تعداد زیادی از پلاگین‌ها باشه و البته  فایلهایی که توسط خود طراح نوشته شده. در این حالت برای تغییر فایلها به فایلهای جدیدتر باید به سورس صفحات رفت و آدرس دهی به فایل جدید رو انجام داد. هم زمان بر هست هم ممکن است در این بین یه سری صفحات هم فراموش شود.

مشکل دیگری که در پروژه ممکن هست به اون بر بخورید این هست که در طراحی از user control ها و master page های متعدد استفاده کرده باشید و در هر کدوم هم کدهای جی کوئری باشه. در این حالت شما باید در این قسمت ها تک تک چک کنید آیا کتابخونه جی کوئری لود شده یا نه. اگر لود نشده، با آدرس دهی به فایلش، اون رو لود کنید و کد نویسی کنید.

در ASP.Net 4.0 این مشکل برطرف شده و میتوان به سادگی تمام این نگرانی‌ها و مشکلات رو برطرف کرد. در واقع نحوه کار سیستم به زبون خیلی ساده این هست: شما فقط میگی که من جی کوئری نیاز دارم. بقیه کارها رو خود فریمورک انجام داده و چک میکنه که قبلا تو سورس صفحه اسکریپت لود شده، اگه نشده لود میکنه و اگر چند تا لود شده بود و از چند جا این درخواست صدا زده شده بود، یک بار فقط به این حرف گوش میکنه. از طرف دیگه چون یک بار فقط اسکریپت‌ها رو برای فریمورک تعریف میکنیم، کافیست برای تغییرات فایلها و ورژن های جدید، تنها یک بار این تعریف رو ویرایش کنیم.

مرحله اول، تعریف:

در global.asax در قسمت Application_Start کد زیر را مینویسیم:

در این کد ابتدا یک آبجکت از نوع ScriptResourceDefinition میسازیم. این آبجکت قرار هست به فریمورک بفهماند که یک سری تعریف جدید برای یک اسکریپت توسط ما داره انجام میشه.

چهار ویژگی رو به این آبجکت نسبت میدیم. اولی و دومی مسیر فیزیکی به اسکریپت در حالتهای فشرده (برای لود شدن سریع در وبسایت نسخه نهایی) و غیر فشرده (برای دیباگ کردن اسکریپت‌ها زمان توسعه وبسایت) هست و سومی و چهارمی هم مثل دو مورد اول اما مسیر از CDN تعریف میشه. تعریف آدرس‌های اسکریپت از CDN اجباری نیست. ممکن هست اصلا اسکریپت مورد استفاده در CDN موجود نباشه! (در مورد CDN بیشتر بخوانید)

در این مثال تعریف (Definition) رو داریم برای jquery انجام میدیم. شما برای هر فایل جاوا اسکریپتی که داشتید میتونید این کد رو استفاده کنید. حالا یا jQuery UI هست یا Plugin ها و یا کدهای دستی خودتون. فرقی نداره.

در نهایت این تعریف جدید رو با نام انتخابی jquery به ScriptManager اضافه میکنیم. ScriptManager وظیفه مدیریت جاوااسکریپت ها رو در فریمورک داره. اسکریپتهای مربوط به Microsoft Ajax رو به صورت پیشفرض در خودش داره و الان هم ما یک تعریف جدید به اسم jQuery رو به اون فهموندیم. این کد در Application_Start نوشته شده تا در تمام پروژه برقرار باشه.

مرحله دوم، نحوه استفاده:

برای استفاده از تعریفی که انجام دادیم در یک وب فرم که هم میتونه مسترپیج باشه یا یوزرکنترل یا صفحه aspx به صورت زیر عمل میکنیم:

ابتدا با تگ asp:scriptmanager شروع میکنیم. یه سری ویژگی‌هایی که برای این تگ باید بدانیم و رعایت کنیم، موارد زیر هست:

LoadScriptsBeforeUI: این ویژگی باعث میشود تا اسکریپت ها در انتهای صفحه نوشته شوند. این کار برای بالا رفتن سرعت لود صفحه توصیه شده است.

AjaxFrameworkMode: اگر از قابلیت‌های Microsoft Ajax استفاده نمیکنید، مقدار آن را برابر Disabled قرار دهید تا از لود شدن اسکریپت‌های اضافی جلوگیری بشه. در این مثال ما نیازی به مایکروسافت ای جکس نداریم.

EnableCdn: اگر میخواهید از CDN برای لود شدن اسکریپت استفاده کنید مقدار آن را true قرار دهید. دقت کنید که در زمان توسعه و طراحی پروژه ممکن هست شما به اینترنت متصل نباشید پس حواستون باشه که مقدارش باید false باشه!

بعد از این با استفاده از asp:ScriptReference هر تعداد تعریف و Definition که قبلا انجام دادیم رو لود میکنیم. بدیهی هست اگر 2 عدد Definition رو میخوایم صدا بزنیم، از این تگ دو باز استفاده میکنیم ;-)

این تگ 2 تا قابلیت مهم داره که باید مقداردهی کنیم:

Name: نام Definition که قبلا تعریف کردیم. در مثال ما این نام برابر jquery هست.

ScriptMode: هنگام تعریف، 2 مسیر رو مشخص کردیم. یکی برای اسکریپت با حجم کم و یکی با حجم اصلی. حجم کم زمانی مورد استفاده قرار میگیرد که ویژگی ScriptMode در حالت Release باشه. در غیر این صورت از مسیری که برای Debug تعریف کردیم استفاده میشه. پس در زمان Develop کردن پروژه که نیاز به دیباگ کردن داریم، این ویژگی رو کاری نداریم یا مقدارش رو Debug میدیم و هنگامی که پروژه قرار هست آپلود بشه و استفاده نهایی بشه ازش، یادتون نره مقدار ScriptMode رو Release وارد کنید.

بدین ترتیب در هنگام لود شدن صفحه، ScriptManager وظیفه لود شدن اسکریپتهای شما رو بر عهده میگیره و شما نگران چند بار لود شدن یک اسکریپت و تغییر مسیر فایل و نام فایل اسکریپت در آینده نخواهید بود.