UDN-企业互联网技术人气社区

板块导航

浏览  : 4060
回复  : 4

[原生js] 以优美方式编写JavaScript代码

[复制链接]
泡泡兔的头像 楼主
发表于 2015-11-3 19:44:42 | 显示全部楼层 |阅读模式
  我用 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.    }
  11. }
复制代码

  这里是另外一个版本的实现,我发现了更多优雅和优美之处,尤其是如果你熟悉单行的if else的话(三目条件运算):
  1. function fib(n) {
  2.     return n<2 ? n : fib(n-1) + fib(n-2);
  3. }
复制代码

  同样优美的一段码,代码的行数并不见得那么重要:
  1. function fib(n) {
  2.     if (n < 2)
  3.         return n;
  4.     return fib(n-2) + fib(n-1);
  5. }
复制代码

  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
3.jpg

  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.     this.ajax.getArchived(data, function(data) {
  10.         if(!offset)
  11.             self.setCache(data);
  12.         callback(data);
  13.     });
  14. }
复制代码

  CoffeeScript 看起来像这样:
  1. get: (offset, callback, limit) =>
  2.     data =
  3.         project_id: Projects.getCurrent().id
  4.         limit: limit or @default_limit
  5.     if offset
  6.         data.offset = Calendar.jsonFormat(offset, true)
  7.     @ajax.getArchived(data, (data) =>
  8.         if !offset
  9.             @setCache(data)
  10.         callback(data)
  11.     )
复制代码

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

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

  亮点一:继承更简单

  JavaScript 有很强的继承系统,但是语法很恐怖,CoffeeScript 修复了用一种很优雅的继承系统模拟其它很多语言中类和继承机制:
  1. class Animal
  2.     constructor: (@name) ->
  3.     move: (meters) ->
  4.         alert @name + " moved " + meters + "m."
  5. class Snake extends Animal
  6.     move: ->
  7.         alert "Slithering..."
  8.         super 5
复制代码

  亮点二:数组的迭代

  我喜欢 Python 中的列表推导在 CoffeeScript 也有
  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.     $('.shopping_cart').bind('click', (event) =>
  5.         @customer.purchase @cart
  6.     )
复制代码

  探索 CoffeeScript

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

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

相关帖子

发表于 2015-11-4 22:01:01 | 显示全部楼层
讲解很详细 排版也很清晰。。。楼主你好屌 。。。
使用道具 举报

回复

发表于 2015-11-8 14:23:56 | 显示全部楼层
这个必须顶,JavaScript我的最爱
使用道具 举报

回复

发表于 2015-11-12 12:00:47 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2015-11-13 15:52:55 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部