关于 javascript 的编程风格（完整版）

[whatisnew]

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个空格的花括号不换行，难道看着成篇成篇的代码不难受吗？

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

[Hyperion]

用空格，其实v2ex 不应该支持编辑主题吗?...

[whatisnew]

@Hyperion 好像只能在1分钟内允许编辑，超过就不行了。。。而且 v2ex 的 markdown 语法分析器分析出来的 html 简直了。。。

[jarontai]

缩进我觉得看个人喜好，但现在两格应该更流行，可以使用editorconfig来管理缩进；其他的就参照这个吧： https://github.com/airbnb/javascript

[whatisnew]

@jarontai 空2格太难受了。。。

[EPr2hh6LADQWqRVH]

自古以来都是四格，神圣不可侵犯

[donghouhe]

最近学go和js, go需要花括号不换行，而js又提倡不换行，无奈我只好改变习惯，都不换行吧

[zkd8907]

怎么方便怎么来，IDE能自动格式化最好。团队风格保持一致就行，没必要太纠结这些。

[FrankFang128]

打倒2格党

[lxrmido]

2格简直不能忍，4格才是正统

[griffinqiu]

javascript有些地方的花括号不能换行的 否则会有bug， 所以花括号还是全部不换行把


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

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

foo(); // Object {a: 123}
bar(); // undefined

[griffinqiu]

http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html

[tamamaxox]

用vim的话装个 jsbeautify ,杀死一切两格党

[feiyuanqiu]

https://github.com/airbnb/javascript
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

[julio867]

之前有段时间我的HTML、JS、CSS都是缩进4个空格，后来都改成了 2 个，一个是因为这样看着比较紧凑，再者就是单行可以放更多的内容；只有在做后台开发的时候保持4个空格，例如C#的代码风格；同样的花括号也类似，现在我在JS中也是花括号不换号，但是C#换行；一般在一个团队里面的话，都会有编码规范，只要团队统一就好，如果是个人，自己喜欢就好，最好能坚持~~

[Twinkle]

@griffinqiu bar() 想要 return 一个对象，花括号当然不应该换行，不然就直接返回了啊

[whatisnew]

@Twinkle 好吧，那就不换行吧。
@donghouhe apple swift 也是这样
@tamamaxox jsbeautify 可以配置 opts.indent_size = 2

[wizardforcel]

我怎么隐隐约约闻到一股火药味。。

[ffffwh]

@FrankFang128
这样，你们折中一下用3个空格
。
。
。
。
。
。
或者两个全角空格

[slfmessi]

4格的话缩进会相当长吧= =

[witcher42]

4 格的话，你可以这样声明变量

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

其实还挺好看的

[jin5354]

4格比较常用 回调太多了再用2格

[griffinqiu]

为什么不用tab？ 换成tab你想设置成几个空格就几个空格。
2个空格大小的缩进？ why？ 放在十年前我可以试着理解成当时屏幕分辨率小。 现在都大分辨率了嘛

@jin5354
@witcher42
@slfmessi
@Hyperion
@julio867
@ffffwh

[ileenhow]

编写可维护的JS一书上面我看到还有用8格的....

[tamamaxox]

@whatisnew 没关系，我的配置里面不出现这个设置就可以了

[Hyperion]

@griffinqiu 我一直用四格, 从来不用别的. 我也很奇怪2个空格的流派是基于什么考虑...

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

然后就转了性了. 当然个人写的小脚本我还是会用tab缩进, 反正不用给别人, 自己爽就行了...

[witcher42]

@griffinqiu 「就是因为 tab 你想设置成几个空格就几个空格，反而让呈现出的样式不一样，所以要用空格」这个能说服你么 _(:3 」∠)_

[quix]

照着 jshint 来不行吗?