Ontwikkelaar Notities voor prototype.js
Omvat versie 1.5.0
Nieuw! PDF van O'Reilly (Engels)
Inhoudsopgave
- Wat is het?
- Gerelateerde artikelen
- Nuttige functies
- Gebruik van de $() functie
- Gebruik van de $$() functie
- Gebruik van de $F() functie
- Gebruik van de $A() functie
- Gebruik van de $H() functie
- Gebruik van de $R() functie
- Gebruik van de Try.these() functie
- Het Ajax object
- Gebruik van de Ajax.Request class
- Gebruik van de Ajax.Updater class
- Wat zijn al die "?" en velden?
- Enumeratie... Wau!, Karamba! Wahoo!
- Loops, Ruby-stijl
- Je array's op steroïden
- Referentie voor prototype.js
- Uitbreidingen op JavaScript classen
- Uitbreidingen voor de Object class
- Uitbreidingen voor de Number class
- Uitbreidingen voor de function class
- Uitbreidingen voor de String class
- Uitbreidingen voor de Array class
- Uitbreidingen voor het document DOM object
- Uitbreidingen voor het Event object
- Nieuwe objecten en classen gedefinieerd door prototype.js
- Het PeriodicalExecuter object
- Het Prototype object
- Het Enumerable object
- Het Hash object
- De ObjectRange class
- Het Class object
- Het Ajax object
- Het Ajax.Responders object
- De Ajax.Base class
- De Ajax.Request class
- Het options argument object
- De Ajax.Updater class
- De Ajax.PeriodicalUpdater class
- Het Element object
- De Element.ClassNames class
- Het Abstract object
- De Abstract.Insertion class
- Het Insertion object
- De Insertion.Before class
- De Insertion.Top class
- De Insertion.Bottom class
- De Insertion.After class
- Het Field object
- Het Form object
- Het Form.Element object
- Het Form.Element.Serializers object
- De Abstract.TimedObserver class
- De Form.Element.Observer class
- De Form.Observer class
- De Abstract.EventObserver class
- De Form.Element.EventObserver class
- De Form.EventObserver class
- Het Position object (preliminary documentation)
Wat is het?
In het geval je het nog niet gebruikt hebt, prototype.js is een JavaScript bibliotheek geschreven door Sam Stephenson. Deze bijzonder goed doordachte en goed geschreven, standards compliant broncode neemt een groot deel van de last van je schouders, verbonden met het creëren van uitgebreide, zeer interactieve web pagina's, karakteristiek voor Web 2.0.
Als je de bibliotheek recentelijk hebt gebruikt, heb je waarschijnlijk wel gemerkt dat de documentatie niet een van de sterkste punten is. Zoals zoveel ontwikkelaars voor mij, heb ik prototype.js leren kennen door de broncode te lezen en er mee te experimenteren. Ik dacht dat het een goed idee was om notities te maken tijdens het leren en deze met iedereen te delen.
Ik bied ook een onofficiële referentie van de objecten, classen, functies en uitbreidingen geleverd bij deze bibliotheek.
Ontwikkelaars bekend met de Ruby programmeertaal zullen, terwijl je deze voorbeelden en referentie leest, duidelijke overeenkomsten waarnemen tussen Ruby's ingebouwde classen en veel van de in deze bibliotheek geïmplementeerde uitbreidingen.
Gerelateerde artikelen
Gevorderden JavaScript handleiding (engels).
Nuttige functies
De bibliotheek komt met veel voor gedefinieerde objecten en nuttige functies. Het voor de hand liggende doel van deze functies is om je een hoop herhaaldelijk typewerk en taken te besparen.
Gebruik van de $() functie
De $() functie is een handige afkorting voor de all-te-frequente document.getElementById() functie van de DOM. Net de DOM functie retourneert deze het element van het id die is doorgegeven als argument.
Anders dan de DOM functie, gaat deze functie verder. Het geretourneerde element object zal worden aangevuld met extra methoden. Deze extra methoden versimpelen vele taken, zoals het verbergen/tonen van het element, de afmetingen opvragen, scrollen naar het element, etc. De lijst met methoden die zijn toegevoegd aan het geretourneerde element object kun je vinden in de referentie van het Element object.
<html>
<head>
<title> Test Page </title>
<script src="prototype-1.5.0.js"></script>
<script>
function test1(){
var d = $('mijnDiv');
alert(d.innerHTML);
d.hide();
d.show();
d.addClassName('active');
}
function test2(){
var divs = $('mijnDiv','mijnAndereDiv');
for(i=0; i<divs.length; i++){
alert(divs[i].innerHTML);
}
}
</script>
</head>
<body>
<div id="mijnDiv">
<p>Dit is een paragraaf</p>
</div>
<div id="mijnAndereDiv">
<p>Dit is een andere paragraaf</p>
</div>
<input type="button" value="Test1" onclick="test1();"><br>
<input type="button" value="Test2" onclick="test2();"><br>
</body>
</html>
Een ander handigheidje van deze functie is dat je zowel het id string als het element object zelf kunt meegeven. Dit maakt deze functie erg nuttig maakt voor gebruik binnen andere functies die ook beide vormen als argument aan kunnen.
Gebruik van de $$() functie
De $$() functie zal je veel helpen als je consistent CSS scheid van de inhoud. Het analyseert een of meerdere CSS expressies die gefilterd worden, analoog aan diegene die gebruikt worden om CSS regels te definiëren en retourneert de elementen die aan deze filters voldoen.
Het is zo eenvoudig om te gebruiken, absurd gewoon. Zie hier.
<script>
function test$$(){
/*
in het geval CSS niet je sterke zijde is, de expressie hieronder
betekent 'vind alle INPUT elementen die binnen de elementen
met class=field zijn binnen een DIV met id loginForm.'
*/
var f = $$('div#loginForm .field input');
var s = '';
for(var i=0; i<f.length; i++){
s += f[i].value + '/';
}
alert(s); // shows: "janjansen1/geheim/"
//nu met meer dan één expressie doorgegeven
f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
s = '';
for(var i=0; i<f.length; i++){
s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
}
alert(s); //shows: "janjansen1/geheim/Gebruikersnaam:/Wachtwoord:/"
}
</script>
<div id='loginForm'>
<div class='field'>
<span class='fieldName'>Gebruikersnaam:</span>
<input type='text' id='txtName' value='janjansen1'/>
</div>
<div class='field'>
<span class='fieldName'>Wachtwoord:</span>
<input type='password' id='txtPass' value='geheim' />
</div>
<input type='submit' value='login' />
</div>
<input type=button value='test $$()' onclick='test$$();' />
Een korte opmerking over snelheid. De huidige implementatie van de $$() functie in prototype.js is niet bijzonder efficiënt. Als je van plan bent om gebruik makend van deze functie diepe en complete HTML documenten af te lopen, zou je misschien kunnen overwegen om andere vrij beschikbare implementaties te gebruiken, mogelijk door simpelweg the $$() functie zelf te vervangen.
Gebruik van de $F() functie
De $F() functie is een andere welkome afkorting. Het retourneert de waarde van elk input controle veld, zoals tekst velden of drop-down lijsten. De functie accepteert als argument zowel het element id als het element object zelf.
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="Joe Doe"><br/>
<input type="button" value=Test3 onclick="test3();"><br/>
Gebruik van de $A() functie
De $A() functie converteert het argument die het ontvangt in een Array object.
Deze functie, gecombineerd met de uitbreidingen voor de Array class, maken het eenvoudiger om, bijvoorbeeld, functies te schrijven die een flexibel aantal argumenten accepteren.
<script>
function shoutOut(){
sayHi('Hallo, ', 'Homer', 'Bart', 'Marge', 'Snowball');
}
function sayHi(){
var names = $A(arguments).slice(1);
var phrase = arguments[0];
for(i=0; i<names.length; i++)
alert(phrase + names[i]);
}
</script>
<input type="button" value="Zeg hi tegen iedereen" onclick="shoutOut();" >
Gebruik van de $H() functie
De $H() functie converteert een opsombaar Hash object in een vergelijkbaar associatief array.
<script>
function testHash()
{
var a = [];
//laten we het associatieve array vullen
a['first'] = 10;
a['second'] = 20;
a['third'] = 30;
//transformeer het in een hash
var h = $H(a);
alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>
Gebruik van de $R() functie
De $R() functie is eenvoudig weg een verkorte schrijfwijze voor new ObjectRange(lowerBound, upperBound, excludeBounds).
Ga naar de ObjectRange class documentatie voor een complete uitleg van deze class. Ondertussen, laten we kijken naar een eenvoudig voorbeeld dat ook het gebruik van iterators met behulp van deeach methode laat zien. Meer over die methode kan gevonden worden in de Enumerable object documentatie.
<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" >
Gebruik van de Try.these() functie
De Try.these() functie maakt het eenvoudig wanneer je, ahum, verschillende functie aanroepen probeert tot een van hen werkt. Het neemt een aantal functies als argument en roept ze een voor een aan, in volgorde, tot een van hen werkt en retourneert het resultaat van de functie aanroep die succesvol was.
De functie xmlNode.text, in het voorbeeld hieronder werkt in sommige browsers en xmlNode.textContent werkt in andere browsers. Door gebruik te maken van de Try.these() functie kunnen we diegene die werkt retourneren.
<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;}
);
}
</script>
Het Ajax object
De nuttige functies zoals hierboven genoemd zijn leuk, maar laten we er niet omheen draaien, ze zijn niet het meest geavanceerd, of wel soms? Je had het waarschijnlijk zelf kunnen doen en misschien heb je wel vergelijkbare functies in je eigen scripts. Maar deze functies zijn slechts het topje van de ijsberg.
Ik ben er zeker van dat je interesse in prototype.js grotendeels is gedreven door de AJAX mogelijkheden. Dus laten we uitleggen hoe de bibliotheek je leven een stuk eenvoudiger maakt wanneer je AJAX logica nodig hebt.
Het Ajax object is een voor gedefinieerd object, gecreëerd om de lastige code af te schermen en vereenvoudigen, die nodig is bij het schrijven van AJAX functionaliteit. Het object bevat een aantal classen die geencapsuleerde AJAX logica bevatten. Laten we sommige van deze bekijken.
Gebruik van de Ajax.Request class
Als je geen hulp bibliotheek gebruikt, schrijf je waarschijnlijk veel code om een XMLHttpRequest object te creëren en om vervolgens de voortgang asynchroon bij te houden, verwerken en de response er uithalen en verwerken. En beschouw jezelf gelukkig als je niet meer dat één type browser hoeft te ondersteunen.
Om AJAX functionaliteit te ondersteunen, bevat de bibliotheek de Ajax.Request class.
Laten we zeggen dat je een applicatie hebt die kan communiceren met de server via de url http://yoursever/app/get_sales?empID=1234&year=1998, welke een XML respons geeft zoals het volgende.
<?xml version="1.0" encoding="utf-8" ?> <ajax-response> <response type="object" id="productDetails"> <monthly-sales> <employee-sales> <employee-id>1234</employee-id> <year-month>1998-01</year-month> <sales>$8,115.36</sales> </employee-sales> <employee-sales> <employee-id>1234</employee-id> <year-month>1998-02</year-month> <sales>$11,147.51</sales> </employee-sales> </monthly-sales> </response> </ajax-response>
Communiceren met de server om deze XML te ontvangen is redelijk simpel gebruik makend van een Ajax.Request object. Het voorbeeld hieronder laat zien hoe dat gedaan kan worden.
<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});
}
function showResponse(originalRequest)
{
//plaats ontvangen XML in een textarea
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br/><textarea id=result cols=60 rows=10 ></textarea>
Zie je het tweede argument dat wordt doorgeven aan de constructor van het Ajax.Request object? Het argument {methode: 'get', argumenten: pars, onComplete: showResponse} representeert een anoniem object in letterlijke notatie. Wat dit betekent is dat we een object welke een eigenschap method heeft die de string 'get' bevat, een andere eigenschap genaamd parameters die de querystring van het HTTP verzoek bevat en een onComplete variabele/methode die de functie showResponse bevat.
Er zijn nog een paar andere eigenschappen die je kunt definiëren en gebruiken in dit object, zoals asynchronous, welke true of false kan zijn en bepaalt of de AJAX aanroep naar de server asynchroon is (de standaard waarde is true.)
Dit argument bepaalt de opties voor de AJAX aanroep. In ons voorbeeld roepen we de url in het eerste argument aan via een HTTP GET commando, geven de querystring omvat in de variabele pars door en het Ajax.Request object zal de showResponse functie aanroepen wanneer het verzoek klaar is en respons heeft ontvangen.
Zoals je misschien weet rapporteert de XMLHttpRequest de voortgang gedurende de HTTP aanroep. Deze voortgang kan vier verschillende stadia bevatten: Laden, Geladen, Interactief of Uitgevoerd. Je kunt het Ajax.Request object een eigen functie aan laten roepen in elk van deze stadia, waarbij Uitgevoerd de meest gebruikelijk is. Om de functie aan te melden bij het object, simpelweg lever een variabele/methode genaamd onXXXXX in de aanroep opties, zoals onComplete uit ons voorbeeld. De functie die je doorgeeft wordt aangeroepen met twee argumenten, het eerste is het XMLHttpRequest (afgekort XHR) object zelf is. Het tweede argument zal het berekende X-JSON respons HTTP header (als die aanwezig is) zijn. Je kunt dan het XHR object gebruiken om de geretourneerde data te verkrijgen en zo nodig de status variabele te controleren, wat de HTTP resultaat code van de aanroep zal bevatten. De X-JSON header is handig als je een script of JSON geformateerde data wilt retourneren.
Twee andere interessante opties kunnen gebruikt worden om de resultaten te verwerken. We kunnen de onSuccess optie specificeren als een functie die moet worden aangeroepen wanneer de AJAX aanroep zonder fouten is uitgevoerd en, omgekeerd, de onFailure optie kan een functie zijn die wordt aangeroepen wanneer een server fout optreed. Precies zoals de onXXXXX opties zullen deze twee ook aangeroepen worden met als argument de XHR van de AJAX aanroep en de berekende X-JSON header.
Er is ook een nieuwe vorm van event callback afhandeling beschikbaar. Als je code hebt die altijd uitgevoerd moet worden voor een specifiek event, onafhankelijk van het AJAX object dat de aanroep veroorzaakte, dan kun je hiervoor het nieuwe object Ajax.Responders gebruiken.
Veronderstel je wilt een visuele indicatie dat een AJAX roep bezig is, zoals een bewegend icon of iets van die aard. Je kunt twee globale event managers gebruiken om je te helpen, één om het icon te laten zien wanneer de eerste aanroep gestart is en een ander om het icon te verbergen wanneer de laatste klaar is. Zie het voorbeeld hieronder.
<script>
var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
<div id='systemWorking'><img src='spinner.gif'>Laden...</div>
Voor een uitgebreidere verklaring, zie de Ajax.Request referentie en de opties referentie.
Gebruik van de Ajax.Updater class
Als je een server eindpunt hebt die reeds geformatteerde HTML terug kan geven, maakt de bibliotheek het met de Ajax.Updater class eenvoudiger voor je. Met deze informeer je gewoon welk element moet worden gevuld met de HTML die wordt terug gegeven van de AJAX aanroep. Een voorbeeld spreekt beter dan ik kan schrijven.
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'get',
parameters: pars
});
}
</script>
<input type="button" value="GetHtml" onclick="getHTML()">
<div id="placeholder"></div>
Zoals je kunt zien is de code redelijk vergelijkbaar met het vorige voorbeeld, met de uitzondering van de onComplete functie en het element id dat wordt doorgegeven in de constructor. Laten we de code beetje bij beetje veranderen om te illustreren hoe het mogelijk is om server fouten af te handelen op de client.
We zullen meer opties aan de aanroep toevoegen en een functie voor je specificeren om de fout condities eenvoudiger op te vangen. Dit is gedaan gebruik makend van de onFailure optie. We zullen ook specificeren dat de placeholder alleen wordt gevuld in het geval van een succesvolle actie. Om dit te bereiken zullen de eerste parameter veranderen van een simpel element id naar een object met twee variabelen, success (te gebruiken wanneer alles goed gaat) en failure (te gebruiken wanneer de dingen fout gaan.) We zullen de failure variabele in ons voorbeeld niet gebruiken, alleen de reportError functie in de onFailure optie.
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{
method: 'get',
parameters: pars,
onFailure: reportError
});
}
function reportError(request)
{
alert('Sorry. Er was een fout.');
}
</script>
<input type="button" value="GetHtml" onclick="getHTML()">
<div id="placeholder"></div>
Als je server logica JavaScript retourneert, samen met HTML markup kan het Ajax.Updater object de JavaScript code evalueren. Om het object zover te krijgen dat het de reactie behandelt als JavaScript voeg simpelweg evalScripts: true; toe aan de lijst van eigenschapen in het laatste argument van de object constructor. Maar er is een voorbehoud. Deze script blokken zullen niet worden toegevoegd aan de scripts van de pagina. Zoals de optie naam evalScripts suggereert worden de scripts uitgevoerd. Wat is het verschil, zul je je afvragen? Later we aannemen dat de aangevraagde URL iets als het volgende retourneert:
<script language="javascript" type="text/javascript">
function zegHi(){
alert('Hi');
}
</script>
<input type="button" value="Klik Mij" onclick="zegHi()">
In het geval dat je het geprobeerd hebt, weet je dat het niet werkt. Deze is dat het script blok uitgevoerd wordt, en een script zoals het bovenstaande uitvoeren zal geen functie genaamd zegHicreëren. Het doet niets. Om een functie te creëren moeten we ons script aan passen om de functie te creëren. Zie hieronder.
<script language="javascript" type="text/javascript">
zegHi = function(){
alert('Hi');
};
</script>
<input type="button" value="Klik Mij" onclick="zegHi()">
Merk op dat in het voorgaande voorbeeld we niet het gereserveerde woord var gebruiken om de variabele te declareren. Dit zou een functie object gecreëerd hebben dat lokaal voor het script blok zou zijn (In ieder geval in IE). Zonder het gereserveerde woord var is de functies scoop het window, wat onze bedoeling is.
Voor een uitgebreidere verklaring, zie de Ajax.Updater referentie en de opties referentie.
Wat zijn al die "?" en velden?
En toen schreef je een paar snelle test scripts, met behulp van het Ajax.Updater object om je pagina's aan te passen en het werkte allemaal prima. Het leven was goed totdat je je scripts op echte data toepaste. Plotseling zaten er in de aangepaste tekst vraagtekens en niet leesbare karakters waar niet Engelse karakters hadden moeten staan.
In eerste instantie verdenk je prototype.js, natuurlijk, het leek ook te mooi om waar te zijn. Maar geef de bibliotheek nog niet de schuld. Vraag jezelf af hoeveel je werkelijk begrijpt van karakterencoding, code pagina's en hoe de browers deze behandeld. Als je een positief antwoord kunt geven dan wed ik dat je op de weg bent om het probleem op te lossen. Als je net als de andere 80% (een andere nutteloze, onnauwkeurige inschatting van de auteur) van de web ontwikkelaars die karakter encoding als vanzelfsprekend beschouwen, blijf lezen.s
Ik zal niet pretenderen een authoriteit te zijn op dit gebied, danwel dat ik een volledige uitleg geef over hoe dit het beste kan worden gebruikt. In plaats daarvan ga ik direct door naar de oplossing die ik gebruik en geef je hints over hoe je dit in je eigen situatie kunt toepassen.
Simpel gezegd, de oplossing komt voort uit het volgende uitdrukking: Lever wat de browser verwacht dat je levert. Als je een pagina gaat vernieuwen met tekst die Unicode/UTF-8 karakters bevat dan moet je er voor zorgen dat je browser daar van op de hoogte is.
Laten we starten met een simpel geval waarin je een tekstpagina van een statisch HTML bestand die op je server staat aanpast. Wanneer je dit bestand aanmaakt, afhankelijk van je teksteditor die je gebruikt, is het zeer goed mogelijk dat het bestand als ANSI (of beter gezegd, niet-Unicode) formaat wordt opgeslagen. Dit is standaard voor veel teksteditors, in het bijzonder voor broncode editors omdat de bestandsgrootte kleiner zal zijn en het tamelijk ongebruikelijk is om broncode te bewerken die Unicode karakters bevat.
Stel je hebt het volgende bestand genaamd statische-inhoud.html op je server. Je hebt dit bestand bewaart in ANSI formaat.
<div> Hallo daar, José. Yo no hablo español. </div>
Je hoofdpagina vernieuwt zichzelf met iets als het fragment hieronder.
<script>
function vernieuwMetBestand(){
var url = 'statische-inhoud.html';
var pars = '';
var myAjax = new Ajax.Updater(
'placeholder', url,
{method: 'get', parameters: pars});
}
</script>
<div id="placeholder">(dit wordt vervangen)</div>
<input id="btn" value="Test met Statische Bestand"
onclick="vernieuwMetBestand()" type="button"/>
Wanneer je op de button klikt wordt de statische bestand opgehaald, maar de niet nederlandse karakters zijn vervangem door vraagtekens of een ander symbool. De getoonde tekst zal er uit zien als "Hallo daar, Jos?. Yo no hablo espa?ol." of "Hallo daar, Jos?Yo no hablo espa?", afhankelijk van je browser.
In dit geval is de oplossing eenvoudig, sla simpelweg de statische file in het juiste formaat op. Laten we het in UTF-8 opslaan en het script opnieuw draaien (elke behoorlijke teksteditor zal een optie in de Opslaan Als dialoog hebbben.) Je zou nu de juiste tekst moeten zien (Zo niet, dan zou het kunnen zijn dat je browser de oude versie heeft bewaard. Probeer een andere bestandsnaam.)
Als de HTML die je presenteert niet statisch is, maar dynamische gegenereerd wordt door een of ander framework (zoals ASP.NET, PHP of zelf Perl) zorg er dan voor dat de code die voor de generatie van de HTML zorgt de tekst produceert met de juiste encoding en code pagina's en in de HTTP antwoord headers een header invoegt die dit verzorgt. Elk platform heeft een verschillende manier om dit te bereiken, maar ze zijn zeer vergelijkbaar..
Bijvoorbeeld, in ASP.NET kun je dit in je globale web.config zetten en de standaard configuratie is goed genoeg om dit probleem te vermijden in de eerste plaats. De volgende sectie zou je al in je web.config moeten hebben staan.
<globalization requestEncoding="utf-8" responseEncoding="utf-8" />
In klassiek ASP 3.0 kun je dit probleem met de volgende code oplossen.
Response.CodePage = 65001 Response.CharSet = "utf-8"
In PHP ziet de syntaxis van een antwoord header er als volgt uit.
<?php header('Content-Type: text/html; charset=utf-8'); ?>
In elke geval, je ultieme doel is dat de volgende HTTP header wordt verstuurd met je antwoord.
Content-Type: text/html; charset=utf-8
We gebruikten UTF-8 in ons voorbeeld hierboven, maar als je een andere instelling nodig hebt kun je dat eenvoudig veranderen.
Enumeratie... Wau!, Karamba! Wahoo!
We zijn allemaal bekend met for loops. Zoals je wel weet, creëer zelf een array, vul het met elementen van het zelfde type, creëer een loop (for, foreach, while, repeat, etc,) benader elk element sequentieel, bij z'n numerieke index en doe iets met het element.
Wanneer je er over na denkt, bijna elke keer dat je een array in je code hebt betekend dit waarschijnlijk dat je het array vroeger of later in een loop gebruikt. Zou het niet fraai zijn als het array object niet meer functionaliteit zou hebben om te gaan met deze iteraties? Ja, dat klopt en veel programmeer talen ondersteunen zulke functionaliteit in hun array's or gelijkwaardige structuren (zoals collecties en lijsten).
Nou, het blijkt dat prototype.js ons het Enumerable object geeft, waarin een overvloedig aantal handigheidjes voor ons zijn implementeerd om data te doorlopen. De prototype.js bibliotheek gaat een stap verder en breidt de Array class uit met alle methoden van Enumerable.
Loops, Ruby-stijl
Als je in standaard javascript sequentieel de elementen van een array wilt afbeelden, zou je heel goed zoiets als het dit kunnen schrijven.
<script>
function toonLijst(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
for(i=0;i<simpsons.length;i++){
alert(simpsons[i]);
}
}
</script>
<input type="button" value="Toon Lijst" onclick="toonLijst();" />
Met onze nieuwe beste vriend, prototype.js, kunnen we deze loop als volgt herschrijven.
function toonLijst(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
simpsons.each( function(familieLid){
alert(familieLid);
});
}
Je zult waarschijnlijk denken "Nou en...gewoon een vreemde syntaxis voor hetzelfde." Nou, in het bovenstaande voorbeeld, ja, daar gebeurt niets wereld schokkendst. Tenslotte, er is niet veel om veranderd te worden in zo'n opvallend simpel voorbeeld. Maar niettemin, blijf lezen.
Voordat we verder gaan. Zie je de functie die is doorgeven als een argument aan de each methode? Laten we beginnnen het te referen als iterator functie.
Je array's op steroïden
Zoals we hierboven vermeld hebben, is het erg gewoon dat alle elementen in je array van het zelfde type zijn, met dezelfde proporties en methoden. Laten we kijken hoe je met onze nieuwe opgepepte array's voordeel kunt hebben van de iterator functies.
Hier is hoe je een element volgens criteria vindt.
<script>
function vindWerknemerViaId(wrkn_id){
var listBox = $('lstWerknemers')
var opties = listBox.getElementsByTagName('option');
opties = $A(opties);
var opt = opties.find( function(werknemer){
return (werknemer.value == wrkn_id);
});
alert(opt.innerHTML); // toon de naam van de werknemer
}
</script>
<select id="lstWerknemers" size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Vind Laura" onclick="vindWerknemerViaId(8);" />
Laten we nu een tandje bij schakelen. Kijk hoe we items uit array's kunnen filteren en vervolgens precies het gewenste onderdeel van elk element ophalen.
<script>
function toonLokaleLinks(paragraaf){
paragraaf = $(paragraaf);
var links = $A(paragraaf.getElementsByTagName('a'));
//vind links die niet starten met 'http'
var localLinks = links.findAll( function(link){
//wij nemen hier aan dat externe links
// geen '#' in hun url hebben.
return link.href.indexOf('#') >= 0;
});
//nu de teksten van de link
var teksten = lokaleLinks.pluck('innerHTML');
//haal ze op al een enkele string
var result = teksten.inspect();
alert(result);
}
</script>
<p id="eenTekst">
Deze <a href="http://othersite.com/page.html">tekst</a> heeft
<a href="#lokaalAnker">veel</a>
<a href="#anderAnker">links</a>. Sommige zijn
<a href="http://wherever.com/page.html">extern</a>
en sommige zijn <a href="#eenAnker">lokaal</a>
</p>
<input type=button value="Vind Lokale Links" onclick="toonLokaleLinks('eenTekst')"/>
Het vergt slechts een beetje oefening om volledig verslaaft te raken aan deze syntax. Kijk eens naar de Enumerable en Array referentie voor alle beschikbare functies.
Referentie voor prototype.js
Uitbreidingen op JavaScript classen
Een van de manieren waarop de prototype.js bibliotheek functionaliteit toegevoegd is door bestaande Javascript classen uit te breiden.
Uitbreidingen voor de Object class
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| extend(destination, source) | static | destination: een object, source: een object | Verschaft een manier om inheritance te implementeren door alle variabelen en methoden van de source naar de destination te kopiëren. |
| inspect(targetObj) | static | targetObj: een object | Retourneert een voor mensen leesbare representatie van targetObj. Als het gegeven object geen inspect instantie methode heeft wordt standaard het resultaat terug gegeven dat een toString zou gegeven. |
| keys(targetObj) | static | targetObj: een object | Retourneert een Array met de namen van alle variabelen en methoden van een gegeven object. |
| values(targetObj) | static | targetObj: een object | Retourneert een Array met de waarden van alle variabelen en methoden van een gegeven object. |
| clone(targetObj) | static | targetObj: een object | Retourneert een kopie van targetObj. |
Uitbreidingen voor de Number class
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| toColorPart() | instance | (geen) | Retourneert de hexadecimale representatie van het getal. Handig om de RGB componenten van een kleur om te zetten in een HTML representatie. |
| succ() | instance | (geen) | Retourneert het volgende getal. Deze functie wordt gebruikt in scenario's die herhaling impliceren. |
| times(iterator) | instance | iterator: een functie object conform aan function(value, index) | Roept de iterator function herhaaldelijk aan en geeft de argumenten value en indexdoor, welke de huidige waarde in de iteratie bevatten, respectievelijk de huidige index. |
Het volgende voorbeeld zal de alert meldingenbox van 0 tot 9 laten zien.
<script>
function demoTimes(){
var n = 10;
n.times(function(value, index){
alert(index);
});
/******************************
* je had ook kunnen gebruiken:
* (10).times( .... );
******************************/
}
</script>
<input type="button" value="Test Number.times()" onclick="demoTimes()"/>
Uitbreidingen voor de function class
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| bind(object [, arg1 [, arg2 [...]]]) | instance | object: Het object dat eigenaar is van de methode. | Retourneert een instantie van de functie die behoort bij de functie(=methode) van het eigenaar object. De functie zal dezelfde argumenten hebben als de originele argumenten (arg1, arg2, ... etc). |
| bindAsEventListener(object [, arg1 [, arg2 [...]]]) | instance | object: Het object dat eigenaar is van de methode. | Retourneert een instantie van de functie die behoort bij de functie(=methode) van het eigenaar object. De functie zal het huidige event object als argument hebben optioneel gevolgd door andere argumenten. |
Laten we een van deze uitbreidingen in actie zien.
<input type="checkbox" id="mijnChk" value="1"/> Test?
<script>
//declareren van de class
var CheckboxBewaker = Class.create();
//definieren van de rest van de class implementatie
CheckboxBewaker.prototype = {
initialize: function(chkBox, bericht) {
this.chkBox = $(chkBox);
this.bericht = bericht;
//toekennen van onze methode aan het event
this.chkBox.onclick =
this.toonBericht.bindAsEventListener(this, ' van checkbox');
},
toonBericht: function(evt, extraInfo) {
alert(this.bericht + ' (' + evt.type + ')' + extraInfo);
}
};
var bewaker = new CheckboxBewaker('mijnChk', 'Verandert');
</script>
Uitbreidingen voor de String class
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| camelize() | instance | (geen) | Converteert een koppelteken-gescheiden-string in een camelCaseString. Deze functie is bijvoorbeeld handig wanneer code for stijl variabelen wordt geschreven. |
| capitalize() | instance | (none) | Converteert de eerste letter in een hoofdletter. |
| dasherize() | instance | (none) | Vervangt onderlijning '_' met een streep '-'. |
| escapeHTML() | instance | (geen) | Retourneert de string met alle HTML markup karakters correct 'escaped'. |
| evalScripts() | instance | (geen) | Voert elk <script /> blok dat in de string werd gevonden uit. |
| extractScripts() | instance | (geen) | Retourneert een Array object met daarin alle <script /> blokken die gevonden zijn in de string. |
| gsub(pattern, replacement) | instance | pattern: ``.. replacement: eevoudige string, template string, of Function(strings[]) die de vervanging uitvoert. | Retourneert een string die het resultaat is van het vinden (of vergelijken) van de patroon string (of reguliere expressie) in de huidige string en vervangt het met de 'replacement' string of het resultaat van de functie die is meegegeven. welke een array met de strings die overeenkomen met het patroon, inclusief eventuele reguliere expressie groepering. wanneer de vervanging een string is, kan het speciale template tekens zoals #{n} bevatten, waar n de index van een groepering van reguliere expressies is. #{0} zal worden vervangen door de gehele match, #{1} is de eerste groepering, #{2} de tweede, enzovoort. |
| parseQuery() | instance | (geen) | Zelfde als toQueryParams(). |
| scan(pattern, replacement) | instance | pattern: string of reguliere expressie die gezocht wordt. replacement: Function(strings[]) om te itereren over de passende patronen. | Voorziet in een manier om te itereren over de passende patronen in de string en verwerkt ze. Het patroon argument kan een string of een RegExp zijn, maar een RexExp is overduidelijk bruikbaarder. Vergelijkbaar kan het replacement argument een string of een functie zijn, maar waarschijnlijk heeft het alleen zin om een functie door te geven om iets bruikbaars te produceren. |
| strip() | instance | (none) | Retourneert een string waarvan de spaties aan het begin en het einde zijn verwijderd. |
| stripScripts() | instance | (geen) | Retourneert de string met alle <script /> blokken verwijderd. |
| stripTags() | instance | (geen) | Retourneert de string met alle HTML of XML tags verwijderd. |
| sub(pattern, replacement [, count]) | instance | pattern: string of reguliere expressie die gezocht wordt. replacement: string of Function(strings[]) om de vervanging uit te voeren. count: aantal malen dat de vervanging moet worden uitgevoerd - standaard is 1. | Heel vergelijkbaar meet gsub, alleen voert een gelimiteerd aantal vervangingen uit, gespecificeerd bij de count parameter. |
| toArray() | instance | (geen) | Splits een string in een Array van zijn karakters. |
| toQueryParams() | instance | (geen) | Splits een querystring in een associatief Array, geïndexeerd met de parameternaam (vergelijkbaar met een hash). |
| truncate(length [, truncation]) | instance | length: maximum lengte van de resultaat string. truncation: string die gebruikt wordt om de laatste karakters van de resultaat string met te vervangen - standard is dit '...' | Gebruikt om een string met maximum lengte te produceren waarvan de lengte bekend is. In het geval een string ingekort die te worden om een maximum lengte te handhaven, wordt de opgegeven tekst gebruikt om de paar laatste karakters te vervangen. (bv.: var s='123456790'; alert(s.truncate(5)); //toont '12...' ) |
| underscore() | instance | (none) | Converteert een CamelizedStringValue in een underscore_formatted_string. (bv.: var s='Namespace::MyClass123'; alert(s.underscore()); //toont 'namespace/my_class123' ). Deze functie lijkt gericht te zijn op het ondersteunen van Ruby on Rails funtionaliteit. |
| unescapeHTML() | instance | (geen) | Het omgekeerde van escapeHTML() |
Alleen al door naar het indrukwekkende aantal nieuwe methoden te kijken is het duidelijk dat de String class een belangrijke rol speelt. Het voorbeeld hieronder toont veel van deze uitbreidingen.
<script>
</script>
Uitbreidingen voor de Array class
Om te beginnen is Array één van de uitbreidingen van Enumerable. Dus alle handige methoden van het Enumerable object zijn ook beschikbaar. Verder zijn de methoden zoals hieronder worden opgesomd ook geïmplementeerd.
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| clear() | instance | (geen) | Wist de inhoud van het array and retourneert zichzelf. |
| compact() | instance | (geen) | Retourneert het array zonder de elementen die null of undefined zijn. Deze methode veranderd niet het array zelf. |
| first() | instance | (geen) | Retourneert het eerste element van een array. |
| flatten() | instance | (geen) | Retourneert een platte, één dimensionale versie van het array. Het plat 'slaan' gebeurt door van elk array de elementen te vinden die ook array's zijn en hun elementen recursief in te voegen in het geretourneerde array. |
| indexOf(value) | instance | value: waar je naar op zoek bent. | Retourneert de positie van de opgegeven value als het gevonden wordt in het array, gerekend vanaf nul. Retourneert -1 als value niet gevonden wordt. |
| inspect() | instance | (geen) | Herschreven om een mooi geformatteerde string representatie van het array met zijn elementen te retourneren. |
| last() | instance | (geen) | Retourneert het laatste element van een array. |
| reverse([applyToSelf]) | instance | applyToSelf: geeft aan of het array zelf moet worden omgekeerd. | Retourneert het array in omgekeerde volgorde. Als geen argument wordt gegeven of het argument is true wordt het array zelf omgedraaid. Is het argument false dan blijft het array zelf onveranderd. |
| shift() | instance | (geen) | Retourneert het eerste element en verwijderd het van het array, daarmee wordt de lengte van het array met 1 verminderd. |
| without(value1 [, value2 [, .. valueN]]) | instance | value1 ... valueN: waarden die uitgesloten moeten worden indien ze aanwezig zijn in het array. | Retourneert het array exclusief de elementen die aanwezig zijn in de lijst van argumenten. Deze methode veranderd niet het megegeven array. |
Laten we een aantal van deze methoden in actie zien.
<script>
var A = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"
var B = A.without('e','f');
alert(B.inspect()); // "['a', 'b', 'c', 'd', 'g', 'h']"
alert(A.inspect()); // veranderde A niet: "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"
A.push(null);
A.push('x');
A.push(null);
A.push('y');
alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', null, 'x', null, 'y']"
A = A.compact();
alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'x', 'y']"
var e = A.shift();
alert(e); // "a"
alert(A.inspect()); // "['b', 'c', 'd', 'e', 'f', 'g', 'h', 'x', 'y']"
alert(A.indexOf('c')); // 1
alert(A.first()); // 'b'
alert(A.last()); // 'y'
A.clear();
alert(A.inspect()); // "[]"
A = ['a', 'b', 'c'];
B = A.reverse(false);
alert(B.inspect()); // "['c', 'b', 'a']"
alert(A.inspect()); // A niet veranderd: "['a', 'b', 'c']"
A.reverse(true);
alert(A.inspect()); // "['c', 'b', 'a']"
A = ['a', 'b', ['c1','c2','c3'] , 'd', ['e1','e2'] ];
B = A.flatten();
alert(B.inspect()); // "['a','b','c1','c2','c3','d','e1','e2']"
alert(A.inspect()); // onveranderd: "['a','b',['c1','c2','c3'],'d',['e1','e2']]"
</script>
Uitbreidingen voor het document DOM object
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| getElementsByClassName(className [, parentElement]) | instance | className: naam van een CSS class geassocieerd met de elementen, parentElement: object of id van het element dat de elementen bevat die worden ontvangen. | Retourneert alle elementen die geassocieerd zijn met een gegeven CSS class naam. Als geen parentElement id wordt gegeven wordt de hele document body doorzocht. |
Uitbreidingen voor het Event object
| Eigenschap | Type | Omschrijving |
|---|---|---|
| KEY_BACKSPACE | Number | 8: Constant. Code voor de Backspace toets. |
| KEY_TAB | Number | 9: Constant. Code voor de Tab toets. |
| KEY_RETURN | Number | 13: Constant. Code voor de Return/Enter toets. |
| KEY_ESC | Number | 27: Constant. Code voor de Esc toets. |
| KEY_LEFT | Number | 37: Constant. Code voor de pijl-naar-linkstoets. |
| KEY_UP | Number | 38: Constant. Code voor de pijl-naar-boven toets. |
| KEY_RIGHT | Number | 39: Constant. Code voor de pijl-naar-rechts toets. |
| KEY_DOWN | Number | 40: Constant. Code voor de pijl-naar-beneden toets. |
| KEY_DELETE | Number | 46: Constant. Code voor de Delete toets. |
| observers: | Array | Lijst van bewaarde observers. Onderdeel van de interne implementatie details van het object. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| element(event) | static | event: een Event object | Retourneert het element dat het event opstarte. |
| isLeftClick(event) | static | event: een Event object | Retourneert true als de linker muisknop ingedrukt werd. |
| pointerX(event) | static | event: een Event object | Retourneert de x-coördinaat waar de muis cursor zich bevindt op de pagina . |
| pointerY(event) | static | event: een Event object | Retourneert de y-coördinaat waar de muis cursor zich bevindt op de pagina . |
| stop(event) | static | event: een Event object | Gebruik deze functie om het standaard gedrag van een event af te breken en zijn verdere werking op te schorten. |
| findElement(event, tagName) | static | event: een Event object, tagName: naam van de gewenste tag. | Doorloopt de DOM boom naar boven lopend, zoekend naar het eerste element met de gegeven tag naam, startende bij het element dat het event opstarte. |
| observe(element, name, observer, useCapture) | static | element: object of id, name: event naam (zoals 'click', 'load', etc), observer: functie om het event af te handelen, useCapture: als true, verwerkt het event in de capture fase en als false in de bubbling fase. | Voegt een functie om event's af te handelen aan een event. |
| stopObserving(element, name, observer, useCapture) | static | element: object of id, name: event naam (like 'click'), observer: functie om het event af te handelen, useCapture: als true, verwerkt het event in de capture fase en als false in de bubbling fase. | Verwijderd een functie om event's af te handelen van een event. |
| _observeAndCache(element, name, observer, useCapture) | static | Interne methode, vergeet deze maar. | |
| unloadCache() | static | (geen) | Interne methode, vergeet deze maar. Verwijdert alle bewaarde observers uit het geheugen. |
Laten we zien hoe dit object te gebruiken is om een functie aan van het load event van het window object toe te voegen.
<script>
Event.observe(window, 'load', page_loaded, false);
function page_loaded(evt) {
Event.observe('parent_node', 'click', item_clicked, false);
}
function item_clicked(evt){
var child = Event.element(evt);
alert('The child node with id=' + child.id + ' was clicked');
Event.stop(evt); //vermijd een andere aanroep gerelateerd aan 'parent_node' zelf
}
</script>
...
<div id="parent_node">
<div id="child1">Eerste</div>
<div id="child2">Tweede</div>
<div id="child3">Derde</div>
</div>
Nieuwe objecten en classen gedefinieerd door prototype.js
Een andere manier waarom de bibliotheek je helpt is door het leveren van vele object implementaties zowel ter ondersteuning van object georiënteerde ontwerpen als voor algemen functionaliteit.
Het PeriodicalExecuter object
Dit object bevat de logica om een geven functie herhaaldelijk via een tijdklok aan te roepen, op een aangegeven interval.
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| [ctor](callback, interval) | constructor | callback: een parameterloze functie, interval: getal in seconden. | Creëert een instantie van dit object dat de functie herhaaldelijk zal aanroepen. |
| registerCallback() | instance | (none) | Reset de tijdklok. |
| stop() | instance | (none) | Stopt de tijdklok waarmee wordt vermeden dat de callback wordt uitgevoerd. |
| onTimerEvent() | instance | (none) | Dit is de methode die wordt aangeroepen door de tijdklok, welke vervolgens de callback methode zal aanroepen met het object zelf als argument |
| Eigenschap | Type | Omschrijving |
|---|---|---|
| callback | Function(objExecuter) | De functie die aangeroepen moet worden objExecuter: de PeriodcalExecuter die de aanroep zal doen. |
| timer | Timer | Een handle naar het onderliggende tijdklok object verantwoordelijk voor het herhaalbaar aanroepen van de callback methode./td> |
| frequency | Number | Dit is het interval in seconden. |
| currentlyExecuting | Boolean | Geeft aan of de functie aanroep bezig is. |
Het Prototype object
Het Prototype object heeft geen enkele belangrijke rol, anders dan de versie van de gebruikte bibliotheek te declareren.
| Eigenschap | Type | Omschrijving |
|---|---|---|
| Version | String | De versie van de bibliotheek. |
| emptyfunction | function() | Een leeg functie object |
| K | function(obj) | Een functie object dat slechts de gegeven parameter afdrukt. |
| ScriptFragment | String | Een reguliere expressie om scripts te identificeren. |
Het Enumerable object
Het Enumerable object stelt men in staat om elegantere code te schijven om items in een lijst-achtige structuur te doorlopen.
Veel andere objecten zijn gebaseerd op het Enumerable object om gebruik te maken van zijn bruikbare interface.
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| each(iterator) | instance | iterator: een functie object conform aan function(value, index) | Past de gegeven iterator functie toe op elk element in de lijst en geeft in het eerste argument door het element door en de index van het element in het tweede argument. |
| all([iterator]) | instance | iterator: een functie object conform aan function(value, index), optioneel | Deze functie is een manier om een gehele verzameling van waarden te testen met de gegeven functie. all zal false terug geven als de iterator functie true terug geeft voor alle elementen. Anders zal het false terug geven. Als geen iterator wordt gegeven, de zal de test zijn of het element zelf herleid tot true. Je kunt het simpelweg lezen als "controleer of alle elementen voor de test slagen." |
| any([iterator]) | instance | iterator: een functie object conform aan function(value, index), optioneel. | Deze functie is een manier om een gehele verzameling van waarden te testen met de gegeven functie. any zal true terug geven als de iterator functie true terug geeft voor tenminste een van de elementen. Anders zal het false terug geven. Als geen iterator wordt gegeven, zal de test zijn of het element zelf herleid tot true of null. Je kunt het simpelweg lezen als "controleer of enig element voor de test slaagt." |
| collect(iterator) | instance | iterator: een functie object conform aan function(value, index) | Roept de iterator functie voor elke element in de verzameling en retourneert elk resultaat in een Array, een resultaat voor elk element in de verzameling, in dezelfde volgorde. |
| detect(iterator) | instance | iterator: een functie object conform aan function(value, index) | Roept de iterator functie aan voor elk element in de verzameling en retourneert het eerste element waarvan de iterator functie true opleverde (of, nauwkeuriger, niet false.) Als geen elementen true retourneert, dan retourneert detect null. |
| entries() | instance | (geen) | Zelfde als toArray(). |
| find(iterator) | instance | iterator: een functie object conform aan function(value, index) | Zelfde als detect(). |
| findAll(iterator) | instance | iterator: een functie object conform aan function(value, index) | Roept de iterator functie aan voor elke element in de verzameling en retourneert een Array met daarin alle elementen waarvoor de iterator functie de waarde true terug geeft. Deze functie is het tegenovergestelde van reject(). |
| grep(pattern [, iterator]) | instance | pattern: Een RegExp object gebruikt om elementen te vergelijken, iterator: een function object conform aan function(value, index) | Test de string waarde van elke element in de verzameling met pattern reguliere expressie. De functie zal een Array terug geven met daarin alle elementen die aan de reguliere expressie voldeden. Als de iterator functie wordt mee gegeven, dan zal het Array met voor elk element welke paste bij het resultaat van de iterator functie op dat element. |
| include(obj) | instance | obj: een object | Probeert het opgegeven object te vinden in de verzameling. Retourneert true als het object gevonden is, anders false. |
| inGroupsOf(number, fillWith) | instance | number: aantal items per groep, fillWith: waarde die wordt gebruikt om de lege plaatsen op te vullen | Retourneert de collectie opgebroken in groepen die zoveel mogelijk items bevatten als in het eerste argument zijn opgegeven. Als het aantal items in de initiële collectie niet deelbaar is door het getal in het eerste argument worden de lege items aan het einde van de laatste groep opgevuld met null of met de waarde van het tweede argument indien dit is gegeven. Snel voorbeeld: ['a','b','c','d'].inGroupsOf(3,'?') Creëert [ ['a','b','c'] , ['d','?','?'] ] |
| inject(initialValue, iterator) | instance | initialValue: een object te gebruiken als begin waarde, iterator: een functie object volgens function(accumulator, value, index) | Combineert alle elementen van de verzameling door gebruik te maken van de iterator functie. De iterator wordt aangeroepen waarbij het vorige resultaat van de iterator in het accumulator argument wordt doorgeven. De eerste iteratie krijgt de initialValue in het accumulator argument. Het laatste resultaat is de uiteindelijke waarde die geretourneerd wordt. |
| invoke(methodName [, arg1 [, arg2 [...]]]) | instance | methodName: naam van de methode die wordt aangeroepen in elk element, arg1..argN: argumenten die worden doorgegeven in de methode aanroep. | Roept de methode gespecificeerd in methodName aan op elk element van de verzameling, geeft daarbij elk argument (arg1 tot argN) door en retourneert het resultaat in een Array object. |
| map(iterator) | instance | iterator: een functie object conform aan function(value, index) | Zelfde als collect(). |
| max([iterator]) | instance | iterator: een functie object conform aan function(value, index) | Retourneert het element met de hoogste waarde in de verzameling of, indien een iterator is gegeven, het hoogste resultaat van het aanroepen van de iterator op elk element uit de verzameling. |
| member(obj) | instance | obj: een object | Zelfde als include(). |
| min([iterator]) | instance | iterator: een functie object conform aan function(value, index) | Retourneert het element met de laagste waarde in de verzameling of indien een iterator is gegeven, het laagste resultaat van het aanroepen van de iterator op elk element uit de verzameling. |
| partition([iterator]) | instance | iterator: een functie object conform aan function(value, index) | Retourneert een Array die twee andere arrays bevat. Het eerste array zal de elementen bevatten waarvoor de iterator functie de waarde true voor opleverde en het tweede array zal de overgebleven elementen bevatten. Als de iterator niet gegeven is dan zal het eerste array alle elementen bevatten die herleiden naartrue en het andere array zal de overgebleven elementen bevatten. |
| pluck(propertyName) | instance | propertyName naam van de eigenschap van het gelezen element. Dit kan ook de index van het element bevatten. | Retourneert de waarde van de eigenschap propertyName van elk element van de verzameling en retourneert het resultaat in een Array object. |
| reject(iterator) | instance | iterator: een functie object conform aan function(value, index) | Roept de iterator functie aan voor elk element in de verzameling en retourneert een Array met alle elementen waarbij de iterator functie de waarde false terug geeft. Deze functie is het tegenovergestelde van findAll(). |
| select(iterator) | instance | iterator: een functie object conform aan function(value, index) | Zelfde als findAll(). |
| sortBy(iterator) | instance | iterator: een functie object conform aan function(value, index) | Retourneert een Array met alle elementen gesorteerd volgens het resultaat van de iterator functie aanroep. |
| toArray() | instance | (geen) | Retourneert een Array met alle elementen van de verzameling. |
| zip(collection1[, collection2 [, ... collectionN [,transform]]]) | instance | collection1 .. collectionN: verzameling die worden samengevoegd, transform: een functie object conform aan function(value, index) | Voegt elke gegeven verzameling samen met de huidige verzameling. De bewerking retourneert een nieuw array met het zelfde aantal elementen als de huidige verzameling en elke element is een array (laten we ze sub-array's noemen) met de elementen met dezelfde index van elk van de samengevoegde collecties. Als de transform functie wordt meegegeven dan zal elk sub-array worden getransformeerd door deze functie voordat deze wordt terug gegeven. Snel voorbeeld: [1,2,3].zip([4,5,6], [7,8,9]).inspect() levert op "[[1,4,7],[2,5,8],[3,6,9] ]". |
Het Hash object
Het Hash object implementeert een hash structuur, dat is een verzameling van Sleutel(key):Waarde(value) paren.
Elk item in een Hash object is een array van twee elementen: eerst de sleutel dan de waarde. Elk item heeft ook twee variabelen: key en value, welke voor zichzelf spreken.
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| keys() | instance | (geen) | Retourneert een Array met de sleutels van alle elementen. |
| values() | instance | (geen) | Retourneert een Array met de waarden van alle elementen. |
| merge(otherHash) | instance | otherHash: Hash object | Combineert de hash doo de andere hash in te voegen en retourneert de resulterende hash. |
| toQueryString() | instance | (geen) | Retourneert alle item's uit de hash in een string die geformatteerd is als een query string, dat is 'key1=value1&key2=value2&key3=value3' |
| inspect() | instance | (geen) | Herschreven om een mooi geformatteerde string representatie van de hash met zijn key:value paren te retourneren. |
De ObjectRange class
Afgeleid van Enumerable
Representeert een reeks van waarden, met boven en ondergrenzen.
| Eigenschap | Type | Soort | Omschrijving |
|---|---|---|---|
| start | (any) | instance | De ondergrens van de reeks |
| end | (any) | instance | De bovengrens van de reeks |
| exclusive | Boolean | instance | Bepaalt of de grenzen zelf onderdeel van de reeks zijn. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| [ctor](start, end, exclusive) | constructor | start: de ondergrens, end: de bovengrens, exclusive: grenzen onderdeel van de reeks? | Creëert een ObjectRange object, van start tot end. Het is belangrijk om op te merken dat start en end objecten van hetzelfde type moeten zijn en dat ze een succ() methode moeten hebben. |
| include(searchedValue) | instance | searchedValue: waarde die we zoeken. | Controleert of de gegeven waarde onderdeel is van de reeks. Retourneert true of false. |
Het Class object
Het Class object wordt gebruikt wanneer de andere classen in de bibliotheek worden gedeclareerd. Gebruik van dit object bij het declareren van een class zorgt ervoor dat de nieuwe class een initialize() methode ondersteund, die dienst doet als constructor.
Zie het voorbeeld hieronder.
//declareren the class
var MijnVoorbeeldClass = Class.create();
//definieert rest van de class implementatie
MijnVoorbeeldClass.prototype = {
initialize: function(bericht) {
this.bericht = bericht;
},
toonBericht: function(ajaxAntwoord) {
alert(this.bericht);
}
};
//Laten we nu concretiseren en het object gebuiken
var mijnPrater = new MijnVoorbeeldClass('hallo daar.');
mijnPrater.toonBericht(); //toont alert
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| create(*) | instance | (any) | Definieert een constructor voor een nieuwe class. |
Het Ajax object
Dit object dient als de basis en namespace voor vele andere classen die AJAX functionaliteit leveren.
| Eigenschap | Type | Soort | Omschrijving |
|---|---|---|---|
| activeRequestCount | Number | instance | Het getal van de AJAX verzoeken dat aan de gang is. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| getTransport() | instance | (geen) | Retourneert een nieuw XMLHttpRequest object |
Het Ajax.Responders object
Afgeleid van Enumerable
Dit object onderhoudt een lijst van objecten die worden aangeroepen wanneer een AJAX-gerelateerd event plaats vindt. Je kunt dit object gebruiken, bijvoorbeeld, als je een globale exception handler aan AJAX activiteiten wilt hangen.
| Eigenschap | Type | Soort | Omschrijving |
|---|---|---|---|
| responders | Array | instance | De lijst van objecten die geregistreerd zijn voor AJAX events notificaties. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| register(responderToAdd) | instance | responderToAdd: object met methoden die aangeroepen zullen worden. | Het object doorgeven in het responderToAdd argument moet een methode zoals de AJAX events (b.v. onCreate, onComplete, onException, enz.) bevatten. Wanneer het corresponderende event plaats vindt zal voor alle geregistreerde objecten die een methode bevatten met de juiste naam deze methode worden aangeroepen . |
| unregister(responderToRemove) | instance | responderToRemove: object dat verwijderd moet worden van de lijst. | Het doorgegeven object in het responderToRemove argument zal worden verwijderd van de lijst van geregistreerde objecten. |
| dispatch(callback, request, transport, json) | instance | callback: naam van het gerapporteerde AJAX event, request: het Ajax.Request object verantwoordelijk voor het event, transport: het XMLHttpRequest object dat de AJAX aanroep bevat (of bevatte), json: de X-JSON header van de reactie (indien aanwezig). | Loopt door de lijst met geregistreerde objecten op zoek naar die objecten welke de methode hebben, zoals aangegeven in het callback argument. Vervolgens worden deze methoden aangeroepen met de 3 andere argumenten. Als de AJAX reactie een X-JSON HTTP header met JSON inhoud bevat dan wordt dit uitgevoerd en doorgegeven in het json argument. Als het event een onException is dan zal het transport argument de exceptie krijgen en wordt het json argument niet doorgegeven. |
De Ajax.Base class
Deze class wordt gebruikt als de basis class voor bijna alle andere classen gedefinieerd in het Ajax object.
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| setOptions(options) | instance | options: AJAX options | Zet de gewenste options voor de AJAX activiteiten |
| responseIsSuccess() | instance | (geen) | Retourneert true als de AJAX actie succesvol was, anders false |
| responseIsFailure() | instance | (geen) | Het tegenovergestelde van responseIsSuccess(). |
De Ajax.Request class
Afgeleid van Ajax.Base
Encapsuleert AJAX bewerkingen
| Eigenschap | Type | Soort | Omschrijving |
|---|---|---|---|
| Events | Array | static | Lijst van mogelijke events/statussen gerapporteerd gedurende een AJAX bewerking. De lijst omvat: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', en 'Complete.' |
| transport | XMLHttpRequest | instance | Het XMLHttpRequest object dat de AJAX bewerking bevat. |
| url | String | instance | De URL waar de aanroep naar plaats vind. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| [ctor](url, options) | constructor | url: de url die wordt opgehaald, options: AJAX opties | Creëert een instantie van dit object dat de gegeven url zal aanroepen gebruik makende van de gegeven options. Het onCreate event zal afgaan gedurende de constructor aanroep.Belangrijk: Opgemerkt moet worden dat de gekozen url afhankelijk is van de browsers veiligheids instellingen. In veel gevallen zal de browser geen url's ophalen die niet van het zelfde domain zijn als de huidige pagina. In het ideale geval, gebruik lokale url's om te vermijden dat de gebuikers browser configureerd of beperken wordt (bedankt Clay). |
| evalJSON() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het wordt intern aangeroepen om de inhoud te evalueren van een eventuele X-JSON HTTP header die aanwezig is in een AJAX antwoord. |
| evalReponse() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Als het AJAX antwoord een Content-type header heeft als text/javascript dan zal de inhoud van het antwoord worden uitgevoerd en wordt deze methode gebruikt. |
| header(name) | instance | name: HTTP header naam | Achterhaalt de inhoud van een HTTP header van een AJAX antwoord. Roep deze methode alleen aan nadat een AJAX aanroep afgerond is. |
| onStateChange() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen wanneer de AJAX aanroep van status veranderd. |
| request(url) | instance | url: url voor de AJAX aanroep | Deze methode wordt normaal niet extern aangeroepen. Deze wordt al aangeroepen tijdens de constructor aanroep. |
| respondToReadyState(readyState) | instance | readyState: status getal (1 tot 4) | Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen wanneer de AJAX aanroep van status veranderd. |
| setRequestHeaders() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen om de HTTP header samen te stellen die verstuurd zal worden gedurende een HTTP aanvraag. |
Het options argument object
Een belangrijk onderdeel van de AJAX functionaliteit is het options argument. Er is geen options class als zodanig. Elk object kan worden doorgegeven, zolang het de verwachte eigenschappen heeft. Het is gebruikelijk om anonieme objecten te creëren specifiek voor de AJAX aanroepen.
| Eigenschap | Type | Standaard | Omschrijving |
|---|---|---|---|
| method | String | 'post' | Methode van de HTTP aanvraag. |
| parameters | String | '' | De url-formatted lijst met waarden die worden doorgegeven bij de aanvraag. |
| asynchronous | Boolean | true | Geeft aan of de AJAX aanroep asynchroon zal zijn. |
| postBody | String | undefined | Inhoud die wordt doorgegeven in de aanroep body in het geval van een HTTP POST. |
| requestHeaders | Array | undefined | Lijst van HTTP headers die worden doorgeven in de aanroep. Deze lijst moet een even aantal items hebben, elk oneven item is de naam van een eigen header en het volgende even item is de string waarde van die header. Bijvoorbeeld: ['mijn-header1', 'dit is een waarde', 'my-andere-header', 'een andere waarde'] |
| onXXXXXXXX | function(XMLHttpRequest, object) | undefined | Eigen functie die moet worden aangeroepen wanneer respectievelijk het event/status is bereikt gedurende de AJAX aanroep. Er zijn verschillende alternatieven "XXXXXXXX" in deze optie. Onder die opties zijn de statussen van Ajax.Request.Events, en de HTTP status codes. Bijvoorbeeld var myOpts = {onComplete: toonAntwoord, onLoaded: registerGeladen};. De gebruikte functie zal een argument ontvangen wat het Ajax.Request object is behorende bij de AJAX bewerking en een ander agrument die de berekende X-JSON antwoord HTTP header bevat. |
| onSuccess | Function(XMLHttpRequest, Object) | undefined | Eigen functie die moet worden aangeroepen wanneer een AJAX aanroep succesvol is verlopen. De gebruikte functie zal een argument ontvangen wat het XMLHttpRequest object is behorende bij de AJAX bewerkingen een ander agrument die de berekende X-JSON antwoord HTTP header bevat. |
| onFailure | Function(XMLHttpRequest, Object) | undefined | Eigen functie die moet worden aangeroepen wanneer een AJAX aanroep fout is gegaan. De gebruikte functie zal een argument ontvangen wat het XMLHttpRequest object is behorende bij de AJAX bewerkingen een ander agrument die de berekende X-JSON antwoord HTTP header bevat. |
| onException | Function(Ajax.Request, exception) | undefined | Eigen functie die moet worden aangeroepen wanneer een AJAX aanroep een exception genereert, zoals ongeldige reactie of ongeldige argumenten. De gebruikte functie zal twee argumenten ontvangen. Het Ajax.Request object behorende bij de AJAX bewerking en het exception object. |
| insertion | een Insertion class | undefined | Een class die bepaalt hoe de nieuwe inhoud ingevoegd wordt. Dit kan zijn Insertion.Before, Insertion.Top, Insertion.Bottom of Insertion.After. Is alleen van toepassing op Ajax.Updater objecten. |
| evalScripts | Boolean | undefined, false | Bepaalt of script blokken uitgevoerd zullen worden wanneer het antwoord binnenkomt. Alleen van toepassing op Ajax.Updater objecten. |
| decay | Number | undefined, 1 | Bepaalt de toenemende vertraging van de verversingsfrequentie van het Ajax.PeriodicalUpdater object wanneer het ontvangen antwoord hetzelfde is als de vorige. Bij voorbeeld, als je 2 gebuikt, nadat een vernieuwing hetzelfde resultaat oplevert als de vorige, zal het object twee keer zolang wachten voor de volgende vernieuwing. Als dit zich herhaalt, zal het object vier keer zolang wachten enzovoort. Laat de waarde undefined of gebruikt 1 om vertragingen te voorkomen. |
| frequency | Number | undefined, 2 | Interval (niet frequentie) tussen verversingen, in seconden. Alleen van toepassing op Ajax.Updater objecten. |
De Ajax.Updater class
Afgeleid vanAjax.Request
Gebruik wanneer de aangevraagde url HTML retourneert die je direct in een specifiek element op je pagina wilt invoegen. Je kunt dit object ook gebruiken wanneer de url <script> blokken terug geeft die uitgevoerd worden bij aankomst. Gebruik de evalScripts optie om te werken met scripts.
| Eigenschap | Type | Soort | Omschrijving |
|---|---|---|---|
| containers | Object | instance | Dit object bevat twee variabelen: containers.success zal gebruikt worden wanneer de AJAX aanroep slaagt en containers.failure zal in het andere geval gebruikt worden. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| [ctor](container, url, options) | constructor | container:dit kan het id van een element zijn, het element object zelf of een object met twee variabelen - object.success element (of id) die zal worden gebruikt wanneer de AJAX aanroep slaagt en object.failure element (of id) in het andere geval. url: de url die wordt opgehaald, options: AJAX options | Creëert een instantie van dit object dat de gegeven url zal aanroepen met de gegeven options. |
| updateContent() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het wordt aangeroepen door het object zelf wanneer een antwoord ontvangen is. Het zal de juiste elementen bijwerken met de HTML of de functie aanroepen die is doorgegeven in de insertion optie. De functie zal worden aangeroepen met twee argumenten, het element dat moet worden bijgewerkt en de antwoord tekst. |
De Ajax.PeriodicalUpdater class
Afgeleid van Ajax.Base
Deze class instantieert herhaaldelijk en gebruikt een Ajax.Updater object om een element op een pagina te verversen of om een of andere taak uit te voeren die de Ajax.Updater kan uitvoeren. Controleer de Ajax.Updater referentie voor meer informatie.
| Eigenschap | Type | Soort | Omschrijving |
|---|---|---|---|
| container | Object | instance | Deze waarde wordt rechtstreeks doorgegeven aan de constructor van Ajax.Updater. |
| url | String | instance | Deze waarde wordt rechtstreeks doorgegeven aan de constructor van Ajax.Updater. |
| frequency | Number | instance | Interval (niet frequentie) tussen verversingen in seconden. De standaard waarde is 2 seconden. Dit getal wordt vermenigvuldigd met de huidige decay wanneer het Ajax.Updater object wordt aangeroepen. |
| decay | Number | instance | De huidige verval waarde die bepaalt wanneer de taak opnieuw wordt uitgevoerd. |
| updater | Ajax.Updater | instance | Het meest recent gebruikte Ajax.Updater object |
| timer | Object | instance | De handle van de timer die gebruikt wordt om het object te melden wanneer het tijd is voor de volgende vernieuwing. |
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| [ctor](container, url, options) | constructor | container: dit kan het id of een element, het element object zelf of een object met twee variabelen - object.success element (of id) die zal worden gebruikt wanneer de AJAX aanroep slaagt en object.failure element (of id) in het andere geval. url: de url die wordt opgehaald, options: AJAX options | Creëert een instantie van dit object dat de gegeven url zal aanroepen met de gegeven options. |
| start() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het wordt gebruikt bij het object zelf om te starten met het uitvoeren van periodieke taken. |
| stop() | instance | (geen) | Zorgt ervoor dat het object stopt met het uivoeren van de terugkerende taken. Na het stoppen zal het boject de callback aanroepen, aangegeven in onComplete optie (indien aanwezig). |
| updateComplete() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het is aangeroepen bij de momenteel gebruikte Ajax.Updater nadat een aanroep afgerond is. Het wordt gebruikt om de volgende verversing te plannen. |
| onTimerEvent() | instance | (geen) | Deze methode wordt normaal niet extern aangeroepen. Het wordt aangeroepen wanneer het tijd is voor de volgende verversing. |
Het Element object
Dit object bevat een aantal handige functies voor het manipuleren van elementen in de DOM.
| Methode | Soort | Argumenten | Omschrijving |
|---|---|---|---|
| addClassName(element, className) | instance | element: element object of id, className: CSS classnaam | Voegt de gegeven classnaam toe aan de classnamen van het element. |
| classNames(element) | instance | element: element object of id | Retourneert een Element.ClassNames object welke de CSS class namen representeert geassocieerd met het gegeven element. |
| cleanWhitespace(element) | instance | element: element object of id | Verwijdert lege tekst nodekinderen van het element. |
| empty(element) | instance | element: element object or id | Retourneert een Boolean waarde die aangeeft of het element tag leeg is (of alleen whitespace heeft) |
| getDimensions(element) | instance | element: element object or id | Retourneert de afmetingen van het element. De geretourneerde waarde is een object met twee variabelen: height en width. |
| getHeight(element) | instance | element: element object of id | Retourneert de offsetHeight van het element |
| getStyle(element, cssProperty) | instance | element: element object of id, cssProperty naam van een CSS variabele (zowel formaat 'prop-name' of 'propName' is juist). | Retourneert de waarde van het CCS variabele van het gegeven element of null als het niet aanwezig is. |
| hasClassName(element, className) | instance | element: element object of id, className: CSS classnaam | Retourneert true als het element de gegeven classnaam heeft als een van zijn classnamen. |
| hide(element) | instance | element: element object of id | Verbergt het element door de style.display variabele op de waarde 'none' te zetten. |
| makeClipping(element) | instance | element: element object of id | |
| makePositioned(element) | instance | element: element object of id | Verandert de variabele style.position van het element in 'relative' |
| remove(element) | instance | element: element object of id | Verwijdert het element van het document. |
| removeClassName(element, className) | instance | element: element object of id, className: CSS classnaam | Verwijdert de gegeven classnaam van de classnamen van het element. |
| scrollTo(element) | instance | element: element object or id | Scrollt het window naar de positie van het element. |
| setStyle(element, cssPropertyHash) | instance | element: element object of id, cssPropertyHash Hash object met de stijlen die moeten worden toegepast. | Zet de waarde van de CSS variabelen in het gegeven element, volgens de waarden in het cssPropertyHash argument. |
| show(element) | instance | element: element object of id | Maakt het element zichtbaar door de waarde van de style.display variabele op '' te zetten. |
| show(element) | instance | element: element object of id | Draait de zichtbaarheid van het element om. |
| undoClipping(element) | instance | element: element object of id | |
| undoPositioned(element) | instance | element: element object of id | Zet de waarde van de style.position variabele op '' |
| update(element, html) | instance | element: element object of id, html: html inhoud | Vervangt de innerHTML van een element met het gegeven html argument. Als het gegeven html <script> bevat zullen die niet worden ingevoegd maar worden uitgevoerd. |
| visible(element) | instance | element: element object of id | Retourneert een Boolean waarde die aangeeft of het element zichtbaar is. |
De Element.ClassNames class
Afgeleid van Enumerable
Representeert een verzameling van CSS class namen geassocieerd met een element.
| Methode | Type | Argumenten | Omschrijving |
|---|---|---|---|
| [ctor](element) | constructor | element: elk DOM element object of id | Creëert een Element.ClassNames object die de CSS classnamen representeert van het gegeven element. |
| add(className) | instance | className: een CSS class naam | Neemt de gegeven CSS class naam op in de lijst van class namen geassocieerd met het element. |
| remove(className) | instance | className: een CSS class naam | Verwijdert de gegeven CSS class naam uit de lijst van class namen geassocieerd met het element. |
| set(className) | instance | className: een CSS class naam | Associeert het element met de gegeven CSS class name en verwijdert elke andere classname van het element. |
Het Abstract object
Dit object dient als de basis andere classen in de bibliotheek. Het heeft geen enkele variabelen of methoden. De classen gedefinieerd in dit object worden ook behandeld als traditionele abstracte classen.
De Abstract.Insertion class
Deze class is gebruikt als basis voor