ugrás a tartalomhoz

prototype.js - lehet egyszerűbben?

Babar · 2007. Május. 1. (K), 23.32
Ismerkedem a prototype-al, csináltam benne 2-3 diszkrét js példát, de lehet, hogy lehetne egyszerűbben/jobban is. Szóval az alábbiak működnek, de könnyen lehet, hogy a prototype lehetőségeit nem használtam ki, vagy nem illeszkedik a megoldásom a prototype filozófiájához.

Először csináltam két egyszerű fv-t:
  1. // egy elem első adott típusú szülőjét adja vissza - az elemet magát is beleértve  
  2. // pl: getParentNode(getElementById('new'),'FORM');  
  3. getParentNode = function(element, nodeName) {  
  4.     e = element;  
  5.     while(e.nodeName != nodeName && e.parentNode)  
  6.         e = e.parentNode;  
  7.     return e;  
  8. }  
  9.   
  10. // egy elem első adott class-ú szülőjét adja vissza - az elemet magát is beleértve  
  11. // pl: getParentNodeByClassName(getElementById('new'),'anyClass');  
  12. getParentNodeByClassName = function(element, myClassName) {  
  13.     e = element;  
  14.     while(!Element.hasClassName(e, myClassName) && e.parentNode) {  
  15.         e = e.parentNode;  
  16.     }  
  17.     return e;  
  18. }  
Aztán a window.onload eseményhez írtam egy fv. Ebben három funkciót szerettem volna megvalósítani:
1. Adott elemen kattintva más elem(ek) kinyitását/becsukását.
2. Egy select változásakor (onchange) az ót tartalmazó form submit eseménye fusson le
3. Egy elemre (mondjuk egy button-ra) kattintva az őt tartalmazó form submit eseményének jóváhagyására kérdezzünk rá (a kérdés szövege a title paraméterbe kerül)
  1. function myLoader(evt) {  
  2.   
  3.     // Az onClickHideShow elem kattintásra becsukja/kinyitja az őt tartalmazó  
  4.     // hideShowContainer elemen belüli openable elemeket  
  5.     var OpenerObject = Class.create();  
  6.     OpenerObject.prototype = {  
  7.   
  8.        initialize: function(opener) {  
  9.             this.opener = $(opener);  
  10.             this.container = getParentNodeByClassName(this.opener,'hideShowContainer');  
  11.             this.openable = document.getElementsByClassName('openable',this.container);  
  12.             this.opener.onclick =  
  13.                this.openClose.bindAsEventListener(this);  
  14.   
  15.        },  
  16.   
  17.        openClose: function(evt, extraInfo) {  
  18.             $A(this.openable).each(  
  19.                 function(element, index) {  
  20.                     Element.toggle(element);  
  21.                 }  
  22.             );  
  23.        }  
  24.     };  
  25.   
  26.     var openers = new Array();  
  27.     $$('.onClickHideShow').each(  
  28.         function (elem, index) {  
  29.             openers.push(new OpenerObject(elem));  
  30.         }  
  31.     );  
  32.   
  33.     // Az onChangeSubmit select elemre megváltozása a form sumbit-jét is magával vonja  
  34.     var OnChangeSubmitObject = Class.create();  
  35.     OnChangeSubmitObject.prototype = {  
  36.         initialize: function(selectElement) {  
  37.             this.selectElement = $(selectElement);  
  38.             this.formElement = getParentNode(this.selectElement,'FORM');  
  39.             this.selectElement.onchange =  
  40.                 this.submitForm.bindAsEventListener(this);  
  41.   
  42.         },  
  43.   
  44.         submitForm: function(evt, extraInfo) {  
  45.             this.formElement.submit();  
  46.        }  
  47.     }  
  48.   
  49.     var submitSelects = new Array();  
  50.     $$('.onChangeSubmit').each(  
  51.         function (elem, index) {  
  52.             submitSelects.push(new OnChangeSubmitObject(elem));  
  53.         }  
  54.     );  
  55.     // A confirm elemre kattintva a form jóváhagyását előbb jóvá kell hagyni  
  56.     var ConfirmObject = Class.create();  
  57.     ConfirmObject.prototype = {  
  58.         initialize: function(element) {  
  59.             this.element = $(element);  
  60.             this.formElement = getParentNode(this.element,'FORM');  
  61.             this.element.onclick =  
  62.                 this.confirmSubmit.bindAsEventListener(this);  
  63.   
  64.         },  
  65.   
  66.         confirmSubmit: function(evt, extraInfo) {  
  67.             if (confirm(this.element.getAttribute('title'))) this.formElement.submit();  
  68.             else return false;  
  69.        }  
  70.     }  
  71.   
  72.     var confirmElements = new Array();  
  73.     $$('.confirm').each(  
  74.         function (elem, index) {  
  75.             confirmElements.push(new ConfirmObject(elem));  
  76.         }  
  77.     );  
  78.   
  79. }  
És végül a myLoader eseményhez csatolása:
  1. Event.observe(window, 'load', myLoader, false);  
Minden értékes javaslatot, javítást szívesen vennék.

----
Babar
 
1

szvsz

toxin · 2007. Május. 2. (Sze), 08.35
- a getParentNode-getParentNodeByClassName miért nem jó a http://www.prototypejs.org/api/element/up ?
getParentNodeByClassName(this.opener,'hideShowContainer')
>
this.opener.up('.hideShowContainer');

- eséménykezelésre miért a DOM Level 0-ás eseménykezelő modelt?

this.opener.onclick = this.openClose.bindAsEventListener(this);
>
this.opener.observe('click',this.openClose.bindAsEventListener(this));

http://www.prototypejs.org/api/element/observe

- szvsz érdemesebb az 1.5-el bevezett 'chain method' használni, egységesen a kódban
Element.toggle(element);
>
element.toggle();
http://www.prototypejs.org/api/element

üdv t
2

Épp ilyenekre gondoltam...

Babar · 2007. Május. 2. (Sze), 11.52
Épp ilyen észrevételeket szerettem volna begyűjteni. Köszönöm! :)

Az up metódus teljesen elkerülte a figyelmemet, pedig gyanítottam, hogy kell legyen ilyen funkció.

A másik kettő is hasznos, bár inkább formai, szemlélet beli kérdés - de megfogadom a tanácsot!

----
Babar