以優美方式編寫JavaScript代碼

　　英文原文：CoffeeScript: The beautiful way to write JavaScript

　　我用 JavaScript 編程很多年了，寫了大量的 JavaScript 代碼，即便是我這樣的經歷，但我仍然還在努力地去寫出更優美的 JavaScript 代碼，在這篇文章中，我將探索為什么寫出漂亮的 JavaScript 代碼是如此困難，如何使用CoffeScript（一種簡約且能編譯成 JavaScript 的語言）改善它。

　　什么是優美的代碼？

　　我想從個人觀點來聲明如何定義優美代碼

　　1、優美的代碼是使用更少的代碼解決問題；

　　2、優美的代碼是可讀而且易理解的；

　　3、優美的代碼是一段既沒有什么可以需要添加，也沒有什么多余的可以去掉代碼（就像偉大的的設計）；

　　4、最短長度是優美代碼的另外一個方面，并不是以此為作為目標或者權衡。

　　所以對我來說，優美的代碼是最小代碼化、可使用、易讀的綜合效應。

　　一段優美 JavaScript 代碼的例子：

　　以斐波納契函數舉例來說，這個函數對絕大多數程序員來是應該知道的。這里有一個談不上漂亮的實現，因為代碼缺乏結構化，而且使用了很多沒必要的冗長代碼：

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的話(三目條件運算）:

function fib(n) {
    return n<2 ? n : fib(n-1) + fib(n-2);
}

　　同樣優美的一段碼，代碼的行數并不見得那么重要：

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 代碼：

square = (x) -> x * x
cube   = (x) -> square(x) * x

編譯成 JavaScript 代碼：

var cube, square;
square = function(x) {
  return x * x;
};
cube = function(x) {
  return square(x) * x;
};

　　正如你從上例中看到的 CoffeeScript 和 JavaScirpt 的映射非常的直接。在另外一個網站你可以發現很多例子CoffeeScript如何編譯成JavaScript。

　　CoffeeScript：重寫示例

　　為了給你一種 CoffeeScript 的感覺，這里是個小 JavaScript 例子，我將重寫成 CoffeeScript。

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 看起來像這樣：

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 修復了用一種很優雅的繼承系統模擬其它很多語言中類和繼承機制：

class Animal
    constructor: (@name) ->     move: (meters) ->         alert @name + " moved " + meters + "m." class Snake extends Animal
    move: ->         alert "Slithering..."         super 5

　　亮點二：數組的迭代

我喜歡 Python 中的列表推導在 CoffeeScript 也有

list = [1, 2, 3, 4, 5]
cubes = (math.cube num for num in list)

數組切片：

copy = list[0...list.length]

數組迭代：

countdown = (num for num in [10..1])

　　亮點三：字符串迭代

對于字符創的插入，CoffeeScript 借用了 Ruby 的語法，它能簡單的構造字符串。

author = "Wittgenstein" quote  = "A picture is a fact. -- #{ author }"

允許多行的字符串：

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或者@）

Account = (customer, cart) ->     @customer = customer
    @cart = cart
    $('.shopping_cart').bind('click', (event) =>         @customer.purchase @cart
    )

　　探索 CoffeeScript

　　我僅僅抓住 CoffeeScript 的表面所提供的一些東西，更多細節請從他們的站點提取以及帶有注釋的源代碼。

　　我仍然在探索 CoffeeScript，目前為止這是我最喜歡的語言，榮譽屬于 Jeremy Ashkenas。快樂的編程，我也希望你可以試一把 CoffeeScript 。

　　編譯：伯樂在線 –劉志軍