واکنش پذیر کردن JavaScript

نخستین چیزی که در زمان فکر کردن به توسعه ی واکنش پذیری به ذهن ما می رسد، این است که چگونه می توانیم با استفاده از مدیا کوئری ها (media queries) و بر اساس قانون های تعریف شده توسط query، تغییر های همه جانبه ای در سایت خود ایجاد کنیم. مدیا کوئری ها و عملکردشان به شرایط بستگی دارد. در حقیقت اگر CSS نیز به کار گرفته شده باشد، مرورگر باید شرایط مورد نیاز را داشته باشد. برای ایجاد یک تغییر بصری (visual) در یک سایت، می بایست تغییری که در عملکرد آن نیز ایجاد می شود را مورد توجه قرار داد. این جا، همان جایی است که ما از JavaScript استفاده می کنیم.
نمونه های زیادی، مانند زمانی که تصمیم می گیریم چیز هایی را در یک پنجره ی مودال (modal window) بر روی دسکتاپ نمایش دهیم، وجود دارند که در آن ها تصمیم به تغییر عملکرد و کارایی می گیریم. با چنین کاری، یک تجربه ی خوب و کاربردی در کامپیوتر های دسکتاپ خواهیم داشت. البته استفاده از پنجره ی مودال در تلفن های هوشمند، مشکلاتی را ایجاد کرده و کاربران تجربه ی خوبی در این مورد نداشته اند. بهترین راه حل، غیر فعال کردن پنجره ی مودال در تلفن های هوشمند است. در چنین شرایطی است که CSS کارایی مطلوب را از خود نشان نداده و می بایست از JavaScript استفاده کنیم.
متاسفانه اضافه کردن JavaScript به منظور مدیریت تغییر عملکرد مبتنی بر واکنش پذیری سایت، می تواند از به کار بردن یک مدیا کوئری، پیچیده تر باشد. به همین دلیل است که باید فرآیند انتقال بین حالت ها را با دقت و ظرافت مدیریت کنیم. در زمان استفاده از مدیا کوئری های CSS، سبک ها (Style ها) تنها می توانند فعال یا غیر فعال (خاموش یا روشن) بوده و یا در زمانی که در حالت های مختلف هستیم می توانیم آن ها را با با مدیا کوئری های جدید جایگزین کنیم اما با استفاده از JavaScript، می بایست خودمان منطق شرطی (conditional logic) و فعال یا غیر فعال (خاموش یا روشن) بودن عملکرد را مدیریت کنیم.
البته مرورگر ها ما را بدون کمک رها نکرده و در نسخه های جدید آن ها می توانیم از ویژگی matchMedia API استفاده کنیم. این ویژگی، وضعیتی که پس از ایجاد شرایط جدید به وجود می آید را به ما نشان خواهد داد. پس با وجود چنین ویژگی جالب توجهی، یک روش مناسب در اختیار خواهیم داشت. در حقیقت شرایطی که ایجاد می شود، درست مانند مدیا کوئری هایی است که از قبل با آن ها در CSS آشنا بوده ایم. برای آشنایی بیشتر با چگونگی استفاده از matchMedia API می توانیم نگاهی به نمونه ی زیر برای وارد شدن به کنسول مرورگر در زمان ورود و خروج حالت موبایل داشته باشیم:
var mql = window.matchMedia(“screen and (maxwidth:768px)”);
mql.addListener(function(e){
if(e.matches){
console.log(‘enter
mobile’);
}
else{
console.log(‘leave
mobile’);
}
});
ما یک فهرست کوئری را با استفاده از window.matchMedia و هشدار های کوئری را نیز با فراخوانی روش addListener() ایجاد کرده ایم تا از فراخوانی مجدد (callback) عبور کنیم. زمانی که مدیا کوئری ما تطبیق پیدا کند یا نکند، روش شنونده (listener) ما فراخوانده شده و ما می توانیم تغییر حالت را مدیریت کنیم.
پشتیبانی مرورگر ها از matchMedia API قابل قبول بوده است. تنها مرورگری که از این ویژگی پشتیبانی نمی کرد، Internet Explorer بوده که در نسخه ی IE 10 این مرورگر نیز این مشکل برطرف شده و امکان پشتیبانی از matchMedia API فراهم شده است. اگر می خواهید از matchMedia API استفاده کنید، می توانید از یک چند گانه (polyfill) برای matchMedia API نیز استفاده کرده تا امکان پشتیبانی از matchMedia API در نسخه های قدیمی تر Internet Explorer را نیز داشته باشید.
محدودیت اصلی API در تغییر (سوئیچینگ) بین حالت های مختلف است. البته نمی تواند تغییر اندازه را برای هر حالت، که برای برخی از عملکرد ها ضروری است، مدیریت کند. به طور نوعی، این شرایط موجب می شود تا matchMedia API را فراموش کرده و با استفاده از رویداد (event) تغییر اندازه ی مرورگر، این مشکل را برطرف کنیم. نمونه ای از این راه حل را در ادامه مشاهده می کنید:
var stateManager = (function () {
var state = null;
var resizePage = function () {
if ($(‘body’).width() < 768) {
if (state !== “mobile”) { displayMobile(); }
resizeMobile();
}
e
lse {
if (
state !== “desktop”) { displayDesktop(); }
resizeDesktop();
}
};

var displayMobile = function () {
state = “mobile”;
console.log(“enter mobile”);
};
var displayDesktop = function () {
state = “desktop”;
console.log(“enter desktop”);
};
var resizeMobile = function () {
console.log(“resizing mobile”);
};
var resizeDesktop = function () {
console.log(“resizing desktop”);
};
return {
init: function () {
resizePage();
$(window).on(‘resize’, resizePage);
}
};
} (
));
stateManager.init();
در این جا یک رویداد تغییر اندازه به پنجره اضافه شده تا حالت مرورگر را بررسی کند. در همان زمانی که اندازه ی مرورگر در حال تغییر کردن است، عرض (پهنای) پنجره را بررسی کرده تا مشخص کنیم که مرورگر در یک کامپیوتر دسکتاپ باز شده یا در حالت موبایل قرار گرفته است. پس از این که بررسی حالت مرورگر انجام شد، مشخص می شود که مرورگر در همان حالت قرار گرفته یا در حالت دیگر قرار دارد. اگر در حالت درست قرار گرفته باشیم، تغییر اندازه انجام نمی شود اما در غیر این صورت، روش تغییر اندازه به کار گرفته خواهد شد. در زمانی که بیشتر از دو حالت (چندین حالت مختلف) سر و کار داشته باشیم، این روش (به دلیل افزایش اندازه) چندان مناسب نخواهد بود.
در چنین شرایطی، می توانیم نگاهی به JavaScript libraries داشته باشیم تا در صورت وجود داشتن روش های ساده تر، از آن ها استفاده کنیم.

نگاهی به libraries (کتابخانه ها)
اگر چه تا کنون تنها شرایطی را مطرح کرده ایم که در آن ها بتوانیم به سادگی از JavaScript استفاده کنیم اما کتابخانه های JavaScript کار شما را آسان تر کرده اند. با استفاده از این library ها، از یک طرف ایجاد JavaScript های واکنش پذیر آسان تر شده و از طرف دیگر این Library ها می توانند تفاوت های میان مرورگر های مختلف را مدیریت کرده و دیگر لازم نخواهد بود که شما نگران این مشکلات باشید.
یکی از شناخته شده ترین Library هایی که برای واکنش پذیر کردن JavaScript وجود دارد، SimpleStateManager (SSM) است (netm.ag/ssm-250). این Library در مورد حالت ها (شرایط یا state ها) ایجاد شده است. یک حالت، وضعیتی است که یک مرورگر از نظر عرض (پهنا) در آن قرار گرفته است. یکی از حالت هایی که همه ی ما در مورد مرورگر ها با آن روبرو شده ایم، عرض کوچک آن ها در زمان باز شدن در موبایل ها و تلفن های هوشمند، عرض متوسط آن ها در زمان باز شدن در تبلت ها و عرض بزرگ آن ها در زمان باز شدن در کامپیوتر های دسکتاپ است. برای اضافه کردن ویژگی JavaScript به هر کدام از این حالت ها، می توانید از SimpleStateManager استفاده کنید.
در حقیقت SimpleStateManager به شما اجازه می دهد که از روش های JavaScript برای حالت های واکنش پذیر وارد شدن، خارج شدن و تغییر اندازه، بر اساس عرض مرورگر، استفاده کنید.
دلیل اصلی استفاده از SimpleStateManager این است که یک حالت آماده سازی برای رویداد onEnter، یک حالت پاک کردن برای رویداد onLeave و یک حالت برای مدیریت تغییر اندازه در رویداد onResize ایجاد شود.
دو روش برای شروع استفاده از SimpleStateManager وجود دارد. نخستین روش استفاده از Bower بوده (github.com/bower/bower) و روش دوم، دانلود فایل Library با فرمت JS از www.simplestatemanager.com و قرار دادن آن در پروژه ی مورد نظرتان است. پس از استفاده از هر کدام از این روش ها، می توانید شروع به اضافه کردن حالت ها کنید:
(function(window){
ssm.addStates([{
id: ‘mobile’, maxWidth: 767, onEnter: function(){
console.log(‘enter mobile’);
}
},
{
id: ‘desktop’,  minWidth: 768,  onEnter: function(){
console.log(‘enter desktop’);
}
}]);
ssm.ready();
}(window));
در این نمونه، دو حالت موبایل و دسکتاپ را اضافه کرده ایم. در هر دو حالت، یک رویداد enter اضافه شده تا نشان دهنده ی ورود ما باشد. پس از این حالت، یک روش .ready() را اجرا کرده ایم تا به SSM بگوید که ما حالت های خود را اضافه کرده و آماده شده ایم تا روش های لازم onEnter را با توجه به حالت موجود، اجرا کنیم.
با استفاده از SimpleStateManager، امکان اضافه کردن بی نهایت حالت مختلف، که می توانند با یکدیگر همپوشی نیز داشته باشند، وجود دارد. بنابراین لازم نیست که کد های تکراری بین مرورگر ها داشته باشید. اگر چه امکان اضافه کردن بی نهایت حالت مختلف وجود دارد اما باید شرایط وجود هم زمان حالت های مختلف و گوناگون را نیز در نظر داشته باشید.
ویژگی اساسی استفاده از SimpleStateManager این بوده که در آن، اضافه کردن حالت به مرورگر با شرایطی که عملکرد بی نظیری داشته باشد، بسیار ساده شده است. در SimpleStateManager، با استفاده از API ها، می توانید افزونه ها (plug-ins) خودتان را ایجاد کرده و گسترش دهید تا عملکرد مورد نظرتان را داشته باشند. بنابراین می توانید ویژگی های مانند لمسی بودن را نیز پشتیبانی کرده و از آن ها استفاده نمایید. بر خلاف Library ها که از matchMedia API استفاده می کنند، در استفاده از SimpleStateManager نیازی به اجرای چند گانه (polyfill) برای کار کردن آن در نسخه های قدیمی تر مانند Internet Explorer 7 (یا نسخه های IE 8 و IE 9) نخواهد بود.
اشکال استفاده از SimpleStateManager در این است که تنها نسبت به تغییرات عرض (پهنای) وب سایت ها واکنش پذیر خواهد بود. البته این اشکال SimpleStateManager چندان مهم نبوده و برای گسترش آن (در زمانی که می خواهید از کوئری های پیچیده تر استفاده کنید) می توانید یک افزونه ی جدید نوشته یا یک Library که از matchMedia APL استفاده می کند را به کار ببرید.
در یک عبارت کوتاه، ویژگی مهم و اساسی استفاده از یک Laibrary مانند SimpleStateManager در این است که شما می توانید JavaScript را، ساده تر از گذشته، واکنش پذیر کنید. بنابراین در چنین شرایطی، به جای تمرکز کردن بر روی مدیریت فرآیند تبدیل حالت های واکنش پذیری، می توانیم زمان بیشتری را به افزایش قابلیت های وب سایت خود اختصاص دهیم.
نگاه دقیق تر
مدیریت حالت های واکنش پذیر با Enquire.js
اگر به wicky.nillia.ms/enquire.js مراجعه کنید، مشاهده خواهید کرد که Enquire.js خودش را به عنوان «یک مدیا کوئری بی نظیر در JavaScript» توصیف می کند. در حقیقت، Enquire.js یکی از library های JavaScript است که امکان اضافه کردن فراخوانی های مجدد (callback ها) را به منظور تطبیق دادن یک مدیا کوئری تطبیق داده نشده، فراهم می کند. روش شناختی (methodology) استفاده از Enquire.js این است که بتوان یک مدیا کوئری را در کنار گرداننده (handler) های تطبیق داده شده و تطبیق داده نشده ای که تمایل به اضافه کردن آن ها دارید، ثبت کنید.
زمانی که یک مدیا کوئری تطبیق پیدا کند (یا نکند)، گرداننده ی درست، شروع به کار خواهد کرد. بنابراین هنگامی که به یک حالت وارد می شویم، می توانید تغییرات JavaScript مورد نیازتان را به کار برده و در زمان خارج شدن از هر حالت، پاک کردن های مورد نظر را انجام دهید.
با استفاده از Enquire.js، امکان استفاده از همان مدیا کوئری های CSS در JavaScript نیز وجود خواهد داشت. در چنین شرایطی، همان طور که امکان استفاده از کوئری های پیچیده فراهم شده است، می توان از تغییرات سبک CSS و تغییرات کاربردی JavaScript در کنار یکدیگر استفاده کرد.
در حقیقت، Enquire.js بر اساس matchMedia API (که در این مقاله بررسی شده) ساخته شده است. یکی از ویژگی های جالب توجه این مدیا کوئری این است که می تواند به جای Library، در خود مرورگر تفکیک شود. مشکل اساسی Enquire.js نیز این است که با توجه به ساخته شدن بر اساس matchMedia API، می بایست به منظور پشتیبانی از مرورگر های قدیمی، از یک چند گانه (polyfill) در آن استفاده کرد.

———————–

برگردان : سید حمید یوسفی نژاد

دیدگاهتان را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شدعلامتدارها لازمند *

*

x

شاید بپسندید

کد نویسی را بیاموزید

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