Prototype to rozbudowana biblioteka napisana w języku JavaScript. Stworzona została przez Sama Stephensona. Oferuje wiele ciekawych rozwiązań wspomagających przykładowo operacje na DOM czy też programowanie AJAX. Prototype jest zaimplementowany w jednym pliku, zwykle pod nazwą prototype.js. Jest dystrybowany samodzielnie jak i z innymi projektami (script.aculo.us. Czy Ruby on Rails). Można powiedzieć, że realizuje podobny model jak MooTools, jednak kod tworzony za pomocą Prototype przypomina bardziej ten tworzony w jQuery.
Framework ten to przede wszystkim rozwiązanie dojrzałe i spójne. Oferuje bardzo szeroką funkcjonalność przy zachowaniu minimalnego ograniczenia już istniejących funkcjonalności. Daje również szerokie możliwości rozbudowy.
Integracja z kodem odbywa się przez załadowanie pojedynczego pliku biblioteki. Dzięki temu, że Prototype rozszerza mnóstwo podstawowych typów danych, nie jest konieczne przerabianie istniejące kody JavaScript tak by móc wykorzystywać funkcjonalność dostarczaną przez bibliotekę.
Odnośnie pracy z drzewem dom framework ten spisuje się pod każdym względem. Dodatkowo rozszerza natywne typy danych, dzięki czemu pracując z elementami DOM, styl naszego kodu nie za bardzo różni się od tego jaki byśmy zaprogramowali wykorzystując standardowe metody.
Nawiązując do obsługi zdarzeń, nie odbiega on od normy, natomiast dla programistów może okazać niewygodnym brak dedykowanych funkcji dla standardowych zdarzeń. Również małym minusem okazują się być wywołania AJAX czy XHR. Metoda pracy z wywołaniami HTTP w Prototype jest w pewnym stopniu utrudniona przez odwoływanie się do dodatkowych pól obiektu. Warto wspomnieć, że widgety czy różnego rodzaju dodatki są dość okrojone. Możemy ewentualnie wymienić efekty takie jak show czy hide. Podobnie jak w MooTools, wszystko co jest odpowiedzialne zarówno za efekty wizualne jak i interfejs użytkownika, zostało wydzielone do osobnej biblioteki, w tym przypadku Scriptaculous, która za to posiada bardzo rozbudowaną dokumentację wraz z mnóstwem przykładów. Prototype wspiera także bardziej tradycyjne programowanie obiektowe i pozwala na rozszerzanie klas.
Podsumowując możemy wymienić takie cechy Prototype jak:
- rozszerzanie wbudowanych typów i elementów modelu DOM wraz z przydatnymi metodami
- posiada wbudowaną obsługę klas stylu OOP wraz z ich dziedziczeniem
- zapewnia zaawansowane wsparcie dla zarządzania zdarzeniami JavaScript
- wyposażony jest w potężne narzędzia Ajax
- wspiera wiele rodzajów przeglądarek.
Przykładowy kod w Prototype
Prototype Przykład #1
/** define the GameObject constructor function */
var GameObject = function(width, height) {
this.x = Math.floor((Math.random() * myCanvasWidth) + 1);
this.y = Math.floor((Math.random() * myCanvasHeight) + 1);
this.width = width;
this.height = height;
return this;
};
/** (re)define the GameObject prototype object */
GameObject.prototype = {
x: 0,
y: 0,
width: 4,
width: 4,
draw: function() {
myCanvasContext.fillRect(this.x, this.y, this.width, this.height);
}
};
Prototype Przykład #2
/** Creating a Prototype */
function Person(name, last, age, eye) {
this.firstName = name;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
/** Adding a new property to an existing object */
myFriend.prototype.nationality = "English";
/** Adding a new method to an existing object */
myFriend.prototype.fullName = function () {
return this.firstName + " " + this.lastName;
};
Prototype Przykład #3
if(!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, ‘’);
};
}