• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JSOE - JavaScript Object Editor

+1 głos
69 wizyt
pytanie zadane 12 grudnia 2017 w Nasze projekty przez jarek9244 Gaduła (3,430 p.)

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

1 odpowiedź

0 głosów
odpowiedź 12 grudnia 2017 przez Comandeer Mentor (459,040 p.)

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, appendChildbefore 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.

komentarz 12 grudnia 2017 przez jarek9244 Gaduła (3,430 p.)
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.

Podobne pytania

0 głosów
1 odpowiedź 83 wizyt
0 głosów
1 odpowiedź 316 wizyt
pytanie zadane 10 lutego 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,380 p.)
0 głosów
2 odpowiedzi 106 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

65,753 zapytań

112,389 odpowiedzi

237,305 komentarzy

46,699 pasjonatów

Przeglądających: 244
Pasjonatów: 16 Gości: 228

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...