دوره مجازی جاوااسکریپت (جلسه 26): آموزش نحوه صحیح نوشتن افزونه (plugin) های جی کوئری

دسته بندی: آموزش
زمان مطالعه: ۲ دقیقه
۱۲ آبان ۱۳۹۴

در جلسه گذشته به آموزش و تدریس نحوه صحیح و استاندارد نوشتن کتابخانه های جاوااسکریپت پرداختیم. در اون جلسه فرق بین کتابخانه و پلاگین و مزیت های این دو مورد رو به خوبی درک کردیم. جلسه کنونی اختصاص داره به آموزش دقیق و نکته به نکته نحوه پلاگین نویسی برای کتابخانه جی کوئری . در این جلسه شما به خوبی مراحل کدنویسی یک پلاگین جی کوئری رو یاد می گیرید. در جلسات اینده هم تمرینات خوبی در پروژه های کلی دوره خواهیم داشت. با ما همراه باشید.

مطالب مطرح شده در این جلسه عبارتند از :

  • توضیح در مورد پلاگین نویسی و مزیت های آن
  • تشریح تفاوت های بین پلاگین و کتابخانه
  • یاداوری، نحوه کار و کدنویسی جی کوئری
  • ساختار و نحوه استفاده از پلاگین های جی کوئری
  • معرفی ویژگی $.fn و نحوه ایجاد و تعریف پلاگین جدید در جی کوئری
  • نحوه کدنویسی پلاگین برای استفاده به صورت زنجیروار
  • محافظت از $ و جلوگیری از تداخل کدها با استفاده از توابع خو صدازننده
  • تشریح مرحله به مرحله مفهوم self-invoking-functions
  • نحوه مختصر سازی کدنویسی پلاگین ها و جلوگیری از تعریف چند متد برای یک پلاگین
  • استفاده از متد each و کاربرد آن در پردازش عناصر تحت تاثیر پلاگین
  • نحوه پاس دادن پارامتر(option) های پلاگین و تعین آنها توسط کاربر
  • ادغام option های کاربر با option های پیشفرض پلاگین با استفاده از متد extend
  • ذکر نکاتی مهم در رابطه با نحوه کدنویسی صحیح پلاگین ها
  • استفاده از ساختار فایل و پوشه بندی مناسب برای پلاگین
  • تمرین : نوشتن پلاگینی برای افزودن آدرس لینک ها به عنوان آن
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

بهنام جعفری

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

مصطفی قدیم پور

با سلام
ویدیو جلسات18و24و26 نیستش خواشمندم بررسی کنید.

لقمان آوند

سلام
تصحیح شد
ممنون بابت گزارشتون

Kamal Rahimi

سلام استاد آوند. ممنونم بابت آموزش های خوبتون. فایل این جلسه انگار حذف شده. لطفا یه نگاه میندازین؟ ممنونم

Arash Taghavi

سلام خسته نباشید.استاد در من کد زیر رو بدون extend نوشتم.واسه شما جواب نداد.اما واسه من جواب داد.چرا؟ 🙂 اگه دقت کنید پارامتر bgColor رو عمدا پاس ندادم به متد a ولی همچنان color ست شد و bgColor از حالت دیفالت که رنگ خاکستری برای دکمه ها هست استفاده کرد.ممنون

Click me!
 $.fn.a = function (option) {
  var set = option;
  this.css('color', set.color);
  this.css('backgroundColor', set.bgColor);
  return this;
 };
 $("#btn").a({
  color:'red'
 })
لقمان آوند

کدتون ناقص اومده. اگه میشه فایلش رو بدید

Arash Taghavi

مرسی از هر دو استاد عزیز

Arash Taghavi

من آموزش هارو دقیق دنبال میکنم اما خیلی جاها نمیتونم بفهمم this داره چیکار میکنه.اگه میشه یه توضیح کلی بدین ممنون میشم

وحید صالحی

this اشاره میکنه به شی جاری یعنی همون کلاس یا آی دی که رویدادی براش تعریف کردید مثلا می گید زمانی که رو عنصری با کلاس test کلیک شد یک function ایجاد بشه درون این function با this اشاره می کنید به همون عنصری که کلاس test رو داره

Arash Taghavi

خسته نباشید.امیدوارم تندی منو توو کامنت قبلی ببخشین 🙂
سوالی که داشتم این بود که شما توو قسمت نوشتن پلاگین گفتین this اشاره میکنه به سلکتور
$.fn.test=function(){}
میخواستم بدونم این اشاره کردن this به سلکتور یه چیز از پیش نعریف شده س؟ یا اینکه مثلا فقط در اینجا this به سلکتور اشاره میکنه،چون اصلا متوجه نشدم که درون دستور $.fn.test=function(){}، کلمه ی this به چی اشاره میکنه.ممنون.

لقمان آوند

بله از قبل مشخص هست در جاوااسکریپت. اینجا this همون سلکتوری میشه که پلاگین رو روش صدا زدیم. مثلا در پلاگین greenify اگه this استفاده کنی و اینجوری صداش بزنی :

$("div.d1").greenify()

در واقع this اینجا میشه معادل $(“div.d1”) .
اگه رو سلکتور دیگه صدا زده بشه میشه معادل همون .

Farid S

شما برای پلاگین نویسی از کلمه this استفاده کردید که مختص جاوا اسکریپت خام هست. چرا؟ شما فقط نوشتید و توضیحی راجبش ندادید.
من آموزش های جاوا اسکریپت رو سریع ازشون گذشتم تا برسم به جی کوئری و اینجا به مشکل برخوردم! آموزش هاتو خیلی زمان بر و درنتیجه کسل کننده هستن
درضمن انجمن پاسخگو نداره.

لقمان آوند

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

Farid S

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

لقمان آوند

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

حمید رضا مصطفی زاده

سلام استاد.
این پلاگین نویسی جی کوئری چه سودی داره وقتی این همه پلاگین آماده وجود داره؟
به طور مثال اگر پلاگین خاصی رو هم بخوایم کاستومایز کنیم وقتی جی کوئری بلد باشیم میتونیم تغییرات رو روی آن ایجاد کنیم.
استاد از دس این خروس بی محل 🙂 🙂 🙂 🙂 آخر این جلسه خیلی جالب بود!!!
حالا متوجه میشیم چرا شما اکثر ضبط هاتون رو نیمه شب انجام میدید.
یه خواهش لطفا پروژه ها تا جایی که امکان داره تو جلسات جداگانه بگذارید و به صورت مجزا باشه
تا هم فرصت تمرینش باشه و هم راحتر دانلود بشه
ممنون

لقمان آوند

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

سعی میکنیم برای هر پروژه یک جلسه جداگانه بزاریم.

لقمان آوند

ممنون
چشم …

لقمان آوند

آخر ویدیو گفتم از کجا میاد ;D
با این وضعیت شاید مجبور شیم جلسات بعدی رو واقعا بریم تو طبیعت ضبط کنیم. البته یه جای بی سر و صدا !

لقمان آوند

ممنون
جدا افتا بود از جمع مرغا ;D

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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