我用JavaScript 程式設計很多年了，寫了大量的JS程式碼，即便是我這樣的經歷，但我仍然還在努力地去寫出更優美的JS程式碼，在這篇文章中，我將探索為什麼寫出漂亮的JS程式碼是如此困難，如何使用CoffeScript（一種簡約且能編譯成JS的語言）改善它。
什麼是優美的程式碼？
我想從個人觀點來宣告如何定義優美程式碼
- 1、優美的程式碼是使用更少的程式碼解決問題；
- 2、優美的程式碼是可讀而且易理解的
- 3、優美的程式碼是一段既沒有什麼可以需要新增也沒有什麼多餘的可以去掉程式碼（就像偉大的的設計）
- 4、最短長度是優美程式碼的另外一個方面，並不是以此為作為目標或者權衡
所以對我來說，優美的程式碼是最小程式碼化、可使用、易讀的綜合效應。
一段優美JavaScript程式碼的例子：
以斐波納契函式舉例來說，這個函式對絕大多數程式設計師來是應該知道的。這裡有一個談不上漂亮的實現，因為程式碼缺乏結構化，而且使用了很多沒必要的冗長程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 |
function f(n) { var s= 0; if(n == 0) return(s); if(n == 1) { s += 1; return(s); } else { return(f(n - 1) + f(n - 2)); } } |
這裡是另外一個版本的實現，我發現了更多優雅和優美之處，尤其是如果你熟悉單行的if else的話(三目條件運算）:
|
1 2 |
function fib(n) { return n<2 ? n : fib(n-1) + fib(n-2)} |
同樣優美的一段碼，程式碼的行數並不見得那麼重要
|
1 2 3 4 |
function fib(n) { if (n < 2) return n return fib(n-2) + fib(n-1)} |
JavaScript的毛病：
我認為JavaScript的一個主要問題就是它那令人困惑的混雜多種不同語言的模式： JavaScript是函式式語言 JavaScript是物件導向的語言，但它是基於原型的 JavaScript是動態的非常接近於Lisp而不是C/Java,但是有C/Java的語法 JavaScript的名字就很讓人疑惑，但是和Java沒有半點關係 這種語言有特性危機，程式設計師嘗試強加正規化到JavaScript中，但這並不是什麼好主意，因為JavaScript不是Java，不是Sheme,也不是Python，就像其它語言一樣有自己的強項和弱項。
同時，JavaScript草率的設計和糟糕的決策表現在this，像this的動態域、用於繼承的語法，由於考慮到向後相容的原因修復這些問題非常困難。這裡是一個很好的引用來自於JavaScript的創造者，亮點在JavaScript誕生的所處的環境：“JavaScript聽起來像Java，僅此而已，像是Java的啞巴小兄弟，但是我不得不在十天完成或者比JavaScript更糟糕的事情會發生”— Brendan Eich
CoffeeScript：全新的方式寫出更好的JavaScript
CoffeeScript是一種精緻的語言，能編譯成JavaScript。它的目的是用簡單的方法揭示JavaScript優秀的部分。
CoffeeScript不會終結你的JavaScript程式碼
我喜歡CoffeeScript的原因之一是它能編譯成JavaScript，這就意味著我可以重用我當前所有的JavaScript程式碼，我不需要重寫任何程式碼到CoffeeScript，這是一筆偉大的交易，尤其是因為我們的Wedoist JavaScript程式碼庫非常龐大，要是重寫成另一種語言夠你花上數月的時間。 CoffeeScript同樣是一種迷你型的JavaScript，就像是被改善JavaScript版本，糟糕的部分被替換掉了。同時它的語法從C/Java語言換成了Ruby或者是Python（棒極了，因為JavaScript 更接近於Ruby、Python而不是C或者Java）。
CoffeeScript是怎麼樣編譯成JavaScript
為了闡述編譯，我們舉一例子，看他是怎麼工作的。 CoffeeScript程式碼：
|
1 2 |
square = (x) -> x * x cube = (x) -> square(x) * x |
編譯成JavaScript程式碼：
|
1 2 3 4 5 6 7 |
var cube, square; square = function(x) { return x * x; }; cube = function(x) { return square(x) * x; }; |
正如你從上例中看到的CoffeeScript和JavaScirpt的對映非常的直接。在另外一個網站你可以發現很多例子CoffeeScript如何編譯成JavaScript。
CoffeeScript：重寫示例
為了給你一種CoffeeScript的感覺，這裡是個小JavaScript例子，我將重寫成CoffeeScript。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
get: function(offset, callback, limit) { var self = this; var data = { project_id: Projects.getCurrent().id, limit: limit || this.default_limit } if(offset) data.offset = Calendar.jsonFormat(offset, true); this.ajax.getArchived(data, function(data) { if(!offset) self.setCache(data); callback(data); }); } |
CoffeeScript看起來像這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
get: (offset, callback, limit) => data = project_id: Projects.getCurrent().id limit: limit or @default_limit if offset data.offset = Calendar.jsonFormat(offset, true) @ajax.getArchived(data, (data) => if !offset @setCache(data) callback(data) ) |
如你所見，兩者看起來非常相似，但是我的觀點是CoffeeScript看起來更輕快，因為所有非必須的語法被移除僅保留了必須的元素。
現在讓我們來看看CoffeeScript的亮點：
亮點一：繼承更簡單
JavaScript有很強的繼承系統，但是語法很恐怖，CoffeeScript修復了用一種很優雅的繼承系統模擬其它很多語言中類和繼承機制：
|
1 2 3 4 5 6 7 8 9 10 |
class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved " + meters + "m." class Snake extends Animal move: -> alert "Slithering..." super 5 |
亮點二：陣列的迭代
我喜歡Python中的列表推導在CoffeeScript也有
|
1 2 |
list = [1, 2, 3, 4, 5] cubes = (math.cube num for num in list) |
陣列切片：
|
1 |
copy = list[0...list.length] |
陣列迭代：
|
1 |
countdown = (num for num in [10..1]) |
亮點三：字串迭代
對於字元創的插入，CoffeeScript借用了Ruby的語法，它能簡單的構造字串。
|
1 2 |
author = "Wittgenstein" quote = "A picture is a fact. -- #{ author }" |
允許多行的字串：
|
1 2 3 |
mobyDick = "Call me Ishmael. Some years ago - never mind how long precisely -- having little or no money in my purse, and nothing particular..." |
亮點四：繫結this
this 關鍵字在JavaScript中部分的被破壞，因為他的動態域，CoffeeScript修復了這些，如果你使用=>關鍵字（它自動為你繫結this或者@）
|
1 2 3 4 5 6 7 |
Account = (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').bind('click', (event) => @customer.purchase @cart ) |
探索CoffeeScript
我僅僅抓住CoffeeScript的表面所提供的一些東西，更多細節請從他們的站點提取以及帶有註釋的原始碼。
我仍然在探索CoffeeScript，目前為止這是我最喜歡的語言，榮譽屬於Jeremy Ashkenas。快樂的程式設計，我也希望你可以試一把CoffeeScript。
|
1 |
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
