jQuery'yi Vue.js ile Değiştirmek: Oluşturma Adımına Gerek Yok

Son zamanlarda JavaScript çerçevelerini çevreleyen tüm hype'ı görmezden gelmek imkansızdı, ancak projeleriniz için uygun olmayabilirler. Belki de onsuz yapabileceğiniz bazı küçük soyutlamalar için bütün bir yapı sistemi kurmak istemezsiniz. Belki bir projeyi bir yapı sistemine taşımak ve bu nedenle farklı dağıtım yöntemi, bir müşteriye faturalandıramayacağınız çok fazla zaman ve çaba anlamına gelebilir. Belki de tüm HTML'nizi JavaScript'te yazmak istemiyorsunuz. Liste devam ediyor.

Bazı kişilerin bilmeyebileceği şey, Vue'yu projenize jQuery'yi dahil ettiğiniz gibi dahil edebilirsiniz, herhangi bir derleme adımı gerekmez. Vue, onu doğrudan HTML'de kullanabilmemiz açısından esnektir.

Dolayısıyla, mevcut sayfa yapınız şöyle görünüyorsa:

 <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>

Burada komut dosyası etiketini tam anlamıyla değiştirebilir ve daha önce yaptığınız gibi HTML ve JS'yi birlikte kullanmaya devam edebilir, yalnızca birkaç küçük kod parçasını yeniden düzenleyebilirsiniz. JavaScript'te HTML'yi yeniden yazmanıza, web paketi kullanmanıza ve dev bir sistem kurmanıza gerek yok:

 <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>

Etiketleri değiştirebilir ve işaretlemeyi olduğu gibi bırakabilirsiniz. En iyi yanı, kodun daha karmaşık hale geleceğini düşünebilirsiniz, ancak bu makaleyi okuyup örnekleri görerek Vue'nun son derece basit, okunaklı ve bakımı ve uyarlanması kolay olduğunu görebilirsiniz. Boyut açısından, oldukça benzerler - CDN'den olduğu gibi kullanmak için küçültülmüş, Vue 2.5.3 sürümü 86KB'dir . jQuery 3.2.1 87KB'dir .

Şimdi jQuery'deki bazı yaygın kullanım durumlarını ve bunları nasıl Vue'ya geçireceğimizi ve neden bunu yapmak istediğimizi ele alalım.

Kullanıcı Girdilerini Yakalama

Bir sitede JavaScript'e ihtiyaç duymanın gerçekten yaygın bir kullanım durumu, bir formdan kullanıcı girdisini yakalamaktır, o yüzden buradan başlayalım. Sadelik ve netlik açısından henüz tam formu birleştirmeyeceğiz, ancak sonuna kadar üzerinde çalışacağız.

Kullanıcı yazarken bilgileri yakalamak için, bunu jQuery ve Vue'da yan yana şöyle yaparız:

 <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' } })

Bu örneği kullanıyorum çünkü Vue'nun güçlü yanlarından birkaçını ortaya koyuyor. Vue reaktiftir, bu da özellikle değişikliklere yanıt vermesini sağlar. Yazdıklarımızı güncellerken nasıl anında değiştiğini görebilirsiniz - gecikme yok.

Ayrıca jQuery sürümünde DOM'nin kontrolde olduğunu görebilirsiniz - DOM'den bir şeyler alıyoruz, dinliyoruz ve ona yanıt veriyoruz. Bu, bizi DOM'un şu anda kurulma şekline bağlar ve onu nasıl geçeceğimizi düşünmeye zorlar. HTML öğelerinin yapısı değişecek olsaydı, kodumuzu bu değişikliklere uyacak şekilde uyarlamamız gerekirdi.

Vue sürümünde, durumu saklıyoruz - güncellemek ve değiştirmek istediğimiz bir özelliği takip ediyoruz ve değiştirmek istediğimiz öğeyi direktif adı verilen bir şeyle izliyoruz. Bu, doğrudan hedeflememiz gereken HTML öğesine eklendiği anlamına gelir. DOM'nin yapısı değişebilir, HTML hareket edebilir ve bunların hiçbiri performansımızı veya bu olayları yakalamamızı etkilemez. Bizim durumumuzda, JavaScript'te depoladığımız verilere bağlanmak için girişteki bu v-model özelliğini kullanıyoruz.

Ancak! Bu, enter tuşuna basarken bir şeyi saklamak kadar yaygın bir kullanım durumu değildir, o yüzden şimdi buna bakalım.

Kullanıcı Girişini Tek Bir Etkinlikte Depolama

Vue'nin çalışma şekliyle ilgili ilginç olan şey, verileri depolarken ve alırken belirli DOM olaylarını düşünmek zorunda kalmamasıdır. Özünde, yakalamak istediğimiz şey hakkında zaten bir fikrimiz var; onu değiştirmek için bir olay seçerek ona şekil veriyoruz. Buna karşılık, jQuery, DOM'nin yaptıklarıyla sıkı bir şekilde bağlantılıdır ve depoladığı değişkenleri oluşturmak için bu DOM olaylarına dayanır; bunlar, alma için tek bir tutarlı grup (veri içinde) yerine herhangi bir yere yerleştirilebilir. Bunu, bilgilerin bir enter tuşuna basıldığında toplandığı son örneğin güncellenmiş sürümünde görebiliriz:

 <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: '' } });

Bu sürümde, jQuery biraz basitleştirilmiştir, çünkü her tuş vuruşunda bir şeyler yakalamamız gerekmez, ancak yine de DOM'dan bir şeyler yakalarız ve bu değişikliklere adım adım yanıt veririz. jQuery'deki kodumuz her zaman şöyle olacak:

"Git bu öğeyi al, ne yaptığını gör, bu değişikliklere tutun, bu değişikliklerle bir şeyler yap."

Karşılaştırma için: Vue'da neyin değiştiğinin kontrolü bizdedir ve DOM bu değişikliklere komutlarımıza göre yanıt verir. Doğrudan güncellemek istediğimiz şeye ekliyoruz. Bizim durumumuzda, değiştirici adı verilen küçük bir soyutlamamız var: v-model.lazy . Vue artık bunu bir değişiklik olayı gerçekleşene kadar saklamaya başlamayacağını biliyor. Oldukça temiz!

Sınıfları Değiştirme

Bir sonraki ele alacağımız şey, CSS sınıflarını değiştirmektir, çünkü her şeye kadir, sürekli izleyen Googly'nin bana bildirdiği gibi, bu en yaygın jQuery işlevidir.

 <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 } })

Yine burada gördüğümüz şey, jQuery sürümünde durumu DOM'da sakladığımızdır. Öğenin sınıfı vardır ve jQuery, DOM'a ping atarak kontrol ettiği sınıfın varlığına dayalı olarak bir karar verir. Vue sürümünde bir koşulu saklarız ve onu bu duruma göre biçimlendiririz. Bu bilgiyi DOM'dan istemiyoruz, kendimiz tutuyoruz.

Verilerde active olarak saklarız, düğme durumu değiştirir ve .red bu koşula göre değiştirilir. Erişilebilirlik durumları bile, aria-pressed , çok daha hızlı belirtilir, çünkü Vue'daki komut dosyasında herhangi bir şey ayarlamamız gerekmediğinden, ' active ' durumuna bağlı olarak şablonda doğrudan satır içi durumlar arasında geçiş yapabiliriz. .'

Ayrıca son birkaç örnekte de not edeceksiniz, Vue.js ile çalışmaya başlamanın jQuery'den çok daha fazla kod olacağını düşünmüş olabilirsiniz, ancak aslında oldukça karşılaştırılabilirler.

gizleme ve gösterme

Bir başka yaygın jQuery kullanım durumu, bir şeyi gizlemek ve göstermektir. jQuery, bu görevi gerçekten basit hale getirmek için her zaman gerçekten iyi bir iş çıkarmıştır, bu yüzden Vue ile yan yana nasıl göründüğüne bir göz atalım.

 <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 } })

Hem jQuery hem de Vue, bu görevi basit tutmak için iyi bir iş çıkarıyor, ancak geçiş gibi bir şey için Vue ile gerçekten çalışmamın birkaç nedeni var. Vue, Vue devtools adlı bir araca sahiptir. Bu, Chrome geliştirme araçlarından farklı değildir, ancak onu kullandığımızda Vue.js'de neler olduğu hakkında bazı özel bilgiler alırız.

Hem jQuery hem de Vue sürümünde öğenin gizlendiğini ve göründüğünü görebiliriz. Ama ya bir şeyler ters giderse? Ya kodumuzla ilgili bir şey beklediğimiz gibi çalışmıyorsa? jQuery ile hata ayıklamaya başlamak için, muhtemelen bazı console.log 'lar ekleriz veya işlerin nerede hata yaptığını bulmaya çalışmak için bazı kesme noktaları ayarlardık.

Şimdi, console.log 'larda yanlış bir şey yok, ancak Vue geliştirme araçlarının yardımıyla, aslında Vue'nun ne olduğunu düşündüğüne dair uygulamalı bir Vue (direnemedi) alabiliriz. Aşağıdaki bu gif'te, düğmeyi değiştirdiğimizde görebilirsiniz, Vue geliştirici araçları buna göre doğru/yanlış durumunu günceller. DOM beklediğimiz gibi çalışmıyor olsaydı, verileri gerçek zamanlı olarak Vue'da görebilirdik. Bu, hata ayıklamayı çok daha kolay hale getirir; aslında oldukça harika.

Bununla ilgili sevdiğim diğer şey, v-if if'in diğer koşullara genişletilmesinin kolay olmasıdır. Değiştirdiğim şey sık sık gösterilip gizlenecekse v-if yerine v-show adlı bir şey kullanmaya karar verebilirim: v-if öğenin bağlantısını tamamen kesecek, v-show ise yalnızca görünürlüğünü değiştirecek. Bu ayrım gerçekten önemlidir, çünkü DOM düğümünü tamamen sökmek/monte etmek yerine görünürlüğü bir stilde değiştirmek çok daha performanslıdır. Birçok koşula, hatta kullanıcı girdisinin varlığına veya diğer koşullara göre bir şeyi gösterebilir veya gizleyebilirim. Bu genellikle jQuery'nin biraz dağınık olabileceği, DOM'yi birden çok konumda pingleyebileceği ve bunları koordine edebileceği yerdir. Aşağıda, kullanıcı girişinin varlığına dayalı olarak bir şeyi gösteren bir koordinasyon örneği verilmiştir:

 <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(); } }) });

Bu örnekte, Vue'nin durumu tutmasının değerini görebilirsiniz - değişikliklere çok doğal bir şekilde ve tamamen daha az kodla tepki veriyoruz. Stile alıştığınızda, mantığı satır satır izlemeniz gerekmediği için anlamanız daha hızlı olur. Pek çok insan bu farkı "zorunluya karşı bildirimsel" olarak adlandırır.

Form Gönderme

jQuery için kurallı kullanım örneği, tarihsel olarak bir AJAX çağrısı ile bir form göndermek olmuştur, bu yüzden ona da bir göz atmalıyız. Vue aslında AJAX gibi yerleşik bir şeye sahip değildir; Vue uygulamasında bu göreve yardımcı olması için Axios (HTTP istekleri yapmak için bir JavaScript kitaplığı) gibi bir şey kullanmak normaldir.

Bu örnek diğerlerinden biraz daha karmaşıktır. Burada birkaç şey yapacağız:

1. Formumuzu yazmaya başlamadan önce buton gri görünecek, ardından “aktif” bir sınıf alacak ve maviye dönecek;
2. Formu gönderdiğimizde, sayfanın yüklenmesini önleyeceğiz;
3. Form gönderildiğinde, yanıt verilerini sayfada göstereceğiz.

 <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)); }); }); });

Burada, daha önce nasıl yaptığımıza benzer şekilde, 2-10 arasındaki satırların düğme sınıfının işlenmesiyle ilgili olduğunu göreceğiz. Forma event adında bir parametre iletiyoruz ve ardından sayfayı yeniden yüklememek için event.preventDefault() diyoruz. Ardından, form girdilerinden tüm form verilerini toplarız, formu işler ve ardından yanıtı AJAX isteğinden .done() çağrısına koyarız.

 <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) }) } } })

Vue sürümünde, formda hangi alanları doldurmamız gerektiğine karar veriyoruz ve ardından bunları daha önce kullandığımız v-modeli ile ekliyoruz. Sınıfı değiştirmek için adın varlığını kontrol ederiz. event.preventDefault() yazmak yerine, tek yapmamız gereken form elementimize @submit.prevent yazmak ve bu bizim için halledildi. Gönderinin kendisini göndermek için Axios kullanıyoruz ve yanıtı yanıt olarak Vue örneğinde saklayacağız.

Doğrulama, hata işleme ve yazma testleri de dahil olmak üzere üretime hazır bir forma sahip olmak için hala yapmak istediğimiz birçok şey var, ancak bu küçük örnekte, birçok şeyi işlerken Vue'nun ne kadar temiz ve okunaklı olabileceğini görebilirsiniz. kullanıcı girişi dahil olmak üzere güncellenen ve değişen şeyler.

Çözüm

Size uygunsa, jQuery kullanmak kesinlikle sorun değil! Bu makale, Vue'nun çok fazla ek yüke ihtiyaç duymayan küçük siteler için oldukça güzel bir soyutlama olduğunu göstermeye hizmet ediyor. Vue, boyut olarak karşılaştırılabilir, akıl yürütmesi kolaydır ve HTML'nizi JavaScript'te yeniden yazmadan ve bant genişliğiniz yoksa bir yapı sistemi benimsemeden küçük işlevsellik parçalarını Vue'ye geçirmek oldukça önemsizdir. Bütün bunlar, düşünmeyi oldukça çekici kılıyor.

Vue'nin esnekliği nedeniyle, zaman içinde daha karmaşık bir yapı benimsemek istiyorsanız, bu kodu bir yapı adımına ve bileşen yapılarına geçirmek de kolaydır. Bunu denemek aslında oldukça eğlenceli, bu yüzden yapmaya hazır olduğunuzda vue-cli'ye göz atın. Bu aracın yaptığı şey, size tüm üretim düzeyindeki bir Vue ve web paketi derlemesini yalnızca birkaç terminal komutuyla iskele kurma yeteneği vermektir. Bu, tek, yeniden kullanılabilir bileşenler oluşturan tek bir dosyada HTML, CSS ve Komut Dosyasını birlikte kullanabileceğiniz tek dosyalı bileşenlerle çalışmanıza olanak tanır. Özel bir şey yapmak istemediğiniz sürece web paketi derlemesini yapılandırmanız gerekmez, böylece bir şeyleri ayarlamak için çok zaman kazanırsınız. Her şeyi üretim dağıtımına hazır hale getirmek için yerleşik bir komutları bile var.

Vue'yu projenize dahil etmenin herhangi bir yolunu seçme esnekliğiyle ilgili güzel şey, çalışma tarzınızı bir kerede değiştirmek zorunda olmadığınız ve zaman içinde yavaş yavaş değişiklikler bile yapabileceğiniz anlamına gelir. Bu yüzden insanlar Vue'yu ilerici çerçeve olarak adlandırıyor.