V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
whatisnew
V2EX  ›  JavaScript

关于 javascript 的编程风格(完整版)

  •  
  •   whatisnew · 2015-04-16 09:58:50 +08:00 · 4119 次点击
    这是一个创建于 3500 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 缩进空格问题,像 tbs 这种流行框架什么的推荐是 2 格,但是看到多数人用 4 格。
      那么现在问题来了,到底是空2格还是4格。。。

    2. 括号和花括号

    // 没空格
    if(){
    // 遇到花括号空1格
    if() {
    // if 直接空1格
    if (){
    // 都空1格
    if () {
    // 条件空1格,花括号换行
    if ()
    {
    
    // 以上同样的问题也空在于 function 和 obj 上面
    // 方法
    function(){
    function (){
    function() {
    function()
    {
    
    // 对象
    var obj{
    var obj {
    var obj
    {
    
    // 换行问题有大神说过Javascript会自动添加句末的分号,导致一些难以察觉的错误,
    // 但是我觉得就算花括号不换行,但是在实际在文件中换行的地方多了去了,
    // 所以这个自动添加句末的分号的问题不应该成为一个编程风格的理由。
    
    // 按常见风格
    define(["../jquery",], function( jQuery ) {
    
        var rclass = /[\t\r\n\f]/g;
    
        jQuery.fn.extend({
    
            addSomeClass: function( value ) {
    
                if ( proceed ) {
                    classes = ( value || "" ).match( rnotwhite ) || [];
    
                    for ( ; i < len; i++ ) {
                        elem = this[ i ];
                        cur = elem.nodeType === 1 && ( elem.className ?
                            ( " " + elem.className + " " ).replace( rclass, " " ) :
                            " "
                        );
    
                        if ( cur ) {
                            j = 0;
                            while ( (clazz = classes[j++]) ) {
                                if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                                    cur += clazz + " ";
                                }
                            }
    
                            finalValue = jQuery.trim( cur );
                            if ( elem.className !== finalValue ) {
                                elem.className = finalValue;
                            }
                        }
                    }
                }
    
                return this;
            }
        });
    
    });
    // 上面这种风格,难道没有人觉得代码块block很难理解吗?
    
    // 那么现在这样呢:
    define(["../jquery",], function( jQuery )
    {
        var rclass = /[\t\r\n\f]/g;
    
        jQuery.fn.extend(
        {
            addSomeClass: function( value )
            {
                if ( proceed )
                {
                    classes = ( value || "" ).match( rnotwhite ) || [];
    
                    for ( ; i < len; i++ )
                    {
                        elem = this[ i ];
                        cur = elem.nodeType === 1 && ( elem.className ?
                            ( " " + elem.className + " " ).replace( rclass, " " ) :
                            " "
                        );
    
                        if ( cur )
                        {
                            j = 0;
                            while ( (clazz = classes[j++]) )
                            {
                                // 当条件只有一行的时候省略 {} 花括号
                                if ( cur.indexOf( " " + clazz + " " ) < 0 ) cur += clazz + " ";
                            }
    
                            finalValue = jQuery.trim( cur );
                            if ( elem.className !== finalValue )
                            {
                                elem.className = finalValue;
                            }
                        }
                    }
                }
    
                return this;
            }
        });
    
    });
    // 花括号换行之后,是不是直观了很多呢?更容易看清楚了呢?
    // 如果换成2个空格,那个花括号换行在js里就更好看了:
    define(["../jquery",], function( jQuery )
    {
      var rclass = /[\t\r\n\f]/g;
    
      jQuery.fn.extend(
      {
        addSomeClass: function( value )
        {
          if ( proceed )
          {
            classes = ( value || "" ).match( rnotwhite ) || [];
    
            for ( ; i < len; i++ )
            {
              if ( cur )
              {
                j = 0;
                while ( (clazz = classes[j++]) )
                {
                  // 当条件只有一行的时候省略 {} 花括号
                  if ( cur.indexOf( " " + clazz + " " ) < 0 ) cur += clazz + " ";
                }
    
                finalValue = jQuery.trim( cur );
                if ( elem.className !== finalValue )
                {
                  elem.className = finalValue;
                }
              }
            }
          }
    
          return this;
          }
      });
    
    });
    // 是不是更加直观,容易看清楚了呢?
    

    所以,我不理解了,为什么大家常见都说2个空格,又写成4个空格,不换行,特别是2个空格的花括号不换行,难道看着成篇成篇的代码不难受吗?

    此文仅用于个人偏好讨论用。没有任何别的什么意思。

    27 条回复    2015-04-18 17:26:32 +08:00
    Hyperion
        1
    Hyperion  
       2015-04-16 10:02:10 +08:00 via Android
    用空格,其实v2ex 不应该支持编辑主题吗?...
    whatisnew
        2
    whatisnew  
    OP
       2015-04-16 10:03:57 +08:00
    @Hyperion 好像只能在1分钟内允许编辑,超过就不行了。。。而且 v2ex 的 markdown 语法分析器分析出来的 html 简直了。。。
    jarontai
        3
    jarontai  
       2015-04-16 10:12:12 +08:00
    缩进我觉得看个人喜好,但现在两格应该更流行,可以使用editorconfig来管理缩进;其他的就参照这个吧: https://github.com/airbnb/javascript
    whatisnew
        4
    whatisnew  
    OP
       2015-04-16 10:17:52 +08:00
    @jarontai 空2格太难受了。。。
    EPr2hh6LADQWqRVH
        5
    EPr2hh6LADQWqRVH  
       2015-04-16 10:21:24 +08:00
    自古以来都是四格,神圣不可侵犯
    donghouhe
        6
    donghouhe  
       2015-04-16 11:26:50 +08:00 via Android
    最近学go和js, go需要花括号不换行,而js又提倡不换行,无奈我只好改变习惯,都不换行吧
    zkd8907
        7
    zkd8907  
       2015-04-16 11:28:04 +08:00
    怎么方便怎么来,IDE能自动格式化最好。团队风格保持一致就行,没必要太纠结这些。
    FrankFang128
        8
    FrankFang128  
       2015-04-16 11:43:42 +08:00 via Android
    打倒2格党
    lxrmido
        9
    lxrmido  
       2015-04-16 11:47:18 +08:00
    2格简直不能忍,4格才是正统
    griffinqiu
        10
    griffinqiu  
       2015-04-16 11:53:13 +08:00
    javascript有些地方的花括号不能换行的 否则会有bug, 所以花括号还是全部不换行把


    function foo() {
    return {
    a: 123
    }
    }

    function bar()
    {
    return
    {
    a: 123
    }
    }

    foo(); // Object {a: 123}
    bar(); // undefined
    tamamaxox
        12
    tamamaxox  
       2015-04-16 12:34:42 +08:00
    用vim的话装个 jsbeautify ,杀死一切两格党
    julio867
        14
    julio867  
       2015-04-16 14:33:01 +08:00
    之前有段时间我的HTML、JS、CSS都是缩进4个空格,后来都改成了 2 个,一个是因为这样看着比较紧凑,再者就是单行可以放更多的内容;只有在做后台开发的时候保持4个空格,例如C#的代码风格;同样的花括号也类似,现在我在JS中也是花括号不换号,但是C#换行;一般在一个团队里面的话,都会有编码规范,只要团队统一就好,如果是个人,自己喜欢就好,最好能坚持~~
    Twinkle
        15
    Twinkle  
       2015-04-16 14:43:06 +08:00
    @griffinqiu bar() 想要 return 一个对象,花括号当然不应该换行,不然就直接返回了啊
    whatisnew
        16
    whatisnew  
    OP
       2015-04-16 16:15:51 +08:00
    @Twinkle 好吧,那就不换行吧。
    @donghouhe apple swift 也是这样
    @tamamaxox jsbeautify 可以配置 opts.indent_size = 2
    wizardforcel
        17
    wizardforcel  
       2015-04-16 18:03:46 +08:00
    我怎么隐隐约约闻到一股火药味。。
    ffffwh
        18
    ffffwh  
       2015-04-16 18:15:42 +08:00   ❤️ 1
    @FrankFang128
    这样,你们折中一下用3个空格






    或者两个全角空格
    slfmessi
        19
    slfmessi  
       2015-04-16 19:57:27 +08:00
    4格的话缩进会相当长吧= =
    witcher42
        20
    witcher42  
       2015-04-16 20:23:41 +08:00
    4 格的话,你可以这样声明变量

    https://gist.github.com/Witcher42/d2bd837dbd152aa08898

    其实还挺好看的
    jin5354
        21
    jin5354  
       2015-04-16 23:13:02 +08:00
    4格比较常用 回调太多了再用2格
    griffinqiu
        22
    griffinqiu  
       2015-04-17 09:18:46 +08:00
    为什么不用tab? 换成tab你想设置成几个空格就几个空格。
    2个空格大小的缩进? why? 放在十年前我可以试着理解成当时屏幕分辨率小。 现在都大分辨率了嘛

    @jin5354
    @witcher42
    @slfmessi
    @Hyperion
    @julio867
    @ffffwh
    ileenhow
        23
    ileenhow  
       2015-04-17 09:25:18 +08:00
    编写可维护的JS一书上面我看到还有用8格的....
    tamamaxox
        24
    tamamaxox  
       2015-04-17 09:47:24 +08:00
    @whatisnew 没关系,我的配置里面不出现这个设置就可以了
    Hyperion
        25
    Hyperion  
       2015-04-17 10:29:49 +08:00
    @griffinqiu 我一直用四格, 从来不用别的. 我也很奇怪2个空格的流派是基于什么考虑...

    我个人是设置tab 自动转换成4个空格的, 一直是习惯tab, 嫌删行时候麻烦, 可后来发现一些熟人用的神经病编译器对tab 的处理是8个空格, 还没法设定.

    然后就转了性了. 当然个人写的小脚本我还是会用tab缩进, 反正不用给别人, 自己爽就行了...
    witcher42
        26
    witcher42  
       2015-04-17 12:43:44 +08:00
    @griffinqiu 「就是因为 tab 你想设置成几个空格就几个空格,反而让呈现出的样式不一样,所以要用空格」这个能说服你么 _(:3 」∠)_
    quix
        27
    quix  
       2015-04-18 17:26:32 +08:00
    照着 jshint 来不行吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3662 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 04:23 · PVG 12:23 · LAX 20:23 · JFK 23:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.