英文原文: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().idlimit: limit or @default_limitif offsetdata.offset = Calendar.jsonFormat(offset, true)@ajax.getArchived(data, (data) =>if !offset@setCache(data)callback(data))

  如你所见,两者看起来非常相似,但是我的观点是 CoffeeScript 看起来更轻快,因为所有非必须的语法被移除仅保留了必须的元素。

  现在让我们来看看 CoffeeScript 的亮点:

  亮点一:继承更简单

  JavaScript 有很强的继承系统,但是语法很恐怖,CoffeeScript 修复了用一种很优雅的继承系统模拟其它很多语言中类和继承机制:

class Animalconstructor: (@name) ->     move: (meters) ->         alert @name + " moved " + meters + "m." class Snake extends Animalmove: ->         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 。

  编译:伯乐在线 –刘志军

以优美方式编写JavaScript代码相关推荐

  1. 如果让莎士比亚、海明威编写JavaScript代码

    本文作者Angus Croll是Twitter工程师.JavaScript迷.文学迷,并且非常喜欢作家海明威.他在梦中"梦见"一些名人编写JavaScript代码,不同的作家呈现出 ...

  2. 如何优雅的编写 JavaScript 代码

    几乎每个大一点公司都有一个"运行时间长,维护的工程师换了一批又一批"的项目,如果参与到这样的项目中来,大部分人只有一个感觉--"climb the shit mounta ...

  3. 新书《编写可测试的JavaScript代码 》出版,感谢支持

    本书介绍 JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码.不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代 ...

  4. JavaScript 代码格式化及编写工具

    JavaScript是世界上最流行的语言,几乎每台装有浏览器的机器上都有JavaScript解释引擎,都支持JavaScript.但是由于JavaScript语法的特殊性,一直没有好的开发和格式化工具 ...

  5. 添加javascript代码:_JavaScript(1)

    一.JavaScript组成 1.ECMAScript:是ECMA制定的脚本语言的语法标准,基础语法的规范,为了让不同的浏览器都可以运行通过标准运行出来的代码. 2.文档对象模型(DOM):JavaS ...

  6. JavaScript 代码教程

    JavaScript 是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器中的一部分,广泛用于客户端的脚本语言,最早是在HTM ...

  7. JavaScript代码在哪里放置?

    In an HTML code, JavaScript can be placed at three places... 在HTML代码中,JavaScript可以放在三个位置... Between ...

  8. php中如何调用javascript,如何在php中调用javascript代码?

    JavaScript是客户端脚本语言,PHP是用于与数据库交互的服务器端脚本语言.那么如何在php中调用javascript代码?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下 ...

  9. php运行js代码,如何在PHP中运行JavaScript代码?(代码示例)

    JavaScript是客户端脚本语言,PHP是用于与数据库交互的服务器端脚本语言.那么如何如何在PHP中运行JavaScript?本篇文章就来给大家介绍几种在PHP中运行JavaScript的方法,希 ...

最新文章

  1. 你不会编程,不是你不行,很有可能是老师教的方法不好。科学家发现:对大脑而言,代码编程与语言学习不同...
  2. 送你了,思科设备基础配置命令大全(一),赶紧收藏......
  3. Mysql连接显示1130_***远程连接MYSQL提示1130 - Host is not allowed to connect to this MySQL server...
  4. Java中stringbutter_java中string与ButterString的区别
  5. mariadb mysql表_mysql/mariadb学习记录——创建删除数据库、表的基本命令
  6. Notepad++快速选中多行
  7. 【MyBatis框架】Mybatis开发dao方法第一部分
  8. Spring Cloud Stream与RabbitMQ 死信队列
  9. sqlserver 字符串中是不是全为数字
  10. 网络github_GitHub项目awesome-latex-drawing新增内容(四):绘制贝叶斯网络
  11. c语言中冒泡排序、插入排序、选择排序算法比较
  12. 亚马逊选品调研之全球品牌和专利注册查询方法
  13. 《遥感原理与应用》孙家抦版知识点总结(含简答题)——第五章
  14. cortana 无法使用_如何使用Cortana创建和编辑列表(并将它们与Wunderlist同步)
  15. 看中国魅力女强人 访格力电器总裁董明珠
  16. 经典回忆Adobe Photoshop CS 2安装教程永久注册使用
  17. 如何使用脚本语言将typora的内容自动同步到gitee上
  18. 华为云服务权限在哪_华为云资源IAM精细控制权限实践
  19. 使用visualvm远程监控服务器状态(图形化界面)
  20. Android视频开发进阶(part2-MP4文件的解析)

热门文章

  1. C语言基础教程篇之环境如何设置
  2. iis 创建应用程序池的方法与分析第3/3页
  3. Mac 电脑如何卸载 node
  4. Swagger 生成 PHP API 接口文档
  5. git的一些简单使用
  6. import xxx from 和 import {xxx} from的区别
  7. 用mobiscroll.js的treelist实现弹出下拉效果
  8. 第三堂:Java程序流程控制
  9. POJ 3080 - Blue Jeans
  10. 零基础学习.NET平台和Csharp编程开发