İçinde ilk kısım Bu makalenin CoffeeScript hakkında temel yeteneklerini gördünüz; ama dürüst olalım, çoğu zaman jQuery kitaplığını kullanmamıza yardımcı olması için jQuery kitaplığını kullanmamız ve ilk bölümde size gösterdiğim şey sadece vanilyalı JavaScript'tir.
Bu bölümde, bir kişinin numarasını ve adını kaydedebileceğimiz ve aynı zamanda bir arkadaş olup olmadığını kontrol edebileceğimiz basit bir iletişim yöneticisi oluşturmak için CoffeeScript, LocalStorage ve jQuery'ye katılacağız ve LocalStorage'ın yardımıyla bu kişi yöneticiniz sayfanızı yenileyin.
Bu konuda neler oluşturacağımızın demolarını görebilirsiniz. demo oluşturdum.
Demoda gördüğünüz gibi, bizim HTML formumuz ve basit bir boş olacak
Bu formun bir yöntemi ve eylemi olsa bile, daha sonra, sayfayı yeniden yükleyerek durdurulduğunda atlama işlemini durdurmak için JavaScript ile varsayılan eylemi engelleriz. Bunun yerine, sıralanmamış listeyi formun girdilerinde bulunanlarla doldururuz.
Şimdi bu makalenin en iyi parçasını ele alacağız: CoffeeScript ve jQuery hakkında konuşarak, JavaScript geliştirmemizi daha basit ve daha üretken hale getirmek için iki araç hazırladık.
Bu uygulamanın kodlamadan önce mermi noktalarında ne yapmak istediğini düşünelim:
Şimdi bütün bunları aldık, baştan başlayabiliriz. Kontrol edilen sınıfı eklemek için, bir tıklamayı kontrol etmeli ve sonra sınıfı her bir sınıfta değiştirmeliyiz, bölüm 1'deki CoffeeScript'te fonksiyonların nasıl oluşturulduğunu gördük, bu yüzden:
$('#friend').click -> $(this).toggleClass 'checked'İhtiyacımız olan şey, gönder düğmesine tıklamak ve yolda daha fazla ihtiyaç duyacağımız bazı değişkenleri saklamaktır:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()Bu adımda işlevimizi ve daha sonra ihtiyaç duyduğumuz değişkenleri tanımladık, ul değişkeni tüm isimleri ve sayıları içerecek sırasız listeyi tutuyor ve sonraki ikisi de girdilere yazdığımız her şeyi saklayacaktır.
Sahip olduğumuz tüm değerleri aldığımız ve sahip olduğumuz her sayı için bir liste öğesi eklediğimiz bölüm budur. Kişinin bir arkadaş olması durumunda bazı şeyleri biraz farklı şekilde şekillendirmek istediğimizi hatırlayın, bu yüzden onay kutusunun sınıfını kontrol edip liste ögelerine buna göre farklı sınıflar ekleyeceğiz. Bunun için bölüm 1'de açıklandığı gibi basit bir ifade kullanırız:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Uygulamamızın temeli hazır, ancak sayfayı yeniden yüklerseniz, tüm sayıların gittiğini görürsünüz. Bu nedenle, sayıların içeriğini LocalStorage'a eklememiz gerekir ve biz buna kişi adı verilir:
localStorage.setItem 'contacts', $(ul).html()Yaptığımız şey, önce ne kaydetmek istediğimizi isimlendirmek, ve sonra virgülden sonra, kaydedilecek değeri ilan ediyoruz. Bu durumda, sırasız listenin içeriğini kaydedeceğiz.
Bu satırda, LocalStorage'daki tüm numaralara ve isimlere sahibiz, böylece formu sıfırlayarak ve sayfanın yeniden yüklenmediğinden emin olmak için false döndürerek son rötuşları işleve ekleyelim:
$("form")[0].reset()return false İşlev şimdi tamamlandı ve şimdi yapmamız gereken tek şey, LocalStorage'da bir kişinin rehber adıyla bir şey olup olmadığını kontrol etmektir ve eğer yaparsak, sadece bunu sayfaya yerleştirmemiz gerekir:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Tek yaptığımız, kontrol etmek ve o maddenin içeriğini sayfaya yerleştirmektir. Bu son dokunuşla küçük iletişim yöneticimiz tamamlandı ve kullanılan tam CoffeeScript kodu:
$('#friend').click -> $(this).toggleClass 'checked'$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'localStorage.setItem 'contacts', $(ul).html()$("form")[0].reset();return falseif localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Ve eğer bu kodu derleyicide çalıştırırsak, şu JavaScript ile sonuçlanırız:
$('#friend').click(function() {return $(this).toggleClass('checked');});$('#submit').click(function() {var name, number, ul;ul = $('#numbers');number = $('#number').val();name = $('#name').val();if ($('#friend').hasClass('checked')) {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} Başka {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()); $ ("form") [0] .reset (); false döndürün;}); if (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Her ikisini de karşılaştırdığımızda, Javascript'in 662 kelime ve 21 satıra sahip olmasına rağmen CoffeeScript'in 587 kelime ve 14 satıra sahip olduğunu görebiliriz ve okunabilirliği karşılaştırırsak, CoffeeScript'in JavaScript eşdeğerinden çok daha okunaklı olduğunu görebiliriz. Eğer bu basit uygulamada CoffeeScript size 7 satırlık kod kaydedebiliyorsa, ne kadar dolu bir uygulamada ne kadar tasarruf edeceğini hayal edin!
Umarım bu makale size CoffeeScript hakkında daha iyi bir fikir vermiştir ve günlük JavaScript kodlamanızı nasıl geliştirebilir. Bu makalede yazılan kod, en temiz ya da en kolay JavaScript olması gerektiği anlamına gelmez, bunun yerine CoffeeScript'i kullanmanın amaçlanmış olması amaçlanmıştır. Umarım jQuery ile ne kadar güçlü olduğunu görebiliyorsunuz ve bu büyük küçük dili günlük kodlamada kullanmayı düşünebilirsiniz, çünkü bu sizin yazdığınız saatleri kesinlikle kaydedecektir.
CoffeeScript kullanıyor musunuz? Bunu günlük olarak ne kadar yararlı buluyorsunuz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, kahve görüntü Shutterstock üzerinden.