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

[[94143]]  

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的亮點：

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

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

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

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