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

2015-04-16 09:58:50 +08:00
 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个空格的花括号不换行,难道看着成篇成篇的代码不难受吗?

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

4015 次点击
所在节点    JavaScript
27 条回复
Hyperion
2015-04-16 10:02:10 +08:00
用空格,其实v2ex 不应该支持编辑主题吗?...
whatisnew
2015-04-16 10:03:57 +08:00
@Hyperion 好像只能在1分钟内允许编辑,超过就不行了。。。而且 v2ex 的 markdown 语法分析器分析出来的 html 简直了。。。
jarontai
2015-04-16 10:12:12 +08:00
缩进我觉得看个人喜好,但现在两格应该更流行,可以使用editorconfig来管理缩进;其他的就参照这个吧: https://github.com/airbnb/javascript
whatisnew
2015-04-16 10:17:52 +08:00
@jarontai 空2格太难受了。。。
EPr2hh6LADQWqRVH
2015-04-16 10:21:24 +08:00
自古以来都是四格,神圣不可侵犯
donghouhe
2015-04-16 11:26:50 +08:00
最近学go和js, go需要花括号不换行,而js又提倡不换行,无奈我只好改变习惯,都不换行吧
zkd8907
2015-04-16 11:28:04 +08:00
怎么方便怎么来,IDE能自动格式化最好。团队风格保持一致就行,没必要太纠结这些。
FrankFang128
2015-04-16 11:43:42 +08:00
打倒2格党
lxrmido
2015-04-16 11:47:18 +08:00
2格简直不能忍,4格才是正统
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
griffinqiu
2015-04-16 11:55:32 +08:00
tamamaxox
2015-04-16 12:34:42 +08:00
用vim的话装个 jsbeautify ,杀死一切两格党
feiyuanqiu
2015-04-16 12:44:34 +08:00
julio867
2015-04-16 14:33:01 +08:00
之前有段时间我的HTML、JS、CSS都是缩进4个空格,后来都改成了 2 个,一个是因为这样看着比较紧凑,再者就是单行可以放更多的内容;只有在做后台开发的时候保持4个空格,例如C#的代码风格;同样的花括号也类似,现在我在JS中也是花括号不换号,但是C#换行;一般在一个团队里面的话,都会有编码规范,只要团队统一就好,如果是个人,自己喜欢就好,最好能坚持~~
Twinkle
2015-04-16 14:43:06 +08:00
@griffinqiu bar() 想要 return 一个对象,花括号当然不应该换行,不然就直接返回了啊
whatisnew
2015-04-16 16:15:51 +08:00
@Twinkle 好吧,那就不换行吧。
@donghouhe apple swift 也是这样
@tamamaxox jsbeautify 可以配置 opts.indent_size = 2
wizardforcel
2015-04-16 18:03:46 +08:00
我怎么隐隐约约闻到一股火药味。。
ffffwh
2015-04-16 18:15:42 +08:00
@FrankFang128
这样,你们折中一下用3个空格






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

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

其实还挺好看的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/184051

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX