illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 232 ۱۷ آبان ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 65 : افزایش سرعت لود سایت با استفاده از script loader

هر چه تعداد script هایی که در صفحه include میکنید بیشتر باشه ، به همون نسبت سرعت لود سایت کمتر میشه. این زیاد شدن سرعت لود سایت به این دلیل هست که Script ها تا زمانی که کامل لود و تجزیه تحلیل نشده باشن ،  جلوی رندر صفحه و سایت رو میگیرن. میتونین با استفاده از پلاگین head.js این مشکل رو برطرف کنید.

ابتدا باید این ابزار رو include بکنید. در اینجا ما از Cloudflare CDN استفاده میکنیم:

این تنها script هست که شما باید include کنید ، بقیه script هایی که قصد دارید لود کنید ، میتونین به روش زیر وارد کنید:

میبینید که jquery-ui ، bootstrap و include.js قرار داده شده و با کاما از هم جدا شدن. اون تابعی که در آخر قرار داده شده زمانی فراخوانی میشه که تمامی اسکریپتها لود شده باشن و در دسترس باشن. با استفاده از این پلاگین میتونین سایتتون رو خیلی بهینه تر و سریعتر کنید.

ترفند 66 : رندر کردن HTML با قالبی مشخص

نوشتن کدهای HTML با استفاده از دست کار زحمت داری هست. ساختن کد HTML با استفاده از Javascript میتونه روش خوبی باشه. اینجا جایی هست که کتابخانه قالب دهی Mustache.js خودشو نشون میده.

در ابتدا این ابزار رو Include میکنیم:

بعد از اون شما میتونین یک قالب تعریف کنید. شما میتونین براحتی قالب مدنظرتون رو بصورت یک رشته JS بنویسید و اونو به یک متغیر نسبت بدین، اما در اینجا راهکار دیگه ای رو پیش روی شما میزارم:

میبینید که در ابتدا یک div تعریف کردیم و خروجی رو در اون ذخیره میکنیم. بعد از اون هم قالب مورد نظرمون رو که یک ul شامل سه li هست ، درون تگ script قرار دادیم. همونطور که دیدید قالبمون رو در یک تگ script با نوع text/html قرار دادیم. با اینکار دیگه مرورگر با اون مثل یک کد Javascript رفتار نمیکنه و تلاشی برای اجرا کردن اون نمیکنه. همچنین چون درون تگ script هست این کدها و محتویاتش در مرورگر نمایش داده نمیشن. تنها کاری که لازمه بکنیم اینه که محتویات این script رو گرفته و به کتابخانه Mustache تحویل بدیم:

بعد از اون میایم یک لیست از مقادیر مختلف رو تعریف میکنیم:

میبینید که این لیست سه عضو داره و هر عضو اون شامل کلید و مقدار هستن. بعد از اون div ای که در ابتدا تعریف کردیم رو به یک متغیر نسبت میدیم:

بعد از این کارها باید قالب خودمون رو به این ابزار بدیم که اونو تجزیه و تحلیل کنه و آمادش کنه:

با استفاده از کد بالا قالبمون تبدیل به یک تابع Javascript میشه. حالا میتونیم با استفاده از لیستی که تعریف کردیم و قالبمون ، محتویات رو در خروجی درج کنیم:

میبینید که از متد each استفاده کردیم و به ازای هر عضو لیست ، اطلاعات مورد نظر در div قرار میگیره.

خروجی نهایی که در people نمایش داده میشه ، بصورت زیر هست:

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

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

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

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram