با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به ذکر برخی از نکات جاوا اسکریپت در قالب وردپرس بپردازیم.
نکات جاوا اسکریپت
بسیاری از قالب ها از جاوا اسکریپت برای تعامل با کاربر، انیمیشن و بسیاری از ویژگی های دیگر استفاده می‌کند.
رعایت نکاتی که در ادامه خواهیم گفت، باعث کارآمد تر شدن کد های شما و مانع از ناسازگاری با محتوا و پلاگین ها می‌شود.
استفاده از کتابخانه ها
تعداد بسیار زیادی کتابخانه جاوا اسکریپت وجود دارد که شما می‌خواهید حداقل از چند تای ان ها در قالب خود استفاده کنید.
آیا می‌دانستید که وردپرس با تعداد بسیار زیادی از کتابخانه های جاوا اسکریپت باندل شده است؟
یک اشتباه رایج بین توسعه دهندگان پلاگین و قالب، باندل کردن قالب یا پلاگین خود با نسخه های جاوا اسکریپت خود است.
این کار باعث ناسازگاری بین جاوا اسکریپت و وردپرس می‌شود. بنابراین همیشه از کتابخانه های جاوا اسکریپت باندل شده توسط وردپرس استفاده کنید.
جاوا اسکریپت استاندارد
در اینجا به برخی از نکات مهم هنگام کدنویسی با جاوا اسکریت، اشاره کرده ایم:
- از متغیر های سراسری بپرهیزید
- از Closure ها و module pattern ها استفاده کنید
- در حالت stick کدنویسی کنید
- کد خود را معتبر کنید
- ابتدا مطمئن شوید که سایت شما بدون جاوا اسکریپت نیز کار می‌کند، سپس از جاوا اسکریپت استفاده کنید
- اگر به JQuery نیازی ندارید، از آن استفاده نکنید
Selector ها
هنگامی که یک المان را با استفاده از JQuery انتخاب می‌کنید، JQuery یک کوئری با استفاده از markup اسناد شما انجام می‌دهد.
این کوئری ها سریع اجرا می‌شوند اما به هر حال زمان می‌گیرند.
با استفاده مجدد کوئری ها به جای ایجاد کوئری جدید، سرعت پاسخگویی سایت خود را بالا ببرید.
بنابراین به جای تکرار Selector ها:
مثال :
| // Anti-pattern $('.post img').addClass('theme-image'); $('.post img').on('click', function() { /* ... */ }); |
پیشنهاد می‌شود تا Selector حود را cache کنید. بدین ترتیب می‌توانید از المان برگردانده شده استفاده مجدد کرده و از تکرار فرآیند جلوگیری کنید:
مثال :
| var $postImage = $('.post img'); // All image tags within posts can now be accessed through $postImage $postImage.addClass('theme-image'); $postImage.on('click', function() { /* ... */ }); |
مدیریت رویداد
هنگامی که از متد های JQuery مانند blind. و click. استفاده می‌کنید، JQuery یک شئ رویداد مرورگر جدید برای مدیریت فرآیند رویداد درخواست شده، ایجاد می‌کند.
هر رویداد ایجاد شده مقداری از حافظه را اشغال می‌کند، اما این مقدار بیشتر می‌شود تا بتوانید رویداد های جدیدتری را ایجاد کنید.
اگر صفحه ای با صد ها برچسب انکر تکست دارید و می‌خواهید هنگامی که کاربر بر روی یک لینک کلیک کرد، مدیریت کننده رویداد logClick را فراخوانی کنید، کد خود را به صورت زیر بنویسید:
مثال :
| // Anti-pattern $('a').click( logClick ); |
کد بالا کار می‌کند اما شما با این کار از JQuery می‌خواهید که برای هر لینک یک مدیریت کننده رویداد ایجاد کند.
با استفاده از نمایندگی رویداد می‌توانیم همین کار را با سربار کمتر انجام دهیم.
از ان جا که شئ document در بالاترین سطح ساختار یک صفحه قرار دارد، می‌توانیم مدیریت کننده رویداد را در این شئ قرار دهیم تا تمام لینک های صفحه از این مدیریت کننده رویداد استفاده کنند.
مثال :
| $(document).on('click', 'a', logClick); |
جلسه نکات جاوا اسکریپت در قالب وردپرس نیز به پایان رسید.
در جلسه بعد به آموزش اعتبار سنجی قالب وردپرس خواهیم پرداخت.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
