[CoffeeScript]以优美方式编写JavaScript代码

??

我用JavaScript 编程很多年了,写了大量的JS代码,即便是我这样的经历,但我仍然还在努力地去写出更优美的JS代码,在这篇文章中,我将探索为什么写出漂亮的JS代码是如此困难,如何使用CoffeScript(一种简约且能编译成JS的语言)改善它。

什么是优美的代码?

我想从个人观点来声明如何定义优美代码

  • 1、优美的代码是使用更少的代码解决问题;
  • 2、优美的代码是可读而且易理解的
  • 3、优美的代码是一段既没有什么可以需要添加也没有什么多余的可以去掉代码(就像伟大的的设计)
  • 4、最短长度是优美代码的另外一个方面,并不是以此为作为目标或者权衡

所以对我来说,优美的代码是最小代码化、可使用、易读的综合效应。

一段优美JavaScript代码的例子:

斐波纳契函数举例来说,这个函数对绝大多数程序员来是应该知道的。这里有一个谈不上漂亮的实现,因为代码缺乏结构化,而且使用了很多没必要的冗长代码:


1

2

3

4

5

6

7

8

9

10

11

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的话(三目条件运算):


1

2

function fib(n) {

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

同样优美的一段码,代码的行数并不见得那么重要


1

2

3

4

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代码:


1

2

square = (x) -> x * x

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

编译成JavaScript代码:


1

2

3

4

5

6

7

var cube, square;

square = function(x) {

  return x * x;

};

cube = function(x) {

  return square(x) * x;

};

正如你从上例中看到的CoffeeScript和JavaScirpt的映射非常的直接。在另外一个网站你可以发现很多例子CoffeeScript如何编译成JavaScript。

CoffeeScript:重写示例

为了给你一种CoffeeScript的感觉,这里是个小JavaScript例子,我将重写成CoffeeScript。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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看起来像这样:


1

2

3

4

5

6

7

8

9

10

11

12

13

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修复了用一种很优雅的继承系统模拟其它很多语言中类和继承机制:


1

2

3

4

5

6

7

8

9

10

class Animal

    constructor: (@name) ->

    move: (meters) ->

        alert @name + " moved " + meters + "m."

class Snake extends Animal

    move: ->

        alert "Slithering..."

        super 5

亮点二:数组的迭代

我喜欢Python中的列表推导在CoffeeScript也有


1

2

list = [1, 2, 3, 4, 5]

cubes = (math.cube num for num in list)

数组切片:


1

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

数组迭代:


1

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

亮点三:字符串迭代

对于字符创的插入,CoffeeScript借用了Ruby的语法,它能简单的构造字符串。


1

2

author = "Wittgenstein"

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

允许多行的字符串:


1

2

3

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


1

2

3

4

5

6

7

Account = (customer, cart) ->

    @customer = customer

    @cart = cart

    $(‘.shopping_cart‘).bind(‘click‘, (event) =>

        @customer.purchase @cart

    )

探索CoffeeScript

我仅仅抓住CoffeeScript的表面所提供的一些东西,更多细节请从他们的站点提取以及带有注释的源代码

我仍然在探索CoffeeScript,目前为止这是我最喜欢的语言,荣誉属于Jeremy Ashkenas。快乐的编程,我也希望你可以试一把CoffeeScript。

时间: 2024-10-07 22:22:06

[CoffeeScript]以优美方式编写JavaScript代码的相关文章

以优美方式编写JavaScript代码

英文原文:CoffeeScript: The beautiful way to write JavaScript 我用 JavaScript 编程很多年了,写了大量的 JavaScript 代码,即便是我这样的经历,但我仍然还在努力地去写出更优美的 JavaScript 代码,在这篇文章中,我将探索为什么写出漂亮的 JavaScript 代码是如此困难,如何使用CoffeScript(一种简约且能编译成 JavaScript 的语言)改善它. 什么是优美的代码? 我想从个人观点来声明如何定义优美

react-native-pg-style使用方法(以最简单的方式编写样式代码)

react-native-pg-style 以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式. 看大家写的源码中都是按照react-native标准的样式创建方式来写样式代码的,样式代码就占了大概四分之一,甚至三分之一的代码,然而我却喜欢把样式写在一行当中.而不用const styles=StyleSheet.create({样式属性...})来写,我觉得这样在改动样式时便不用在跑到StyleSheet.create中修改,而且代码量会少很多,于是就有了这个插件. 下面

如何在VS2010中更好的编写JavaScript代码

VS2010默认的JavaScript代码编辑器相对简单.对于大家熟悉的代码折叠,代码结构.函数导航,代码高亮等都不支持,使用很不便.下面介绍下我发现的几个VS2010插件,具有哪些功能,如何安装和使用. 工具/原料 VS2010 方法/步骤 1 先看看VS2010自带的JavaScript编辑器界面.代码折叠木有,代码结构.函数导航木有,代码高亮木有. 2 接下来我们要去安装JavaScript的插件了,去哪找呢?在这里,VS菜单选择工具->扩展管理器. 3 打开扩展管理器后,这时我们还未安装

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

本书介绍 JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码.不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代码. 从减少代码复杂性的方法,到单元测试.代码覆盖率.调试.以及自动化,您将全面学到如何编写让你和你同事能够轻松修复和维护的JavaScript代码.测试JavaScript代码是一个复杂的过程.本书将在很大程度上帮你简化该过程. 目标读者 本书主要目标受众是那些想成为JavaScript专业开发人

CoffeeScript?TypeScript?还是JavaScript

请注意本文只是我的偏见,我努力地理解借助CoffeeScript或TypeScript之类的编译器写JavaScript代码的理由.静态编译.强类型语言和框架,我有着这些流行的.丰富的背景.我的上一份工作就是使用TypeScript,因为我不得不使用.那是一段不快乐的时光,我将因此而离开. 我很幸运地把自己从这种困境和负担中释放出来,正在完全地使用JavaScript编写代码,我对此感到格外高兴!如果我对于这种变化的热情还不够明显,请让我向你保证,我现在更开心了.有一点很重要,我不是在暗示静态编

JavaScript代码调试

怎么在浏览器中调试JavaScript代码呢?首先,你需要安装Google Chrome浏览器,Chrome浏览器对开发者非常友好,可以让你方便地调试JavaScript代码.安装后,随便打开一个网页,然后点击菜单"查看-"更多工具"-"开发者工具",浏览器窗口就会一分为二,下方就是开发者工具: 先点击"控制台(Console)",在这个面板里可以直接输入JavaScript代码,按回车后执行.要查看一个变量的内容,在Console中输

最新的JavaScript核心语言标准&mdash;&mdash;ES6,彻底改变你编写JS代码的方式!【转载+整理】

原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是"凡是新加入的特性,势必已在其它语言中得到强有力的实用性证明."--TRUE!如果你大概浏览下 ES6 的新特性,事实上它

编写简洁的 JavaScript 代码

作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/223515216来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 避免使用 js 糟粕和鸡肋 这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从"世界上最被误解的语言"变成了"世界上最流行的语言".但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比如

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以