Prototypowy framework JavaScript - Prototype JavaScript Framework

W przypadku innych zastosowań zobacz Programowanie oparte na prototypach .
Prototyp
Pierwotny autor (autorzy) Sam Stephenson
Deweloper(zy) Zespół rdzenia prototypu
Pierwsze wydanie luty 2005 ; 16 lat temu ( 2005-02 )
Wersja stabilna
1.7.3 / 22 września 2015 ; 5 lat temu ( 22.09.2015 )
Magazyn Edytuj to na Wikidata
Napisane w JavaScript
Rodzaj Biblioteka JavaScript
Licencja Licencja MIT
Stronie internetowej prototypejs .org Edytuj to na Wikidanych

Prototype ramach JavaScript jest JavaScript framework stworzony przez Sama Stephensona w lutym 2005 roku w ramach Fundacji Ajax wsparcia w Ruby on Rails . Jest zaimplementowany jako pojedynczy plik kodu JavaScript, zwykle nazywany prototype.js . Prototype jest dystrybuowany samodzielnie, ale także w ramach większych projektów, takich jak Ruby on Rails, script.aculo.us i Rico. Według danych w3techs, według stanu na marzec 2021 r., Prototype jest używane przez 0,6% wszystkich stron internetowych.

funkcje

Prototype udostępnia różne funkcje do tworzenia aplikacji JavaScript. Funkcje sięgają od skrótów programistycznych do głównych funkcji do obsługi XMLHttpRequest .

Prototype udostępnia również funkcje biblioteczne do obsługi klas i obiektów opartych na klasach . W JavaScript tworzenie obiektów jest oparte na prototypach : funkcja tworząca obiekt może mieć właściwość prototype , a każdy obiekt przypisany do tej właściwości będzie używany jako prototyp dla obiektów utworzonych za pomocą tej funkcji. Ramy Prototype nie należy mylić z tą funkcją języka.

Przykładowe funkcje użytkowe

Funkcja $()

Funkcję dolara , $ (), mogą być używane jako skrót do getElementById funkcji. Aby odwołać się do elementu w Document Object Model (DOM) strony HTML , zwykłą funkcją identyfikującą element jest: 

document.getElementById("id_of_element").style.color = "#ffffff";

Funkcja $() redukuje kod do: 

$("id_of_element").setStyle({color: '#ffffff'});

Funkcja $() może również otrzymać element jako parametr i zwróci, tak jak w poprzednim przykładzie, rozszerzony obiekt prototypu. 

var domElement = document.getElementById("id_of_element");  // Usual object reference returned
var prototypeEnhancedDomElement = $(domElement);            // Prototype extended object reference
Uwaga : Podobnie jak podkreślenie ( _), $znak jest legalnym „znakiem słowa” w identyfikatorach JavaScript i nie ma innego znaczenia w języku. Został on dodany do języka w tym samym czasie, co wsparcie dla wyrażeń regularnych , dzięki czemu można było emulować dopasowujące zmienne w stylu Perla , takie jak $`i $'.

Funkcja $F()

Opierając się na $()funkcji: $F()funkcja zwraca wartość żądanego elementu formularza. W przypadku danych wejściowych typu „tekst” funkcja zwróci dane zawarte w elemencie. W przypadku elementu wejściowego „select” funkcja zwróci aktualnie wybraną wartość. 

$F("id_of_input_element")

Funkcja $$()

Funkcja dolara to mechanizm selektora CSS Prototype . Zwraca wszystkie pasujące elementy, zgodnie z tymi samymi regułami, co selektor w arkuszu stylów CSS. Na przykład, jeśli chcesz uzyskać wszystkie <a>elementy z klasą „pulsate”, użyjesz następującego: 

$$("a.pulsate")

Zwraca kolekcję elementów. Jeśli używasz rozszerzenia script.aculo.us z podstawowej biblioteki Prototype, możesz zastosować efekt „pulsowania” (mrugnięcia) w następujący sposób: 

$$("a.pulsate").each(Effect.Pulsate);

Obiekt Ajax

W celu zmniejszenia ilości kodu potrzebnego do uruchomienia funkcji w różnych przeglądarkach XMLHttpRequest, Prototype udostępnia Ajaxobiekt do abstrahowania różnych przeglądarek. Ma dwie główne metody: Ajax.Request()i Ajax.Updater(). Istnieją dwie formy Ajaxprzedmiotu. Ajax.Requestzwraca surowe dane wyjściowe XML z wywołania AJAX, podczas Ajax.Updatergdy zwrot zostanie wstrzyknięty wewnątrz określonego obiektu DOM. Ajax.RequestPoniżej znajdzie aktualne wartości elementów dwóch HTML wejściowych formularza, kwestii żądania HTTP POST do serwera z tymi parami nazwa elementu / wartość, a uruchamia funkcję niestandardową (zwany showResponseponiżej), gdy odpowiedź HTTP odebrany z serwera: 

new Ajax.Request("http://localhost/server_script", {
    parameters: {
        value1: $F("form_element_id_1"),
        value2: $F("form_element_id_2")
    },
    onSuccess: showResponse,
    onFailure: showError
});

Programowanie obiektowe

Prototype dodaje również obsługę bardziej tradycyjnego programowania obiektowego. Class.create()Metoda służy do tworzenia nowej klasy. Klasie jest następnie przypisywana a, prototypektóra działa jako plan dla instancji klasy. 

var FirstClass = Class.create( {
    // The initialize method serves as a constructor
    initialize: function () {
        this.data = "Hello World";
    }
});

Przedłużenie kolejnej klasy: 

Ajax.Request = Class.create( Ajax.Base, {
    // Override the initialize method
    initialize: function(url, options) {
        this.transport = Ajax.getTransport();
        this.setOptions(options);
        this.request(url);
    },
    // ...more methods add ...
});

Funkcja framework Object.extend(dest, src)pobiera dwa obiekty jako parametry i kopiuje właściwości drugiego obiektu do pierwszego symulującego dziedziczenie. Połączony obiekt jest również zwracany jako wynik funkcji. Tak jak w powyższym przykładzie, pierwszy parametr zwykle tworzy obiekt bazowy, podczas gdy drugi jest obiektem anonimowym używanym wyłącznie do definiowania dodatkowych właściwości. Cała deklaracja podklasy znajduje się w nawiasach wywołania funkcji.

Problemy

W przeciwieństwie do innych bibliotek JavaScript, takich jak jQuery , Prototype rozszerza DOM. Planujemy to zmienić w kolejnej dużej wersji biblioteki.

W kwietniu 2010, bloger Juriy 'kangax' Zaytsev (z Prototype Core) szczegółowo opisał problemy, które mogą wyniknąć z tego, że małpa łata nowe metody i właściwości do obiektów zdefiniowanych przez DOM W3C. Te pomysły są odzwierciedleniem myśli opublikowanych w marcu 2010 roku przez Yahoo! deweloper Nicholas C. Zakas Zostały one podsumowane w następujący sposób

  • Problemy z różnymi przeglądarkami: obiekty hosta nie podlegają regułom, niezgodne zachowanie IE DOM itp.
  • Możliwość kolizji nazw
  • Narzut na wydajność

Do 2008 roku udokumentowano już konkretne problemy z używaniem metod rozszerzeń DOM w starszych wersjach Prototype, w połączeniu z nowszymi wersjami obecnych przeglądarek. Zamiast dodawać nowe metody i właściwości do istniejących wcześniej obiektów DOM „hosta”, takich Elementjak element.hide(), rozwiązaniem tych problemów jest zapewnienie otaczających obiektów wokół tych obiektów hosta i zaimplementowanie na nich nowych metod. jQueryjest takim obiektem opakowującym w bibliotece o tej nazwie.

Obecnie powszechnie oczekuje się, że większość tych pomysłów i problemów zostanie rozwiązanych w wydaniu Prototype 2.0, ale deweloperzy prototypów będą musieli nauczyć się pracować ze zmienioną składnią, a większość istniejącego kodu Prototype stanie się nieaktualna.

Zobacz też

Bibliografia

Bibliografia

Linki zewnętrzne