ترفندهای پیشرفته jQuery (قسمت اول)

همونطور که میدونین jQuery یکی از محبوبترین کتابخانه های Javascript هست و تعداد زیادی از طراحان وب از اون استفاده میکنن. در این سری آموزشی میخایم تعدادی نکات و ترفند پیشرفته رو در اختیار شما قرار بدیم که دونستن اونا میتونه به شما کمک کنه.

موضوع اول : دستکاری در DOM

ترفند 1 : رویداد DOM Ready

اولین قدم در دستکاری DOM این است که رویداد Ready رو روبراه کنیم و کاری کینم که کدهای مورد نظر ما بعد از اینکه DOM بطور کامل لود شد ، اجرا بشن. این نه تنها یک قرارداد هست ، بلکه میتونه به شما تضمین بده که کدهای شما فقط در صورتی که همه المنتها در دسترس بودن ، اجرا بشه. شاید شما با تعدادی از روشهای اون آشنا باشید ، اما در این ترفند یک راه به شما نشون داده میشه که میتونین بدون jQuery هم اینکارو انجام بدین و در همه مرورگرها هم پشتیبانی بشه.

با jQuery:

1	$(document).ready(function(){ /* ... */ });

این روش که به احتمال زیاد برای همه شما آشنا هست.

روش کوتاهتر با jQuery:

1	$(function(){ /* ... */ });

با این روش هم اکثرا کم و بیش آشنا هستید و نیازی به توضیح نداره.

بدون jQuery (در مرورگرهای قدیمی پشتیبانی نمیشه)

1 2 3

document.addEventListener('DOMContentLoaded', function(){ // your code goes here }, false);

این کد در مرورگرهای قدیمی IE پشتیبانی نمیشه و اگر سایتتون خیلی روی مرورگرهای قدیمی IE تمرکز نداره میتونین با خیال راحت از اون استفاده کنید.

ترفند پیشرفته : بدون jQuery (در همه جا پشتیبانی میشه)

1 2 3 4 5

r(function(){ alert('DOM Ready!'); });   function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

اگر این کد رو اجرا کنید در مرورگرهای خیلی قدیمی هم بخوبی اجرا میشه و اصلا نیازی به jQuery نداره. این یک ترفند هست که در این لینک بصورت کامل توضیح داده شده است. روشش اینه که میاد و خصوصیت readyState از عنصر document رو چک میکنه. بعد از اون با استفاده از یک عبارت منظم بررسی شده که رشته in در پاسخ document.readyState وجود داره یا نه. اگر پاسخ document.readyState بصورت Loading باشه ، در نتیجه in در اون وجود داره و بعد از 9 میلی ثانیه توسط setTimeout دوباره چک میشه و بعد از اینکه Loading به پایان رسید کدهای مورد نظر شما اجرا میشه. در بالا یک alert نشون داده میشه.

ترفند 2 : اجرای مجموعه کدهای مشخص در URL خاص

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

در ابتدا باید یک متغیر بنام route تعریف کنیم و ویژگی ها و متدهایی برای اون قرار بدیم. بصورت زیر:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var route = { _routes : {}, // The routes will be stored here   add : function(url, action){ this._routes[url] = action; },   run : function(){ jQuery.each(this._routes, function(pattern){ if(location.href.match(pattern)){ // "this" points to the function to be executed this(); } }); } }

اگر با شئ گرایی آشنا باشید ، راحت میتونین معنی کد بالا رو درک کنید. میبینید که یک متغیر از نوع آرایه بنام _routesتعریف شده که کارش اینه که مسیرها و URL ها رو در خودش ذخیره کنه.

بعد از اون یک متد بنام add تعریف شده که دو پارامتر url و action رو دریافت میکنه و با اجرا شدن هر بار متد add یک عضو به آرایه _routes اضافه میشه که اندیس اون url و مقدار اون تابع action خواهد بود.

تابع run هم وظیفش اینه که function هایی که مرتبط با مسیر خاص هستن رو اجرا کنه.

برای اضافه کردن یک عضو به آرایه مورد نظر بصورت زیر عمل میکنیم:

1 2 3

route.add('jquery.html', function(){ alert('Hello there!'); });

همونطور که دیدین اول متد add فراخوانی شده و دو آرگومان به اون فرستاده شده. اولی مسیری هست که باید کد مد نظر در اون اجرا بشه و دومین آرگومان تابعی هست که در زمان فراخوانی این مسیر اجرا خواهد شد.

حالا اگر از متد run استفاده کنیم ، اگر در صفحه مورد نظر باشیم که در اون jquery.html باشه  کد مورد نظر اجرا میشه و یک alert به ما داده میشه.

1	route.run()

همچنین میتونین از عبارات منظم هم استفاده کنید و بگید که مسیرهایی که با این Regex مطابقت دارن ، این کد رو اجرا بکنن. بصورت زیر:

1 2 3

route.add('.*.html', function(){ alert('Hello there!'); });

این کد در همه صفحات اجرا میشه چون از * استفاده شده و با همه چیز مطابقت داره. برای استفاده از عبارات منظم در URL میتونین از این لینک کمک بگیرید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source