Înlocuirea jQuery cu Vue.js: nu este necesar niciun pas de construcție

A fost imposibil să ignori toate hype-urile din jurul cadrelor JavaScript în ultima vreme, dar s-ar putea să nu fie potrivite pentru proiectele tale. Poate că nu doriți să configurați un întreg sistem de construcție pentru unele abstracții mici de care ați putea face fără. Poate că mutarea unui proiect într-un sistem de construcție și, prin urmare, o metodă diferită de implementare ar însemna mult timp și efort suplimentar pe care s-ar putea să nu le puteți factura unui client. Poate că nu doriți să scrieți tot codul HTML în JavaScript. Lista continuă.

Ceea ce unii oameni ar putea să nu știe este că puteți încorpora Vue în proiectul dvs. în același mod în care ați încorpora jQuery, fără a fi necesar un pas de construcție. Vue este flexibil în sensul că îl putem folosi direct în HTML.

Deci, dacă structura actuală a paginii arată astfel:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> //some jquery code here </script>

Puteți schimba literalmente eticheta de script aici și încă folosiți HTML și JS în tandem, așa cum ați făcut înainte, refactorând doar câteva bucăți mici de cod. Nu trebuie să rescrieți codul HTML în JavaScript, nu trebuie să utilizați webpack și nu trebuie să configurați un sistem gigant:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> <script> //some vue code here </script>

Puteți înlocui etichetele și lăsați marcajul așa cum este. Cea mai bună parte este că ați putea crede că codul va deveni mai complicat, dar s-ar putea să descoperiți citind acest articol și vizând exemplele, că Vue este extrem de simplu, lizibil și ușor de întreținut și adaptat. În ceea ce privește dimensiunea, sunt destul de comparabile, de asemenea, pentru a le folosi ca dintr-un CDN, miniat, versiunea Vue 2.5.3 are 86KB . jQuery 3.2.1 are 87 KB .

Să acoperim câteva cazuri comune de utilizare în jQuery și cum le-am trece la Vue și de ce am dori chiar să facem acest lucru.

Captarea intrărilor utilizatorului

Un caz de utilizare foarte comun pentru a avea nevoie de JavaScript pe un site este capturarea intrărilor utilizatorilor dintr-un formular, așa că să începem de acolo. Încă nu vom încorpora formularul complet din motive de simplitate și claritate, dar vom lucra până la sfârșit.

Pentru a captura informații pe măsură ce utilizatorul tasta, iată cum am face acest lucru în jQuery și Vue - unul lângă altul:

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //keypress wouldn't include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups $('#app').keyup(function(e) { var formname = $(this).find('.formname'); //store in a variable to reduce repetition var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model="name" /> <!--v-model is doing the magic here--> <p>{{ name }}</p> </div>

 //this is a vue instance new Vue({ //this targets the div id app el: '#app', data: { name: '' //this stores data values for 'name' } })

Folosesc acest exemplu pentru că dezvăluie câteva dintre punctele forte ale lui Vue. Vue este reactiv, ceea ce îl face deosebit de capabil să răspundă la schimbări. Puteți vedea cum, pe măsură ce actualizăm ceea ce scriem, se schimbă instantaneu - nu există întârziere.

Puteți vedea, de asemenea, că în versiunea jQuery, DOM-ul este în control - preluăm lucrurile din DOM, îl ascultăm și îi răspundem. Acest lucru ne leagă de modul în care DOM este configurat în prezent și ne obligă să ne gândim cum să-l traversăm. Dacă structura elementelor HTML s-ar modifica, ar trebui să ne adaptăm codul pentru a corespunde acelor modificări.

În versiunea Vue, stocăm starea - ținem evidența unei proprietăți pe care dorim să o actualizăm și să o modificăm și urmărim elementul pe care vrem să-l schimbăm printr-un lucru numit directivă. Aceasta înseamnă că este atașat direct la elementul HTML pe care trebuie să-l țintim. Structura DOM-ului se poate schimba, HTML-ul se poate mișca și nimic din toate acestea nu ar afecta performanța noastră sau capturarea acestor evenimente. În cazul nostru, folosim acel atribut v-model pe intrare pentru a ne conecta la datele pe care le stocăm în JavaScript.

Dar! Acesta nu este un caz de utilizare la fel de obișnuit ca stocarea ceva în timp ce apăsați tasta Enter, așa că să ne uităm la asta în continuare.

Stocarea intrărilor utilizatorului într-un singur eveniment

Lucrul interesant despre modul în care funcționează Vue este că este decuplat de nevoia de a se gândi la anumite evenimente DOM atunci când stochează și preiau date. În esență, avem deja o idee despre ceea ce vrem să surprindem; îi dăm formă alegând un eveniment cu care să-l modificăm. În contrast, jQuery este strâns legat de ceea ce face DOM și se bazează pe acele evenimente DOM pentru a construi variabilele pe care le stochează, care pot fi plasate oriunde, mai degrabă decât un grup consistent (în date) pentru recuperare. Putem vedea acest lucru în versiunea actualizată a ultimului exemplu, unde informațiile sunt adunate la apăsarea tastei enter:

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //We query the div id app and find the other elements so that we can reduce lookups $('#app').change(function(e) { var n_input = $(this).find('#thing').val(); $(this).find('.formname').append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model.lazy="name" /> <p>{{ name }}</p> </div>

 new Vue({ el: '#app', data: { name: '' } });

În această versiune, jQuery este oarecum simplificat, deoarece nu trebuie să captăm lucruri la fiecare apăsare a tastei, dar încă extragem lucruri din DOM și răspundem pas cu pas la aceste modificări. Codul nostru din jQuery va merge întotdeauna cam așa:

„Du-te să ia acest element, vezi ce face, ține-te de aceste schimbări, fă ceva cu aceste modificări.”

În comparație: în Vue, deținem controlul asupra a ceea ce se schimbă, iar DOM-ul răspunde la aceste modificări pe baza comenzilor noastre. Îl atașăm direct la lucrul pe care dorim să îl actualizăm. În cazul nostru, avem o mică abstractizare numită modificator: v-model.lazy . Vue acum știe să nu înceapă să stocheze acest lucru decât după ce apare un eveniment de modificare. Destul de curat!

Comutarea claselor

Următorul lucru pe care îl vom acoperi este comutarea claselor CSS pentru că, după cum m-a informat atotputernicul, care urmărește mereu, Googly, este cea mai comună funcționalitate jQuery.

 <div> <button aria-pressed="false">Toggle me</button> <p class="toggle">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS $(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); }); }); 

 <div> <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button> <p :class="{ red: active }">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS new Vue({ el: '#app', data: { active: false } })

Din nou, ceea ce vedem aici este că în versiunea jQuery stocăm starea în DOM. Elementul are clasa, iar jQuery ia o decizie bazată pe prezența clasei, pe care o verifică prin ping-ul DOM. În versiunea Vue, stocăm o condiție și o stilăm în funcție de starea respectivă. Nu cerem DOM-ului aceste informații, le păstrăm noi înșine.

Stocăm active în date, butonul comută condiția, iar .red este modificat în funcție de acea condiție. Chiar și stările pentru accesibilitate, aria-pressed , sunt declarate mult mai rapid, deoarece nu trebuie să setăm nimic în scriptul în Vue, putem comuta între stări direct în linie în șablon pe baza stării „ active ”. .'

Veți observa, de asemenea, în ultimele exemple, că ați fi crezut că ar fi mult mai mult cod pentru a începe să lucrați cu Vue.js decât cu jQuery, dar sunt de fapt destul de comparabile.

Ascunderea și afișarea

Un alt caz comun de utilizare jQuery este ascunderea și afișarea a ceva. jQuery a făcut întotdeauna o treabă foarte bună făcând această sarcină cu adevărat simplă, așa că haideți să aruncăm o privire la cum arată, unul lângă altul cu Vue.

 <div> <button type="button" aria-expanded="false"> Toggle Panel </button> <p class="hello">hello</p> </div>

 $(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); }); }); 

 <div> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'"> Toggle Panel </button> <p v-if="show">hello</p> </div>

 new Vue({ el: '#app', data: { show: true } })

Atât jQuery, cât și Vue fac o treabă bună de a menține această sarcină simplă, dar există câteva motive pentru care lucrez cu adevărat cu Vue pentru ceva de genul unei comutatoare. Vue are un instrument numit Vue devtools. Acest lucru nu este diferit de Chrome devtools, dar atunci când îl folosim, obținem câteva informații speciale despre ce se întâmplă cu Vue.

Atât în ​​versiunea jQuery, cât și în versiunea Vue, putem vedea că elementul se ascunde și apare. Dar dacă ceva ar merge prost? Ce se întâmplă dacă ceva despre codul nostru nu a funcționat așa cum ne așteptam? Pentru a începe depanarea cu jQuery, probabil că am adăuga unele console.log sau am seta niște puncte de întrerupere pentru a încerca să găsim unde lucrurile au greșit.

Acum, nu este nimic în neregulă cu console.log -urile, dar cu ajutorul instrumentelor de dezvoltare Vue, putem obține de fapt o imagine practică a Vue (nu am putut rezista) a ceea ce Vue crede că se întâmplă. În acest gif de mai jos, puteți vedea pe măsură ce comutăm butonul, Vue devtools actualizează starea adevărat/fals în consecință. Dacă DOM-ul nu va funcționa vreodată așa cum ne așteptam, am putea vedea datele în Vue în timp real. Acest lucru face mult mai ușor de depanat; este de fapt destul de minunat.

Celălalt lucru care îmi place la asta este că v-if ul este ușor de extins la alte condiții. Pot decide să folosesc un lucru numit v-show în loc de v-if dacă lucrul pe care îl schimb se va afișa și se va ascunde frecvent: v-if va demonta complet elementul, în timp ce v-show va comuta doar vizibilitatea acestuia. Această distincție este cu adevărat importantă deoarece este mult mai performant să comutați vizibilitatea într-un stil, mai degrabă decât să demontați/montați complet nodul DOM. Pot arăta sau ascunde ceva în funcție de o mulțime de condiții, sau chiar de prezența intrărilor utilizatorului sau de alte condiții. Aici, de obicei, jQuery poate deveni un pic dezordonat, punând ping DOM în mai multe locații și coordonându-le. Mai jos este un exemplu de coordonare care arată ceva bazat pe prezența intrărilor utilizatorului:

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea v-model="tacos"></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 new Vue({ el: '#app', data() { return { tacos: '' } } }) 

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 $(function() { var button = $('.button'); var textarea = $('#textarea'); button.hide(); textarea.keyup(function() { if (textarea.val().length > 0) { button.show(); } else { button.hide(); } }) });

În acest exemplu, puteți vedea valoarea de a avea Vue să mențină starea - reacționăm la schimbări foarte natural și cu mai puțin cod. Odată ce te obișnuiești cu stilul, este mai rapid de înțeles pentru că nu trebuie să trasezi logica linie cu linie. Mulți oameni numesc această diferență „imperativ vs. declarativ”.

Trimiterea unui formular

Cazul de utilizare canonic pentru jQuery a trimis istoric un formular cu un apel AJAX, așa că ar trebui să ne uităm și la asta. Vue de fapt nu are un lucru încorporat precum AJAX; este tipic în aplicația Vue să folosești ceva de genul Axios (o bibliotecă JavaScript pentru a face cereri HTTP) pentru a ajuta la această sarcină.

Acest exemplu este puțin mai complicat decât restul. Vom face câteva lucruri aici:

1. Butonul va apărea gri înainte de a începe să scriem în formularul nostru, apoi va primi o clasă „activă” și va deveni albastru;
2. Când trimitem formularul, vom împiedica încărcarea paginii;
3. Când formularul este trimis, vom afișa datele răspunsului pe pagină.

 <div> <form action="/"> <div> <label for="name">Name:</label><br> <input type="text" name="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" name="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea name="caps" required></textarea> </div> <button class="submit" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre class="response"></pre> </div> </form> </div>

 $(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length > 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { event.preventDefault(); //get the form data var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // process the form $.ajax({ type: "POST", url: "//jsonplaceholder.typicode.com/posts", data: formData, dataType: "json", encode: true }).done(function(data) { $(".response") .empty() .append(JSON.stringify(data, null, 2)); }); }); });

Aici, vom vedea liniile 2-10 care se ocupă de gestionarea clasei de butoane, în mod similar cu modul în care am făcut asta înainte. Introducem un parametru numit event în formular, apoi spunem event.preventDefault() pentru a evita reîncărcarea paginii. Apoi colectăm toate datele formularului din intrările formularului, procesăm formularul și apoi punem răspunsul în .done() de la cererea AJAX.

 <div> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label><br> <input type="text" v-model="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" v-model="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea v-model="caps" required></textarea> </div> <button :class="[name ? activeClass : '']" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre>{{ response }}</pre> </div> </form> </div>

 new Vue({ el: '#app', data() { return { name: '', email: '', caps: '', response: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('//jsonplaceholder.typicode.com/posts', { name: this.name, email: this.email, caps: this.caps }).then(response => { this.response = JSON.stringify(response, null, 2) }) } } })

În versiunea Vue, decidem ce câmpuri trebuie să populam în formular și apoi le atașăm cu acel v-model pe care l-am folosit mai devreme. Verificăm prezența numelui pentru a comuta între clasă. În loc să trecem evenimentul și să scriem event.preventDefault() , tot ce trebuie să facem este să scriem @submit.prevent pe elementul nostru de formular și de asta avem grijă pentru noi. Pentru a trimite postarea în sine, folosim Axios și vom stoca răspunsul în instanța Vue ca răspuns.

Există încă multe lucruri pe care am dori să le facem pentru a avea un formular pregătit pentru producție, inclusiv validarea, gestionarea erorilor și teste de scriere, dar în acest mic exemplu, puteți vedea cât de curat și lizibil poate fi Vue în timp ce gestionați o mulțime de lucruri care se actualizează și se schimbă, inclusiv introducerea utilizatorului.

Concluzie

Este cu siguranță ok să folosești jQuery dacă ți se potrivește! Acest articol servește pentru a arăta că Vue este, de asemenea, o abstractizare destul de drăguță pentru site-urile mici care nu au nevoie de multă suprasarcină. Vue este comparabil ca dimensiune, ușor de raționat și este destul de banal să comutați mici părți de funcționalitate la Vue fără a rescrie HTML-ul în JavaScript și a adopta un sistem de compilare dacă nu aveți lățime de bandă. Toate acestea îl fac destul de convingător de luat în considerare.

Datorită flexibilității Vue, este, de asemenea, ușor să faceți tranziția acestui cod la un pas de construcție și la structurile componente dacă doriți să adoptați o structură mai complexă în timp. Este de fapt destul de distractiv să-l încerci, așa că atunci când ești gata să faci asta, verifică vue-cli. Ceea ce face acest instrument este să vă ofere posibilitatea de a construi o întreagă versiune Vue și webpack la nivel de producție cu doar câteva comenzi de terminal. Acest lucru vă permite să lucrați cu componente cu un singur fișier, unde puteți utiliza HTML, CSS și Script în tandem într-un singur fișier care formează componente unice, reutilizabile. Nu trebuie să configurați compilarea pachetului web decât dacă doriți să faceți ceva special, astfel încât economisiți mult timp pentru a configura lucrurile. Au chiar și o comandă încorporată pentru a pregăti totul pentru implementarea în producție.

Lucrul plăcut despre flexibilitatea de a alege oricare dintre modalitățile de încorporare a Vue în proiectul tău înseamnă că nu ești presat să-ți schimbi stilul de lucru dintr-o dată și că poți chiar să faci modificări încet în timp. Acesta este motivul pentru care oamenii numesc Vue cadru progresiv.