نوشتن افزونه برای jQuery–قسمت صفرم

by MDP 19. July 2011 22:42

دو روزه درگیر نوشتن یه پلاگین هستم که بتونه آخرین Tweet ها رو نشون بده.البته با توجه به فیلتر بودن Twitter باید از یه پراکسی برای این منظور استفاده کرد که کار سختی نیست و راحت میشه نوشتش.به زودی این پلاگین رو که به صورت Open Source می خوام انتشارش بدم رو روی CodePlex میزارم.

برای قشنگ کردن و چند تا افکت حسابی تصمیم گرفتم که از jQuery استفاده کنم و خروجی کار رو به صورت یک Plugin برای jQuery در بیارم.با اینکه خیلی وقته از jQuery استفاده می کنم ولی هنوز اطلاعات مفصلی از پلاگین نویسی نداشتم.به همین خاطر توی گوگل یکم سرچ کردم و به وبلاگ آقای نیما بغدادی رسیدم(+).آموزش سه قسمتی ایشون در نوشتن پلاگین خوب بود ولی یه مشکلی داره به نظر من.

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

قسمت صفرم :

من به شخصه همیشه از قسمت صفرم کتاب هام متنفر بودم.ولی الان مجبورم که این قسمت رو بنویسم. Smile

برای نوشتن هر پلاگین jQuery شما باید jQuery رو بشناسید و حداقل این مقاله ها رو مطالعه کنید.

 

()jQuery.extend

 

یکی از کتاب روال های اصلی jQuery که حتمی باید اون رو خوب بشناسید jQuery.extend هستش.

این روال همونطوری که از اسمش پیداست وظیفه گسترش(یا به عبارت دیگر ترکیب) چیز هایی(!) رو بر عهده داره.شما با این روال میتونید این فعالیت هارو انجام بدید :

  1. گسترش یک آرایه از Property ها
  2. گسترش یک آرایه از Event ها یا روال ها
  3. هر دو مورد بالا با هم.

ولی گسترش به چه معناست؟

گسترش یک آرایه از Property ها : فرض کنید شما پلاگینی نوشتید که وظیفه تغییر رنگ یک object رو بر عهده داره.اگر شما در نظر داشته باشید که بتونید هر دفعه یک رنگ خاصی مد نظر شما اعمال بشه باید بتونید مقدار رنگ رو به پلاگینتون پاس بدید.مثل این :

$("#someDive").ChangeColorPlugin({
   color:"#f97141"
});

گسترش یک آرایه از Event ها یا روال ها :حتمی توی پلاگین های jQueryUI دیدید که یک سری از Event ها از بیرون کلاس قابل دستیابی هستند.

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

$("#someDive").ChangeColorPlugin({
   OnCompelete:function(){alert("done")}
});

هر دو مورد بالا با هم: شاید هم هردو مورد باهم :

$("#someDive").ChangeColorPlugin({
   color:"#f97141",
   OnCompelete:function(){alert("done")}
});

روش انجام این گسترش ها با روال jQuery.extend هست.

 

متد jQuery.extend که جزو متد های اصلی jQuery هست به صورت زیر تعریف میشه :

jQuery.extend( [deep,] target, object1, [objectN] )

مشخصات پارامتر ها :

  • deep : طبق گفته سایت jQuery در صورت True بودن انجام گسترش به صورت بازگشتی خواهد بود.یعنی داخل آبجکت ها هم برای ترکیب جست و جو میشه.این گزینه برای گسترش متد ها کاربرد داره.
  • target : آبجکتی که باید گسترش پیدا کنه
  • object1 : مقداری که شما به target میخواید که اضافه بشه.
  • objectN : تعداد آبجکت های اضافه شونده محدود نیست.یعنی شما تا N آبجکت رو میتونید به یک آبجکت گسترش بدید.

برای گسترش سه حالت ذکر شده بالا محتمل هست.همه این حالات رو ما بررسی می کنیم :

روش پیاده سازی گسترش یک آرایه از Property ها :

فرض کنید شما آبجکتی به صورت زیر دارید :

var defaults = {
    Color: '#cccccc',
    Interval: 1000,
};

و لی قصد دارید این آرایه رو با آرایه زیر گسترش بدید

var obj = {
    Color: '#c3c3c3',
    BaseColor :'#ffffff'
};

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

var obj2= $.extend({}, defaults , obj);

پس از extend کردن آبجکت defaults به obj طبق تعریف متد extend آبجکت defaults به این آبجکت تبدیل میشه :

var defaults = {
    Color: '#c3c3c3',
    Interval: 1000,
    BaseColor :'#ffffff'
};

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

روش پیاده سازی گسترش یک آرایه از Event ها یا روال ها:

این روش هم دقیقا مثل روش قبلی پیاده سازی میشه به همین خاطر من فقط با چند تا مثال مفهوم رو ارائه می کنم:

فرض کنید آبجکت اول شما این آبجکت باشه :

var obj3 = {
    show : function(){ /*Some logic goes here*/ },
    Hide : function(){ /*Some logic goes here*/ }
}

و همچنین این آبجکت که قراره به obj3 گسترش پیدا کنه :

var obj4 = {
    Hide : function(){ /*this is another logic*/ },
    Init : function(){ /*Some logic goes here*/ }
}

و حالا گسترش :

var obj5= $.extend(true, obj3 , obj4);

از این به بعد obj3 به این صورت خواهد بود

var obj3 = {
    show : function(){ /*Some logic goes here*/ },
    Hide : function(){ /*this is another logic*/ },
    Init : function(){ /*Some logic goes here*/ }
}

تنها نکته اینجاست که شما باید مقدار پارامتر deep رو به True مقدار دهی کنید تا متد های شما داخل آبجکت شما هم گسترش پیدا کنن.

روش پیاده سازی هر دو مورد بالا با هم:

پیاده سازی اصلی برای Property ها و متد ها رو یاد گرفتیم، ولی حالا چه طور ترکیب این دو رو استفاده کنیم؟

ابتدا اجازه بدید آبجکت های اولیه و فرضی خودمون رو معرفی کنیم :

آبجکت اول که همون آبجکت اصلی هست به صورت زیر فرض می کنیم :

var obj6 = {
    Color : '#f97141',
    interval : 1000,
    show : function() { alert('Show'); },
    hide : function() { alert('hide from obj6'); }
}

و همچنین آبجکت ثانویه :

var obj7 = {
    Color : '#c3c3c3',
    hide : function() { alert('hide from obj7'); }
}

برای ترکیب مثل روش های قبل عمل می کنیم.فقط چون ما در قصد گسترش متد هامون هم داریم باید مقدار پارامتر deep رو به true مقدار دهی کنیم :

var obj8= $.extend(true, obj6 , obj7);


پایان قسمت صفرم.

به روزرسانی :

برای فهم بیشتر یه مثال ساده آماده کردم  که میتونید از فایل زیر دریافت کنید:

Example.zip (32.42 kb)

Tags: ,

jQuery

blog comments powered by Disqus

My Groups

Poll

از چه پلتفرمی برای توسعه استفاده می کنید



Show Results

Month List