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

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

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

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

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

然后就转了性了. 当然个人写的小脚本我还是会用tab缩进, 反正不用给别人, 自己爽就行了...
witcher42
2015-04-17 12:43:44 +08:00
@griffinqiu 「就是因为 tab 你想设置成几个空格就几个空格,反而让呈现出的样式不一样,所以要用空格」这个能说服你么 _(:3 」∠)_
quix
2015-04-18 17:26:32 +08:00
照着 jshint 来不行吗?

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

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

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

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

© 2021 V2EX