Bununla yüzleşelim, JavaScript geliştiriciler arasında her zaman en iyi üne sahip değildi ve 2009 yılında CoffeeScript'in kurulmasından bu yana, bu küçük dil, JavaScript geliştiricilerinin dünyasını fırtınaya sürükledi; esas olarak, bazılarının söyleyebildikleri şeylerin üstesinden geldiği için, JavaScript'in en kötü yönü: kodunun sözdizimi.
Bu yeni bir dil olmasına rağmen, JavaScript'i yeniden formüle ettiği için gerçekten hızlı bir şekilde seçeceksiniz. aslında daha güzel, daha basit JavaScript.
CoffeeScript'i yazarken, dağıtılmadan önce en iyi uygulamaları izleyen ve JSLint testini geçen JavaScript'e derlenecek kod yazıyorsunuz, bu yüzden endişelenmeniz gereken tek şey budur. Çıkış, tarayıcının okumada sorun yaşamayacağı geçerli bir JavaScript olacaktır. CoffeeScript, SASS'ın CSS'ye ne olduğunu JavaScript'e yönlendirir: daha basit ve daha üretken kod yazmanın bir yolu.
CoffeeScript bir node.js yardımcı programıdır, bu yüzden yüklemek için node.js'nin yanı sıra düğüm paketi yöneticisine de sahip olmanız gerekir. Bu iki paketi kurduğunuzu varsayalım, yapmanız gereken tek şey terminalinize gitmek ve kodu kullanarak CoffeeScript'i paket yöneticisi ile kurmaktır:
npm install -g coffee-scriptSadece bununla birlikte makinenizde CoffeeScript yüklü. Bir .coffee dosyasını bir JavaScript dosyasına derlemek için şunu yazmanız gerekir:
coffee --compile script.coffeeBu script.coffee dosyasını aynı dizinde script.js içine derleyecek, ancak sadece komutu çalıştırdığınızda yapacağınız, eğer kahve dosyasında yaptığınız her değişiklikte derlemek istiyorsanız –watch'u daha önce eklemeniz gerekir. derleme:
coffee --watch --compile script.coffeeBununla birlikte, .coffee dosyanızda her değişiklik yaptığınızda JavaScript'iniz derlenecektir.
Bir JavaScript değişkeni yazarken, var anahtar sözcüğünü hazırlamalıyız, anahtar kelimeye gidilen CoffeeScript ile değişkeni yazıp bir şeye atayabilirsiniz. Dikkat edilmesi gereken bir başka nokta da, CoffeeScript'in yarı-kolonları önlemek için çok fazla girinti yöntemi kullanması ve dilin değişken ifadenin tamamlandığını anlamanız ve yeni bir satıra taşınmanız gerektiğidir:
age = 21country = "Portugal"JavaScript'te şöyle bir şey yazmanız gerekir:
var age = 21;var country = "Portugal";Bu küçük bir örnektir, ancak kodunuzu basitleştirmeye geldiğinde CoffeeScript'in ne kadar güçlü olduğunu görmeye başlayabilirsiniz.
JavaScript operatörlerini ezberlemek için harcadığınız zamanı hatırlıyor musunuz? Sadece kullanmak yerine neden === kullanmanız gerektiğini merak ettiğinizi hatırlıyor musunuz? Well CoffeeScript de bununla ilgilenir. Operatörler için gerçekten güzel takma adlar sunuyor:
CoffeeScript'in attığı bir başka şey de kaşlı ayraçlar. İfadelerin bir deyimin içinde olduğunuzu bildirmek için girinti yöntemini kullanır; ifadeler JavaScript gibi çalışırsa ancak küme parantezine veya parantezinize gerek yoktur; Sadece deyim doğru olduğunda çalıştırmak istediğiniz kodu girin:
if work > 24 and sleep < 8vacations()elsework()JavaScript olarak derler:
if (work > 24 && sleep < 8) {vacations();} else {work();}Umarım CoffeeScript'in faydalarını sadece kodunuzu temizleyebilmenin bu basit gösterileriyle görmeye başlıyorsunuzdur ve daha temiz kod daha sürdürülebilir kod anlamına gelir.
Dizilerle döngü yapmak, yazdığınız her JavaScript uygulamasında yapmanız gereken şeylerden biri ve JavaScript'te bunlarla döngü yapmak için sözdizimi en basit veya en temiz olanı değil, bence burası CoffeeScript'in gerçekten parladığını gösteriyor. Bir dizi boyunca döngü yapmak için, bir for..in döngüsü kullanırız;
tasks = ['Design','Code','Groceries']for task in tasksalert taskTüm bu kod parçası, dizideki her şeyi okuyup sonra tek tek uyarıyor, sadece işleri daha da basitleştirmek için bile… bir satırda yazabiliyorsunuz.
tasks = ['Design','Code','Groceries']alert task for task in tasksBu, vanilya javastasından çok daha okunaklı ve sürdürülebilir bir yapıdır. Bu, söz konusu iki satır için CoffeeScript tarafından üretilen kodun şöyle olacağıdır:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Döngüler, JavaScript uygulamanızı oluştururken de çok kullanışlıdır ve CoffeeScript de bunu okumayı ve yazmayı daha kolay hale getirmeyi başaramaz. Örneğin:
while sleep < 8sleep()İsterseniz hepsini tek bir satırda yazabilirsiniz:
while sleep < 8 then sleep()Veya:
sleep() until sleep > 8Saf JavaScript’te şu şekilde tercüme edilir:
//thenwhile (sleep < 8) {sleep();}Veya:
//untilwhile (!(sleep > 8)) {sleep();}Fonksiyonlar, herhangi bir programlama dilinin bir diğer hayati kısmıdır ve JavaScript'deki işlevler diğer bazı bölümler kadar dağınık olmasa da, CoffeeScript bunu maksimuma da basitleştirir, birinin adını alan basit bir işlevdir ve ardından bunun gibi yazılabilir :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Tek yapmanız gereken işlevi isimlendirmektir, bu durumda işlevler sayHi olarak adlandırılır ve sonra eşittir işaretinden sonra parametreleri belirtmeniz gerekir. Burada adı tek parametredir, fonksiyonumuzun temeli tanımlandıktan sonra -> bir sonraki satırda takip etmemiz gerekir. Bu durumda tek istediğim “Merhaba” ve sonra kişinin adı ve son olarak isimle fonksiyonu çağırmak için basit bir uyarı kullanıyorum. Bunu bir satırda yazabiliriz - girme ve girinti işleminden sonra işlevin ne yapacağını yazarak ->:
sayHi = (name) -> return "Hello " + nameBu küçük kod snippet'i aşağıdaki JavaScript’e derlenecektir:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Tabii ki bu gerçekten çok basit bir işlevdi, ancak görebildiğiniz gibi, 3 satır kod kaydettik ve elbette Javascript'te, biz sadece bu gibi bir işlevi bildirdiğimiz gibi değişken adlandırabiliriz:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Burada verdiğim örnekler, CoffeeScript'in derlediği ve çoğu durumda bir şeyi yazmanın daha kolay yollarının olmasına rağmen, derlenen tüm JavaScript'in geçerli ve anlamsal olduğu.
Bu sadece CoffeeScript'in size ne verebileceğinin başlangıcıdır, işler karmaşıklaşmaya başladığında bu küçük dil size JavaScript ile karşılaştırıldığında çok daha fazla kaldıraç, yazmanız gereken daha az kod, daha fazla okunabilir kod ve daha fazla bakım yapılabilir. Böylece bir yıl sonra bir web sitesine geri dönebilir ve o JavaScript’te neler olduğunu öğrenebilirsiniz.
Basit bir rehber listesi uygulaması oluşturmak için CoffeeScript'i jQuery ve LocalStorage ile nasıl birleştireceğinizi göstereceğim bu dizinin ikinci kısmı için bizi izlemeye devam edin.
JavaScript'i basitleştirmek için CoffeeScript kullandınız mı? CoffeeScript’in hangi kısımlarını Javascript’e tercih ediyorsunuz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, kahve görüntü Shutterstock üzerinden.