JSOE - JavaScript Object Editor

Question

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

Answer 1

Nie rozszerza się natywnych prototypów, a już zwłaszcza Object.prototype. To sprawia, że każda klasa w JS dostaje metodę modify, która ma sens wyłącznie dla klas pochodnych od Element. Równie dobrze można po prostu przystosować JSOE do przyjmowania modyfikowanego elementu jako jednego z parametrów i na tej podstawie określać, czy modyfikujemy, czy tworzymy nowy.

insertFirst i insertLast nie mają raczej większego sensu przy istnieniu insertBefore, appendChild, before czy after.

attachFunction na dobrą sprawę można ograniczyć wyłącznie do addEventListener, bo cała reszta to jakaś prehistoria.

Na dobrą sprawę jedynie JSOE.create jest metodą publiczną i można by to odwzorować w kodzie. Zastanawiam się też, czemu nie napisałeś tego w ES6?

No i na sam koniec: prawdę mówiąc nie bardzo widzę zastosowanie dla tego. W dobie Reacta idzie się raczej w stronę abstrakcji pokroju JSX niż generowania DOM z JSON-a.

Comments

Wielkie dzięki za komentarz.

Spróbuje poprawić te błędy, o których napisałeś choć domyślam się, że jest to sam czubek góry lodowej ;). Co do ES6 to planowałem na początku napisać przy jego pomocy tą bibliotekę ale później zmieniłem zdanie i już tak zostało.