以优美方式编写JavaScript代码

2019-10-11 00:00| 发布者: adminiot| 查看: 561| 评论: 0

　　英文原文：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 。

　　编译：伯乐在线 –刘志军