文档章节

以优美方式编写JavaScript代码

Chen-Zhiqiang
 Chen-Zhiqiang
发布于 2013/05/11 17:13
字数 1587
阅读 76
收藏 1

以优美方式编写JavaScript代码

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

什么是优美的代码?

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

1、优美的代码是使用更少的代码解决问题;

2、优美的代码是可读而且易理解的

3、优美的代码是一段既没有什么可以需要添加也没有什么多余的可以去掉代码(就像伟大的的设计)

4、最短长度是优美代码的另外一个方面,并不是以此为作为目标或者权衡

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

一段优美JavaScript代码的例子:

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


  
  1. function f(n) {   
  2. var s= 0;   
  3. if(n == 0) return(s);   
  4. if(n == 1) {   
  5. s += 1;   
  6. return(s);   
  7. }   
  8. else {   
  9. return(f(n - 1) + f(n - 2));   
  10.    }   

这里是另外一个版本的实现,我发现了更多优雅和优美之处,尤其是如果你熟悉单行的if else的话(三目条件运算):


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

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


  
  1. function fib(n) {   
  2.     if (n < 2)   
  3.         return n   
  4.     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 logo  

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. square = (x) -> x * x   
  2. cube   = (x) -> square(x) * x 

编译成JavaScript代码:


  
  1. var cube, square;   
  2. square = function(x) {   
  3.   return x * x;   
  4. };   
  5. cube = function(x) {   
  6.   return square(x) * x;   
  7. }; 

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

CoffeeScript:重写示例

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


  
  1. get: function(offset, callback, limit) {   
  2.     var self = this;   
  3.     var data = {   
  4.         project_id: Projects.getCurrent().id,   
  5.         limit: limit || this.default_limit   
  6.     }   
  7.     if(offset)   
  8.         data.offset = Calendar.jsonFormat(offset, true);   
  9.     
  10.     this.ajax.getArchived(data, function(data) {   
  11.         if(!offset)   
  12.             self.setCache(data);   
  13.         callback(data);   
  14.     });   

CoffeeScript看起来像这样:


  
  1. get: (offset, callback, limit) =>   
  2.     data =   
  3.         project_id: Projects.getCurrent().id   
  4.         limit: limit or @default_limit   
  5.     
  6.     if offset   
  7.         data.offset = Calendar.jsonFormat(offset, true)   
  8.     
  9.     @ajax.getArchived(data, (data) =>   
  10.         if !offset   
  11.             @setCache(data)   
  12.         callback(data)   
  13.     ) 

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

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

亮点一:继承更简单

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


   
  1. class Animal   
  2.     constructor: (@name) ->   
  3.     
  4.     move: (meters) ->   
  5.         alert @name + " moved " + meters + "m." 
  6. class Snake extends Animal   
  7.     move: ->   
  8.         alert "Slithering..." 
  9.         super 5 

亮点二:数组的迭代


   
  1. list = [1, 2, 3, 4, 5]   
  2. 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. author = "Wittgenstein" 
  2. quote  = "A picture is a fact. -- #{ author }" 

允许多行的字符串:


   
  1. mobyDick = "Call me Ishmael. Some years ago -   
  2. never mind how long precisely -- having little   
  3. or no money in my purse, and nothing particular..." 

亮点四:绑定this

this 关键字在JavaScript中部分的被破坏,因为他的动态域,CoffeeScript修复了这些,如果你使用=>关键字(它自动为你绑定this或者@)


   
  1. Account = (customer, cart) ->   
  2.     @customer = customer   
  3.     @cart = cart   
  4.     
  5.     $('.shopping_cart').bind('click', (event) =>   
  6.         @customer.purchase @cart   
  7.     ) 

探索CoffeeScript

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

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

原文链接:http://blog.jobbole.com/26554/#4_2,3_0_948d883a507938_298

本文转载自:http://developer.51cto.com/art/201209/357067.htm

共有 人打赏支持
Chen-Zhiqiang
粉丝 11
博文 23
码字总数 22936
作品 0
苏州
程序员
私信 提问
5 种JavaScript编码规范

什么是编码规范 编码规范就是指导如何编写和组织代码的一系列标准。通过阅读这些编码规范,你可以知道在各个公司里代码是如何编写的。 我们为什么需要编码规范 一个主要的原因是:每个人写代...

小旋风柴进
06/16
0
0
5 种 JavaScript 编码规范,你喜欢哪一个?

无论你是刚刚学习 JavaScript,还是正在准备大厂的前端面试,下面这 5 种 JavaScript 编码规范都值得你留意和参考。 什么是编码规范 编码规范就是指导如何编写和组织代码的一系列标准。通过阅...

达尔文
2017/11/13
3.2K
7
KODExplorer 相关开源组件

KODExplorer是一个公开源码的基于Web的在线文件管理、代码编辑器。它提供了类windows经典 用户界面,一整套在线文件管理、文件预览、编辑、上传下载、在线解压缩、音乐播放功能。让你直接在浏...

jxlgzwh
2014/09/18
0
0
《javascript语言精粹》读书笔记(三)

从现在起要加快点速度了,书中其实有很多知识对于我来说已经很熟悉了,在此我就简单摘录一下,当然如果非常重要的知识(我认为的,可能有失偏颇),我会写的详细点,可能还会加入我的理解。下...

倪闯
2015/03/13
0
0
JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒
04/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

GO redis 相关操作

在gopath 目录下安装 go get github.com/garyburd/redigo/redis package mainimport ("fmt""github.com/garyburd/redigo/redis")//定义一个全局链接池变量var pool *redis.Pool//......

汤汤圆圆
32分钟前
6
0
java8性特性,常用的lambda表达式

1、抽取多个对象中的某个属性,用数组接收 List<Student> students = new ArrayList<>(); List<String> names =students.stream().map(Student::getName).collect(Collectors.toList()); 2、......

Boss-x
33分钟前
7
0
flutter 子组件与父组件

无论是子组件还是父组件,任何时候initState()只执行一次,如果需要判断 就在build里面进行,不然无效的。

大灰狼wow
35分钟前
4
0
Rancher Labs引入全球首个多集群、多租户的Prometheus支持!

近日,Rancher Labs宣布加强对Prometheus的支持,提高Kubernetes集群的可见度。Rancher也因此成为唯一一个在多集群、多租户环境中支持Prometheus的解决方案。 Prometheus正迅速成为监控云原生...

RancherLabs
37分钟前
3
0
vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。 1. 在axiosconfig目录下的axiosConfig.js import Vue from 'vue...

peakedness丶
40分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部