在重制 在线密码生成器 这个单页工具时,尝试的一种交互方式需要 tooltip (来自 Bootstrap) 作为操作提示的载体,动态修改 tooltip 的内容。于是查阅了其 源代码,虽然没发现有这样的功能支持(后来小改了一行之后就可以了),但是却发现其代码格式有些有趣的地方。

Tooltip.prototype = {

  constructor: Tooltip

, init: function (type, element, options) {
    var eventIn
      , eventOut

    this.type = type
    // ...
    this.options.selector ?
      (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
      this.fixTitle()
    }
// ...
}

可以注意到下面几点:

不写分号

在写源代码的时候,没有这个分号,除了代码更加干净之外,修改的时候也更少负担。比如直接在行末续加代码,或者,因为编辑器有各种快捷键跟行末有关,而不会跟行末的分号有关,在做像将后面的代码需要换到前面等的调整操作时都更有利。

虽然每次只是少一次按键,写成千上万行代码累积起来也非常可观。

OK,不写分号也是有一定 副作用 的。作为补充,如果要写分号,只需要加在以 '(', '[', '+', '-' 开头的行的行首。所以会看见这样的代码

;(function() { 
  /* function body */ 
})()

对象,数组,var 变量声明中每项都独占一行,而且逗号是写在下一项之前

通常我写数组的时候是这样的,逗号是跟在前一项的后面。

[
  'string',
  'number',
  'boolean'
]

这样写如果要续加项,需要在最后一项之后加逗号,然后换行。它那样就都写在一行里,虽然按键次数是相同的。而若需要将中间的项需要与末项交换时,这样写在交换之后,还需要修改这两行行末的逗号,它那样写则交换完行后就完事了。没有多余动作。但是,针无两头利,若是与首项交换的,行首的逗号还是需要额外动作。你认为是涉及末项的修改与涉及首项的修改哪个更多呢?

行末不跟逗号,与行末不跟分号一样,有着同样的便利。整体风格也更加一致。

不同类语句之间都有个空行

使代码之间空间更大,便于阅读。由于没有行末分号的存在,需要添加项目时,可以直接在空行上开始,结束的时候再补上换行。

换行更加人性化

内容太长的时候,选择性地将语义上属于一体的内容放在一行内,使阅读更加清晰,顺畅。

结语

如果你被告知在写代码的时候要维持一个格式,而且一个格式会有机会让你产生遗漏,甚至错误,即使结果再标准,你大概也会认为那格式是种负累。上面提到的一些代码风格,也许有些缺陷,但是在提醒我一件事,我们是可以站在写代码的交互过程的角度去考虑,去比较,是有可能实实在在地减负,减少错误的可能,而且出来的代码又是干净舒适的。无论隔多少个月之后看,那,都是我们自己写的代码。

对于键盘流来说,最能够明白过程中一点点小不同,对代码编写的情绪影响,在长时间累积之后对最终形势的巨大差别。

PS: 如果你也想动态地修改 tooltip 的 title,可以参考这个修改后的版本