Share
Limbile de codificare sunt foarte mult; limbi. Experiența într-un limbaj de codare, fie HTML, CSS, JavaScript sau orice altceva, are toate provocările de a învăța o nouă limbă vorbită.
La fel ca în limbile vorbite, fiecare limbă de codare are propria sa "gramatică"; reguli stricte și idiosincrazii care sunt adesea greu de învățat și se absoarbe pe deplin pe ani de practică.
uilang este un limbaj nou, bazat pe JavaScript, creat de Benjamin De Cock, și permite proiectanților web să creeze interacțiuni de clicuri UI folosind un set de reguli luate direct din limba engleză. Aceasta înseamnă o curbă de învățare mai intuitivă și mai blândă pentru începătorii care doresc să ușureze utilizarea JavaScript și o metodă mai rapidă de implementare a interacțiunii cu clicurile UI pentru mâinile vechi.
Miezul lui uilang este abilitatea de a adăuga, elimina sau comuta numele de clasă pe orice element dat. Acestea pot fi doar trei acțiuni, dar în combinație cu CSS ele se traduc la capacitatea de a face tot felul de lucruri cum ar fi ascunzând casetele de notificare și modale, comutatoarele de animație, afișarea dropdown-urilor meniului nav și sistemul de conducere și acordeon.
De exemplu, să presupunem că aveți următoarea casetă de notificare:
Cutia globală poartă id-ul #notificare, iar butonul are clasa .ascunde. CSS este, de asemenea, inclus pe pagina din clasă .ascuns că atunci când se adaugă la cutie va seta opacitatea la zero, prin urmare, ascunderea sau respingerea notificării.
Codul folosit pentru a crea această casetă este:
Aveți 3 mesaje necitite.
Utilizând JavaScript direct, dacă doriți să adăugați clasa .ascuns la caseta la apăsarea butonului, ai avea nevoie de ceva de genul:
Accentsconagua
document.addEventListener ('DOMContentLoaded', functie () [] .forEach.call (document.querySelectorAll ('ascunde'), function (el) el.addEventListener .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('notificare'); classList.add ('ascuns'););););Dacă nu aveți experiență cu JavaScript, cantitatea de cod poate fi destul de copleșitoare. Chiar dacă sunteți familiarizați, poate fi încă destul de consumatoare de timp pentru a produce.
Prin folosirea uilang în loc de JavaScript, pentru a obține același scop scrieți o instrucțiune instrucțională cum ar fi:
dând clic pe ".hide" adaugă clasa "ascunsă" în "#notification" După cum puteți vedea, acest cod este mult mai ușor de citit, indiferent de nivelul de experiență pe care îl aveți. Abordarea limbajului simplu îl face să fie ușor de înțeles și să se poată desfășura rapid.
Să aruncăm o privire la modul în care uilang funcționează.
Primul pas pentru a utiliza uilang este de a descărca fișierul JS mic, care îl deține. Puteți să-l prindeți prin Descarca faceți clic pe link-ul de pe uilang.com.
Odată ce ați descărcat fișierul, încărcați-l în pagina HTML cu:
Acum sunteți gata imediat să începeți să utilizați uilang cu orice element din pagina dvs..
Mai întâi, alegeți elementul țintă, cum ar fi un buton, pe care doriți uilang să îl urmăriți și să răspundeți când oamenii fac clic pe el. Apoi, setați o acțiune care va adăuga, elimina sau comuta un nume de clasă și veți determina elementul în care doriți să se aplice acea acțiune.
Asigurați-vă că ați înfășurat orice comenzi uilang în faceți clic pe ca astfel:
faceți clic pe Apoi, adăugați clasa sau ID-ul elementului pe care doriți să-l vizați pentru a urmări clicurile, înfășurate în semne de vorbire:
dând click pe ".thisbutton" În această etapă, puteți de asemenea să alegeți mai mult de un element țintă urmărit pentru clicuri prin adăugarea unei virgule și a unei clase sau a unei alte clase:
dând click pe ".thisbutton, #thatbutton" Aveți acum posibilitatea de a alege între trei acțiuni; adaugă clasa, înlătură clasa sau comută clasa.
Inserați acțiunea care face ceea ce doriți, urmat de numele clasei pe care o veți adăuga / elimina / comuta:
făcând clic pe ". acest buton, #buttonul" adaugă clasa "popsup" În cele din urmă, adăugați cuvântul pe urmată de clasa sau ID-ul (în limbajul de vorbire) al elementului pe care îl modificați, adică elementul la care doriți să adăugați / eliminați / comutați o clasă:
făcând clic pe ". acest buton, #butonul" adaugă clasa "popsup" pe "#message" De asemenea, puteți utiliza mai multe linii și puteți defini mai multe acțiuni pe clic:
dând click pe butonul "#", butonul "adaugă clasa" popsup "pe" #message "dând clic pe" .otherbutton "adaugă clasa" goaway "pe" #message " Dacă elementul pe care doriți să urmăriți clicurile este, de asemenea, elementul pe care doriți să îl adăugați / eliminați / comutați pe clase, puteți utiliza cuvântul cheie ţintă în loc de a scrie identificatorul a doua oară, după cum urmează:
făcând clic pe ".animation" comută clasa "play_anim" pe "target" Asta aproape va împrăștie demonstrația noastră rapidă de uilang! Cel mai bun mod de a vedea ce este vorba este să vă deplasați la uilang.com și să jucați cu demo-urile vii de acolo.
De asemenea, este furnizat un transpilator pe care îl puteți utiliza pentru a conecta niște comenzi uilang și pentru a vedea ce drept JavaScript este produs ca rezultat: transpiler.uilang.com.
Benjamin, dezvoltatorul, a publicat, de asemenea, o piesă pe Mediu, detaliind filosofia din spatele uilang și scopul său de a ajuta la transformarea trecerii în învățarea JavaScript mai ușor pentru alții decât pentru el.
Dacă intri în JavaScript și căutați un mod mai intuitiv de a depăși aceste prime obstacole sau dacă sunteți doar în căutarea unei metode simplificate de manipulare a interacțiunilor clic, încercați uilang în următorul proiect.
