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

　　什么是優(yōu)美的代碼,？

　　我想從個人觀點(diǎn)來聲明如何定義優(yōu)美代碼

　　1、優(yōu)美的代碼是使用更少的代碼解決問題,；

　　2,、優(yōu)美的代碼是可讀而且易理解的；

　　3,、優(yōu)美的代碼是一段既沒有什么可以需要添加,，也沒有什么多余的可以去掉代碼（就像偉大的的設(shè)計(jì)）；

　　4,、最短長度是優(yōu)美代碼的另外一個方面,，并不是以此為作為目標(biāo)或者權(quán)衡。

　　所以對我來說,，優(yōu)美的代碼是最小代碼化,、可使用、易讀的綜合效應(yīng),。

　　一段優(yōu)美 JavaScript 代碼的例子：

　　以斐波納契函數(shù)舉例來說,，這個函數(shù)對絕大多數(shù)程序員來是應(yīng)該知道的。這里有一個談不上漂亮的實(shí)現(xiàn),，因?yàn)榇a缺乏結(jié)構(gòu)化,，而且使用了很多沒必要的冗長代碼：

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));
   }
}

　　這里是另外一個版本的實(shí)現(xiàn)，我發(fā)現(xiàn)了更多優(yōu)雅和優(yōu)美之處,，尤其是如果你熟悉單行的if else的話(三目條件運(yùn)算）:

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

　　同樣優(yōu)美的一段碼,，代碼的行數(shù)并不見得那么重要：

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

　　JavaScript 的毛病

　　我認(rèn)為 JavaScript 的一個主要問題就是它那令人困惑的混雜多種不同語言的模式：

• JavaScript 是函數(shù)式語言
• JavaScript 是面向?qū)ο蟮恼Z言，但它是基于原型的
• JavaScript 是動態(tài)的非常接近于 Lisp 而不是 C/Java , 但是有 C/Java 的語法
• JavaScript 的名字就很讓人疑惑,，但是和 Java 沒有半點(diǎn)關(guān)系

　　這種語言有特性危機(jī),，程序員嘗試強(qiáng)加范式到 JavaScript 中，但這并不是什么好主意,，因?yàn)?JavaScript 不是 Java,，不是 Sheme，也不是 Python,，就像其它語言一樣有自己的強(qiáng)項(xiàng)和弱項(xiàng),。

　　同時，JavaScript 草率的設(shè)計(jì)和糟糕的決策表現(xiàn)在 this,，像 this 的動態(tài)域,、用于繼承的語法，由于考慮到向后兼容的原因，修復(fù)這些問題非常困難,。這里是一個很好的引用來自于 JavaScript 的創(chuàng)造者,，亮點(diǎn)在 JavaScript 誕生的所處的環(huán)境：“JavaScript 聽起來像Java，僅此而已,，像是 Java 的啞巴小兄弟,，但是我不得不在十天完成。（否則）或許比 JavaScript 更糟糕的事情會發(fā)生”— Brendan Eich

　　CoffeeScript：全新的方式寫出更好的 JavaScript

　　CoffeeScript 是一種精致的語言,，能編譯成 JavaScript,。它的目的是用簡單的方法揭示 JavaScript 優(yōu)秀的部分。

　　CoffeeScript 不會終結(jié)你的 JavaScript 代碼

　　我喜歡 CoffeeScript 的原因之一是它能編譯成 JavaScript,，這就意味著我可以重用我當(dāng)前所有的 JavaScript 代碼,，我不需要重寫任何代碼到 CoffeeScript，這是一筆偉大的交易,，尤其是因?yàn)槲覀兊?Wedoist JavaScript 代碼庫非常龐大,，要是重寫成另一種語言夠你花上數(shù)月的時間。CoffeeScript 同樣是一種迷你型的 JavaScript,，就像是被改善 JavaScript 版本，糟糕的部分被替換掉了,。同時它的語法從 C/Java 語言換成了 Ruby 或者是 Python（棒極了,，因?yàn)?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 的映射非常的直接,。在另外一個網(wǎng)站你可以發(fā)現(xiàn)很多例子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)
    )

　　如你所見,，兩者看起來非常相似,，但是我的觀點(diǎn)是 CoffeeScript 看起來更輕快，因?yàn)樗蟹潜仨毜恼Z法被移除僅保留了必須的元素,。

　　現(xiàn)在讓我們來看看 CoffeeScript 的亮點(diǎn)：

　　亮點(diǎn)一：繼承更簡單

　　JavaScript 有很強(qiáng)的繼承系統(tǒng),，但是語法很恐怖，CoffeeScript 修復(fù)了用一種很優(yōu)雅的繼承系統(tǒng)模擬其它很多語言中類和繼承機(jī)制：

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

　　亮點(diǎn)二：數(shù)組的迭代

我喜歡 Python 中的列表推導(dǎo)在 CoffeeScript 也有

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

數(shù)組切片：

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

數(shù)組迭代：

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

　　亮點(diǎn)三：字符串迭代

對于字符創(chuàng)的插入,，CoffeeScript 借用了 Ruby 的語法,，它能簡單的構(gòu)造字符串。

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

　　亮點(diǎn)四：綁定this

　　this 關(guān)鍵字在 JavaScript 中部分的被破壞，因?yàn)樗膭討B(tài)域,，CoffeeScript修復(fù)了這些,，如果你使用=>關(guān)鍵字（它自動為你綁定this或者@）

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

　　探索 CoffeeScript

　　我僅僅抓住 CoffeeScript 的表面所提供的一些東西，更多細(xì)節(jié)請從他們的站點(diǎn)提取以及帶有注釋的源代碼,。

　　我仍然在探索 CoffeeScript,，目前為止這是我最喜歡的語言，榮譽(yù)屬于 Jeremy Ashkenas,?？鞓返木幊蹋乙蚕Ｍ憧梢栽囈话?CoffeeScript ,。

　　編譯：伯樂在線 –劉志軍