Witam
Chciałbym wam przedstawić mój projekt, nad którym siedzę już od kilku dni. Jest to JSOE czyli JavaScript Object Editor. Jak sama nazwa mówi umożliwia on w szybki i prosty sposób na stworzenie bądź modyfikowanie istniejących elementów HTML.
Link do repozytorium: https://github.com/jarek9244/JSOE
1. Tworzenie nowego elementu
Tworzenie obiektów jest bardzo proste. Wystarczy wywołać funkcję JSOE.create({parametry}); a jako jej argument podać obiekt JSON, w którym należy ustawić wszystkie parametry nowego elementu. Można używać wszystkich atrybutów HTML takich jak id, class, alt, itd. Ponadto dostępne są dwa nowe znaczniki ":type" - który określa typ nowo tworzonego obiektu oraz ":text" - czyli tekst wewnątrz znacznika. Ważny jest : przed type i text.
var object = JSOE.create({
":type": "div",
":text": "To jest tekst",
"id": "object_id"
});
console.log(object); //<div id="object_id">To jest tekst</div>
var object = JSOE.create({":type": "p", ":text": "Lorem lipsum dolor sit ament", "id": "art1", "class": "article"});
console.log(object); //<p id="art1" class="article">Lorem lipsum dolor sit ament</p>
var object = JSOE.create({":type": "img", "src": "img/logo.jpg", "alt": "Tekst alternatywny"});
console.log(object); //<img src="img/logo.jpg" alt="Tekst alternatywny">
2. Podpinanie funkcji
Biblioteka umożliwia podpinanie do elementów funkcji. Żeby to zrobić należy umieścić w JSON nazwę funkcji poprzedzonej prefixem "_". Ten zabieg sugeruje, że chcemy podpiąć do obiektu funkcję a nie atrybut. Ciało funkcji musi być umieszczone w cudzysłowie albo apostrofie. Na razie nie można podłączyć czystego kodu js jednak wartość funkcji jest zamieniana z tekstu na js poprzez tworzenie nowej funkcji (new Function)
var object = JSOE.create({":type": "button", ":text": "kliknij mnie", "_onclick"="start(); console.log('Działa!');"});
console.log(object); => <button>kliknij mnie</button> =>Po kliknięciu zostanie uruchomiona funkcja start() oraz w konsoli wyświetli się komunikat "Działa!"
3. Bindowanie zmiennych
Biblioteka umożliwia bindowanie zmiennych czyli podmianę znaczników %v na wartości przesłane jako argumenty w funkcji JSOE.create();
var object = JSOE.create({":type": "div", ":text": "Witaj %v!", "id": "nowe%v"}, "Świecie", "Id");
console.log(object);//<div id="noweId">Witaj Świecie!</div>
var width = 50, height = 25;
var object = JSOE.create({":type": "img", "src": "img/%v.jpg", "alt": "%v", "style"="width: %vpx; height: %v%;"}, "logo", "Tekst alternatywny", width, height);
console.log(object); //<img src="img/logo.jpg" alt="Tekst alternatywny" style="width: 50px; height: 25%;">
4. Modyfikowanie istniejących elementów
Możliwe jest edytowanie istniejących elementów. Wystarczy wybrać interesujący nas obiekt i wywołać na nim funkcję modify({parametry}, zmienne). Funkcja działa tak samo jak tworzenie obiektów czyli przyjmuje tablicę JSON, a także umożliwia dołączanie funkcji i bindowanie zmiennych.
var obj = document.getElementById("score");
console.log(obj); => <div id="score">2240 punktów</div>
var newScore = 3450, user = "jarek9244";
obj.modify({"id": "noweID", ":text": "%v punktów", "_onclick": "checkScore('%v', %v)"}, newScore, user, newScore);
console.log(obj); => <div id="noweID" onclick="checkScore('jarek9244', 3450)">3450 punktów</div>
5. Funkcja insertFirst()
Umożliwia wstawienie nowego elementu jako pierwsze dziecko rodzica
var obj = document.querySelector(".wrapper");
var newArticle = JSOE.create({":type": "p", ":text": "%v", "class"="article", "id": "new_article"}, articleText);
obj.insertFirst(newArticle);
<div>
<p class="article" id="new_article">Lorem ipsum ...</p> <-- nowy elementt
<p id="old_article">Lorep ipsum ...</p>
</div>
Jak na razie to wszystkie rzeczy, które oferuje moja biblioteka. Powiedzcie co o niej sądzicie. Wszystkie komentarze zarówno te pozytywne jak i negatywne są mile widziane, ponieważ chce stworzyć szybkie i niezawodne narzędzie do zarządzania elementami na stronie.
Pozdrawiam :D