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:45:19 +08:00 · 2212 次点击
    这是一个创建于 3296 天前的主题,其中的信息可能已经有所发展或是发生改变。
    // 没空格
    if(){
    // 遇到花括号空1格
    if() {
    // if 直接空1格
    if (){
    // 都空1格
    if () {
    // 条件空1格,花括号换行
    if ()
    {
    
    // 以上同样的问题也空在于 function 和 obj 上面
    // 方法
    function(){
    function (){
    function() {
    function()
    {
    
    // 对象
    var obj{
    var obj {
    var obj
    {
    
    5 条回复    2015-04-16 09:59:49 +08:00
    binjoo
        1
    binjoo  
       2015-04-16 09:47:41 +08:00
    萝卜白菜,各有所爱。
    你看着舒服,说不定别人看到就觉得你很奇葩。。
    shyangs
        2
    shyangs  
       2015-04-16 09:50:53 +08:00
    要引发大战了。顺便不写分号,前置逗号也拉进来讲。
    whatisnew
        3
    whatisnew  
    OP
       2015-04-16 09:51:30 +08:00
    1. 缩进空格问题,像 tbs 这种流行框架什么的推荐是 2 格,但是看到多数人用 4 格。
    那么现在问题来了,到底是空2格还是4格。。。

    2. 括号和花括号
    ```javascript
    // 没空格
    if(){
    // 遇到花括号空1格
    if() {
    // if 直接空1格
    if (){
    // 都空1格
    if () {
    // 条件空1格,花括号换行
    if ()
    {

    // 以上同样的问题也空在于 function 和 obj 上面
    // 方法
    function(){
    function (){
    function() {
    function()
    {

    // 对象
    var obj{
    var obj {
    var obj
    {
    ```

    换行问题有大神说过Javascript会自动添加句末的分号,导致一些难以察觉的错误,
    但是我觉得就算花括号不换行,但是在实际在文件中换行的地方多了去了,所以这个自动添加句末的分号的问题不应该成为一个编程风格的理由。

    按常见风格
    ```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很难理解吗?

    那么这样呢:
    ```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;
    }
    });

    });
    ```
    花括号换行之后,是不是直观了很多呢?更容易看清楚了呢?
    如果换成2个空格,那个花括号换行在js里就更好看了:
    ```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++ )
    {
    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个空格的花括号不换行,难道看着成篇成篇的代码不难受吗?

    此文仅用于个人偏好讨论用。没有任何别的什么意思。
    whatisnew
        4
    whatisnew  
    OP
       2015-04-16 09:57:28 +08:00
    天啊,不让我修改了,v2ex 的 markdown 语法分析器真是。。。服了
    whatisnew
        5
    whatisnew  
    OP
       2015-04-16 09:59:49 +08:00
    好吧,顺着 v2ex 的 markdown 语法分析器,重新写了一个: https://www.v2ex.com/t/184051
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1021 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 20:15 · PVG 04:15 · LAX 13:15 · JFK 16:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.