نحوه ی ایجاد پلاگین جی کوئری ( JQuery Plugin )

نحوه ی ایجاد پلاگین جی کوئری ( JQuery Plugin )

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

نکته: قبل از شروع مقاله شما باید دانش پایه ای در مورد کتابخانه جی کوئری داشته باشید، جهت این کار می توانید به مقاله ی “جی کوئری چیست؟” مراجعه فرمائید.

چرا باید پلاگین جی کوئری بسازیم؟

در زیر لیست کوتاهی از دلایلی که ما را مایل به ایجاد پلاگین ها می کند، نوشته شده است:

  • قابلیت استفاده مجدد Reuseability
  • کپسوله کردن(Encapsulation)
  • سادگی مراحل ایجاد
  • ماندگاری
  • استفاده ی عمومی و همگانی
  • جلوگیری از تداخل فضاهای اسمی(Namespaces)

با توجه به موارد بالا می توان گفت مهمترین دلیل ایجاد پلاگین ها کپسوله کردن کدهای نوشته شده ی شما جهت استفاده ی مجدد در داخل پروژه هایتان است. پلاگین ها بسادگی قابل ایجاد هستند، بنابراین ساده سازی و ارتقای کدهای نوشته شده در آن در آینده نیز بسیار ساده خواهد بود. اگر شما بخواهید پلاگین خود را برای استفاده ی عمومی ایجاد کنید، می توانید فضای اسمی آنرا طبق سلیقه ی خود انتخاب کنید. در نهایت اگر تمامی مزیتهای فوق شما را ترغیب نمی کند باید بدانید که نوشتن، استفاده و استفاده ی مجدد از پلاگین ها کاری لذت بخش است.

Jquery Plugin چه کاری انجام می دهد؟

به عنوان یک توضیح ساده، پلاگین های جی کوئری مفاهیم زیر را دربرمیگیرند:

  • ارسال مجموعه ای از عناصر DOM
  • دستکاری و کار با عناصر DOM
  • بازگرداندن اشیاء JQuery

تعریف پلاگین

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

$.fn.watermark = function(options) { /* … */ }//Shortcut for jQuery.prototype.watermark = function(options) { /* … */ }

اگر نگاهی به سورس اصلی JQuery بیاندازید متوجه خواهید شد که دستور $.fn فقط یک میانبر برای JQuery.prototype است.

مشکلی که اینجا وجود دارد این است که ممکن است علامت $ با کتابخانه های جاوااسکریپتی دیگری که در صفحه استفاده کرده اید، تداخل ایجاد کند. بهترین راه برای حل این مشکل استفاده از خود جی کوئری برای معرفی پلاگین است که به این روش تابع خود عملگر ناشناس(self-invoking anonymous function) می گویند. این نوع تابع، تابعی بدون نام است که فقط بوسیله ی JQuery قابل فراخوانی و اجراست، پس در اینجا مسئله ی تداخل حل می شود.

نحوه ی معرفی پلاگین با روش ناشناس بصورت زیر خواهد بود:

(function($){$.fn.watermark = function(options) { … }

})(jQuery);

چهارچوب

قبل از اینکه یک مثال واقعی از پلاگین را ایجاد کنیم، دوست دارم کمی در مورد چهارچوب یا همان Context صحبت کنیم. در بدنه ی اصلی هر پلاگین کلمه ی رزرو شده ی this به شیئی که پلاگین بر روی آن عمل می کند، اشاره می کند. به مثال زیر دقت کنید:

(function( $ ){$.fn.myPlugin = function() {

// there’s no need to do $(this) because

// “this” is already a jquery object

// $(this) would be the same as $($(‘#element’));

this.fadeIn(‘normal’, function(){

// the this keyword is a DOM element

});

};

})( jQuery );

$(‘#element’).myPlugin();

مقدمات

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

(function( $ ){$.fn.maxHeight = function() {

var max = 0;

this.each(function() {

max = Math.max( max, $(this).height() );

});

return max;

};

})( jQuery );

var tallest = $(‘div’).maxHeight(); // Returns the height of the tallest div

مثال فوق یک پلاگین بسیار ساده است که با فراخوانی آن عرض بزرگترین کنترل div روی صفحه را برای ما بر می گرداند.

انتقال زنجیره ای(Maintaining Chainability)

مثال قبلی یک عدد صحیح را برمی گرداند که نشان دهنده عرض بزرگترین div روی صفحه است، اما اغلب اوقات هدف یک پلاگین تغییر مجموعه از عناصر روی صفحه بصورت پشت سرهم است، و عناصر را یکی پس از دیگری به متد بعدی داخل زنجیره ارجاع می دهد. این یکی از زیبایی های جی کوئری و یکی از دلایلی است که این کتابخانه را بسیار پرطرفدار نموده است. برای ایجاد انتقال زنجیره ای در داخل یک پلاگین باید مطمئن شوید که پلاگین موردنظر اشاره گر this را بعنوان خروجی برمیگرداند.

(function( $ ){$.fn.lockDimensions = function( type ) {

return this.each(function() {

var $this = $(this);

if ( !type || type == ‘width’ ) {

$this.width( $this.width() );

}

if ( !type || type == ‘height’ ) {

$this.height( $this.height() );

}

});

};

})( jQuery );

$(‘div’).lockDimensions(‘width’).css(‘color’, ‘red’);

پارامترهای پلاگین

مرحله ی بعدی اضافه کردن پارامترها به Plugin است. شما می توانید به روشهای مختلفی این کار را انجام دهید، اما بهترین روشی که می توانید بکار ببرید ارسال یک پارامتر که دارای تنظیمات داخلی است، می باشد. کد زیر این روش را نمایش می دهد:

$(‘#helloWorld’).watermark({text: ‘City’,

class: ‘watermark’

});

به جای نوشتن مثلا کد watermark(“City”, “watermark”)، در صورتی که کد فوق خود به خود دارای مستندات خواهد شد. زیرا هرکس به تعریف تابع شما نگاه کند متوجه می شود که مقدار ‘City’ مربوط به پارامتر text و مقدار ‘watermark’ مربوط به پارامتر class است.

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

$.fn.watermark.defaultOptions = {class: ‘watermark’,

text: ‘Enter Text Here’

}

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

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

$.fn.watermark.defaultOptions.class = “watermark2″;$(‘#helloWorld’).watermark();$(‘#goodbyeWorld’).watermark();

در کد فوق مقدار watermark2 به عنوان مقدار پیش فرض برای پارامتر class تعیین شده و در خطهای ۲ و ۳ که از این پلاگین استفاده شده است مقدار پیش فرض پارامتر class شامل watermark2 می باشد.

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

(function($) {$.fn.watermark = function(options) {

options = $.extend({}, $.fn.watermark.defaultOptions, options);

return this;

}

})(jQuery);

JQuery متدی به نام extend دارد که محتویات دو یا چند شیء را با هم دغام کرده و در اولین شیء ذخیره می کند.

به مثال زیر توجه کنید:

(function( $ ){$.fn.tooltip = function( options ) {

// Create some defaults, extending them with any options that were provided

var settings = $.extend( {

‘location’ : ‘top’,

‘background-color’ : ‘blue’

}, options);

return this.each(function() {

// Tooltip plugin code here

});

};

})( jQuery );

$(‘div’).tooltip({‘location’ : ‘left’

});

در مثال فوق بعد از فراخوانی پلاگین tooltip با پرامترهای ارسال شده، مقدار پیش فرض location به left تغییر می یابد در حالی مقدار تنظیم background-color همان مقدار پیشفرض یعنی blue باقی می ماند.

توابع عمومی(Public Functions)

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

(function($) {$.fn.watermark = function(options) {

options = $.extend({}, $.fn.watermark.defaultOptions, options);

//Public Function

$.fn.watermark.greet = function(name) {

alert(‘Hello, ‘ + name + ‘, welcome to Script Junkies!’);

};

$.fn.watermark.defaultOptions = {

class: ‘watermark’,

text: ‘Enter Text Here’

}

})(jQuery);

در مثال بالا با اجرای دستور $.watermark.greet(‘binahaiat’) پیغام ‘Hello, Binahaiat, welcome to Script Junkies!’ بر روی صفحه نمایش داده می شود.

نکات مهم

در زیر لیستی از مهمترین نکاتی که در هنگام ایجاد یک پلاگین باید درنظر داشته باشید، نوشته شده است:

  • نامگذاری فایل پلاگین شما باید از ساختار jquery.[name of plugin].js تبعیت کند.
  • هر متد یا تابعی که می نویسید باید در انتهای آن یک علامت ; قرار دهید در غیر اینصورت پلاگین شما در هنگام فشرده سازی(minimize) دچار مشکل می شود.
  • متدهای شما باید شیئی از نوع جی کوئری را برگرداند.
  • در داخل بدنه ی plugin کلمه ی this به شی ء جاری اشاره دارد.

قالب آماده

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

(function($){$.myPlugin = function(settings){

var config = {

‘foo': ‘bar’

};

if (settings){$.extend(config, settings);}        // code here

return this;

};

})(jQuery);

مثال واقعی

مثال زیر(که می توانید از بخش دانلود دریافت کنید) یکی از ساده ترین مثالها برای یادگیری نحوه ی نوشتن پلاگین جی کوئری است.

نکته: در مثال زیر از توابع setInterval() و fadeIn() و fadeout() جهت نمایش تصاویر پشت سرهم و با فاصله ی زمانی خاص استفاده شده است.

با ما باشید