• 1 رای - 4 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مقاله : مبحث Chainable در شی گرای
#1
سلام به همه دوستان
. یک مقاله در مورد Chainable ترجمه کردم و البته کمی هم زیاد و کمش کردم
امید وارم به درد دوستان بخوره .
شما به وسیله chainable می توانید متد های مثل
کد پی‌اچ‌پی:
$("myPanel").setStyle("border""solid 2px #f00").setStyle("background""#ffc").show(); 
را درست کنید (که در Jquery ) دیده مشه

چگونه متد های Chainable را در جاوا اسکریپ درست کنیم

در جاوا اسکریپ اگر مقدار خروجی "return " یک متد رو . مشخص نکنید . مقدار undefined رو
به صورت پیشفرز بر می گردونه
. راز ساخت chainable در مقدار return است .
که در حقیقت باعث میشه شما بتونی به مقدار یک تابع (که از return اومده ) به وسیله اپراتور "." (نقطه)
وصل بشی

یک مثال معمولی رو ببینید (بدون chainable)
کد پی‌اچ‌پی:
function DomElement(elementId) {  
    
this.element document.getElementById(elementId);  
}  
DomElement.prototype = {  
    
setStyle: function(propval) {  
        
this.element.style[prop] = val;  
    },  
    
show: function() {  
        
this.setStyle("display""block");  
    },  
    
hide: function() {  
        
this.setStyle("display""none");  
    }  

برای اجرای کد بالا . شما باید به صورت زیر عمل کنید
کد پی‌اچ‌پی:
var myPanel = new DomElement("myPanel");  
myPanel.setStyle("border""solid 2px #f00");  
myPanel.setStyle("background""#ffc");  
myPanel.show(); 
بهترین کاری که می توانید بکنید اینه که با دستور with مثال بالا رو کمی کوچیک کنید
کد پی‌اچ‌پی:
var myPanel = new DomElement("myPanel");  
with (myPanel) {  
    
setStyle("border""solid 2px #f00");  
    
setStyle("background""#ffc");  
    
show();  


ولی باز هم کد ها . زیاد هستند
chainable شده مثال بالا به صورت زیر است
کد پی‌اچ‌پی:
function DomElement(elementId) {  
    
this.element document.getElementById(elementId);  
}  
DomElement.prototype = {  
    
setStyle: function(propval) {  
        
this.element.style[prop] = val;  
        return 
this;  
    },  
    
show: function() {  
        return 
this.setStyle("display""block");  
    },  
    
hide: function() {  
        return 
this.setStyle("display""none");  
    }  
}  
// Add a shortcut method for creating a DomElement object:  
$ = function(elementId) {  
    return new 
DomElement(elementId);  

برای ساخت خود کد ها
و برای اجراش هم
کد پی‌اچ‌پی:
$("myPanel").setStyle("border""solid 2px #f00").setStyle("background""#ffc").show(); 
به همین راحتی!!
در این آدرس هم
http://docs.jquery.com/Tutorials:How_jQu..._jQuery.29
سایت Jquery در این مورد کامل توضیح داده

منبع : http://updatepanel.net/2008/10/18/making...avascript/

امید وارم که به دردتون خورده باشه Blush
اگر سوالی هم بود . در خدمتم
  پاسخ
تشکر شده توسط : oia Y.P.Y admin Na3r zoghal Alimokhlesi amir.s parvane


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان