Biblioteka JavaScript jLib
jLib to baardzo bardzo (bardzo bardzo) prosta biblioteka JavaScript, dzięki której tworzenie dynamicznych stron jest łatwiejsze. Jeśli ktoś używał wynalazków typu jQuery czy Prototype to wie o co chodzi. W bardzo prosty sposób można modyfikować atrybuty wielu elementów strony jednocześnie. Moja biblioteka nie jest aż tak rozbudowana - jednym z priorytetów, obok chęci nauki JS, było zachowanie małego rozmiaru. Cała biblioteka zajmuje dokładnie 77 linii kodu (ok. 2,5 kb); zachowując przy tym formatowanie, wcięcia itd. Przepuszczając bibliotekę przez jakąś pakowarkę, można to pewnie zmniejszyć o 70%. Trzeba przyznać, że to niewielkie obciążenie dla strony, w przeciwieństwie do w/w, powszechnie używanych bibliotek.
jLib został tak napisany, by możliwa była jego łatwa rozbudowa. W samej bibliotece nie ma nawet jednego efektu typowo graficznego. Biblioteka odpowiada wyłącznie za "wybieranie" z drzewka DOM odpowiednich elementów, umożliwiając manipulację wszystkimi jednocześnie. Wygodny system pluginów pozwoli użyć tą bibliotekę jako "kamień węgielny" biblioteki zawierającej różne efekty specjalne. Przykładowo, jeśli chcemy mieć możliwość łatwej zmiany widoczności obiektu (włącz/wyłącz), wystarczy taki kod, po dołączeniu biblioteki:
_jlib.effect.toggle = function () { return each ( function (obj) { obj.style["display"] = (obj.style["display"]=="none" ? "block" : "none"); } ); };Taki kod musi się znaleźć w sekcji head dokumentu. Od tej pory możemy wywoływać jlib('selektor').toggle(); (lub np. $('selektor').toggle()). Wiem wiem - dodatkowy kod trzeba pisać, mimo stosowania biblioteki. Moim zdaniem to zaleta - wystarczy prosty, kilkulinijkowy plugin który wykona swoje zadanie. Koniec, nawet linijki niepotrzebnego kodu nie będzie. Pozwala to skompletować skrypt, który przy zachowaniu maksymalnej wydajności i minimalnej objętości wykona swoje zadanie. Za pomocą tej biblioteki można bardzo łatwo wybrać wszystkie elementy pasujące do danego wzorca. Ogólnie istnieje 5 modyfikatorów: "selektor", "#identyfikator", "selektor#identyfikator", ".klasa", "selektor.klasa". Selektor to znacznik HTML jaki ma być dopasowany (np. "div" - wszystkie elementy div). Identyfikator - podobnie - element id="coś". Klasa oznacza te elementy, które używają danej klasy - w formie ".klasa", które szuka we wszystkich tagach; "selektor.klasa", które szuka wyłącznie w grupie danego selektora (np. div.coś). Nie ma niestety elementów pochodnych, dzieci, pseudoklas. Myślę jednak że do wielu zastosowań to wystarczy - szczególnie dla stron, które mają być lekkie. Nie wspomniałem jeszcze w jaki sposób bibliotekę się używa. Jest to bardzo proste. Wystarczy załączyć do kodu strony owy skrypt:
<script type="text/javascript" src="jlib.js"></script>
I w tym momencie mamy dostęp do biblioteki za pośrednictwem obiektu jlib. Obiekt ten jako parametr przyjmuje wcześniej wymienione selektory, klasy, identyfikatory - odseparowane prawie dowolnym znakiem - najlepiej jednak stosować tradycyjny przecinek. Dostajemy w ten sposób uchwyt do wcześniej wymienionego obiektu effect, który od tej pory będzie widział wcześniej znalezione elementy i będzie na nich wszystkich jednocześnie operował. Co więcej, każde wywołanie metody tego obiektu zwraca .. obiekt effect, dzięki czemu można łancuchowo łączyć wywołania obiektu, tak by za jednym razem zmienić dowolną ilość właściwości, dla wszystkich elementów. One-liner, rodem z jQuery wita :-)
Przykładowo wywołanie wygląda tak:
<button onclick="jlib('button').css('color', 'red');">click me!</button>Co zmieni kolor tekstu na czerwony, wszystkim znalezionym przyciskom. Nie wspomniałem o małym drobiazgu - opcjonalny, drugi parametr dla obiektu jlib to selektor, wewnątrz którego ma się odbyć poszukiwanie. Standardowo jest to document, jednak nic nie stoi na przeszkodzie by tam wstawić np. parent. Jeśli jlib() to za dużo pisania, można sobie zrobić funkcję $() - wystarczy proste var $ = jlib; i jesteśmy w domu. Prawie jak jQuery, a wygląda identycznie ;-)
ps. Testowałem na Operze, Firefox, Safari oraz IE6, było dobrze. Zapraszam do testów, może komuś się przyda :-)
No fakt, mocno widać, że to *głównie* wprawka programistyczna, chociaż jako osoba, która wychowała się patrząc na dzieła mistrzów tzw. „polskiej szkoły Javascript” mogę być za bardzo przewrażliwiony na punkcie długości kodu ;).
Ale że za długi czy za krótki? :P
No właśnie owi mistrzowie zapewne zrobiliby to w dwie (no, może przesadziłem, trzy :P) linijki kodu ;).
To jacyś wyjątkowi amatorzy pisali tego jQuery, skoro to ma kilkaset kilobajtów ;)
hmm szczerze mówiąc przyjrzałem się tylko fragmentom kodu, ale nie podoba mi się inwazyjny JS..
Nie, po prostu nie pisali tego Polacy :P.
Za to Polacy pisali to:
http://alladyn.art.pl/pol/
Przez co końcowy efekt wygląda tak:
http://alladyn.art.pl/js/Alladyn.js
Co prawda nie jest to nic analogicznego do jQuery (czy innych Prototypów albo tego typu śmiecia), chociaż oba to DHTML (entschuldigung za staroświecką terminologię) – ale popatrz na rok powstania…
@radmen: tzn?
@Paweł Ciupak: Mmm, jaki ładny "throw-the-cat-on-the-keyboard" zapis ;)
Wiem że mogłem w wielu miejscach wstawić "ternary operator" zamiast czytelnego zapisu if (..). Ja już mówiłem, tu jest wersja którą się da przeczytać bez narażania kota. Jak znajdziesz dobrą pakowarkę, która pozastępuje nazwy funkcji pojedynczymi literami, usunie wszelkie białe znaki, niepotrzebne klamry itd.. myślę że to będzie ok. 1kb, może nawet mniej :)
Czy taki sposób operowania na DOM to śmieć? Mi się bardzo podoba, bo jest wygodny, szybki, efektywny. Nie tylko mi zresztą :)
„Jak znajdziesz dobrą pakowarkę, która pozastępuje nazwy funkcji pojedynczymi literami, usunie wszelkie białe znaki, niepotrzebne klamry itd.. myślę że to będzie ok.”
Najlepsza pakowarka to człowiek ;).
„Czy taki sposób operowania na DOM to śmieć?”
Nie to, że cała idea jest śmieciowa, ale śmieciowe jest tego używanie nawet jak się tego nie potrzebuje lub używanie tylko dla jakiejś prostej funkcjonalności, którą szybciej i w mniejszym rozmiarze by się zrobiło pisząc goły kod bez żadnych bibliotek.
No owszem, jak chcesz sobie zrobić ukrywanie/pokazywanie jednego panelu, to nie ma sensu używać jakichkolwiek bibliotek, getElementById i wsio. Ale jak chcesz ukryć wszystkie panele o określonej klasie? Zabawa z getElementsByTagName + sprawdzanie .className lub $('.klasa').hide(); Wybór należy do Ciebie :)
To wystarczy napisać sobie np. taką krótką funkcję, a nie ładować piętnastokilową bibliotekę:
Object.prototype.getElementsByClassName = function(c, t, L, A, C, M, E, i){
L = this.getElementsByTagName(t || '*'); A = [];
for(i = 0; C = (M = L[i++]).className.split(' ');)
while(E = C.pop()) if(E == c) A.push(M); return A;}
No tak... ciekawe :P mimo to, nadal wolę stosować ładny, czytelny zapis, nawet jeśli przy tym zmarnuję te kilkadziesiąt znaków. Mimo wszystko, po ładnych paru latach programowania, bardziej cenię prostotę i czytelność kodu, nie tego typu praktyki, szczególnie jak nagle coś przestanie działać :)
Ale przycie i to można czytelnie zapisać, nie ma tu żadnych zagmatwanych trików:
http://pawel-ciupak.ovh.org/site/?co=getElementsByClassName
Nie podoba mi się definiowanie zmiennych w ten sposób, ani ta pętla for :) fuj fuj fuj :) btw, kiedyś w php napisałem bota na irc w postaci jednego wielkiego "ternary operator" (jak to po polsku jest :/)
Zmienne tylko dla skrócenia, np. dla mnie żadnej różnicy to nie robi. A pętla jak pętla, chyba że chodzi o to `(M = L[i++]).className.split(' ')` – tak jest po rpostu jak dla mnie wygodniej. Może tak będzie lepiej?:
http://pawel-ciupak.ovh.org/site/?co=getElementsByClassName
A „ternary operator” (w znaczeniu `warunek ? gdy_prawda : gdy_fałsz`) to może `operator trójdzielny`? Ale to tylko taka moja inwencja słowotwórcza, nie wiem jak być powinno.
Pewnie że lepiej, coraz bliżej tu do mojego kodu (tyle że ja nie stosowałem prototypów) :-P
Puppy: inwazyjny w sensie - onclick="blah();"
Akurat ten twój kod wydaje mi się jakiś niepotrzebnie rozwlekły i zajeżdża trochę Pascalem.
@radmen: Jest taka biblioteka JS, która przypisuje onclicki do selectorow css... nie pamietam nazwy, ale jest ;)
"operator trójkowy" chyba jest najcześciej spotykane :)
@Paweł Ciupak: Potrzebnie, niepotrzebnie. Oszczędność raptem kilkudziesięciu znaków, kosztem mniejszej czytelności (mimo wszystko).
Nowa wersja biblioteki, spore zmiany :)
zar: jQuery, MooTools, chyba Prototype też ;p
Czy kilkudziesięciu?
Twoja funkcja – ~484 znaków, a przy tym z pewnym błędem, którego naprawienie trochę zwiększy jej długość
Moja funkcja w wersji skróconej na siłę – 154 znaki
Moja funkcja w jednolinijkowej nieskróconej – 226 znaków
@radmen: nie o to mi chodzilo... w sumie to nie pamietam o co mi chodzilo :P
Chodziło Ci o to, żeby nie było tej inwazyjności..? :)
Mniej wiecej. Biegalo o to, by kod html pozbawic wszelkich javascriptow itp... wlasnie onlickow... I do tego byl projekt przypisujacy takie duperela do funkcji js... Ale moze to we wczesnych wersja prototype bylo, bo dawno sie nie krecilem w temacie... Teraz pewno sa jakies event listenery...
zar: no to te bilbioteki, ktore wymienilem (no moze poza Prototype - nie wiem) na pewno takie coś wspierają ;]
<odchodzi mamrocząc> :P
@Paweł: Jakim błędem, jeśli można wiedzieć? :)
To, żeś zapomniał, że do jednego elementu może być przypisane kilka klas oddzielonych spacjami.
Ok, poprawione, dzięki :)
Swoją drogą, powiększanie tekstu na tym blogu działa już w oparciu o jlib ;-)
ps. Chcecie event listener? Proszę:
http://puppy.jogger.pl/files/jld1.html :)
(Opera, FF działa, IE nie, on chyba nie obsługuje eventów tego typu)
Dlatego są lepsze międzyprzeglądarkowe metody przyczepiania `event`-ów:
http://ejohn.org/projects/flexible-javascript-events/
To był 5-minutowy przykład ;)
ps.
http://wiki.jiyuu.info/jlib - zawsze najnowsze wersje ;-) już jest aż 0.0.4 ;-)
+ kilka pluginów