美文网首页
编程风格

编程风格

作者: 前端小木鱼 | 来源:发表于2019-03-07 09:54 被阅读0次

    (一)概述

    “编程风格”(programming style)指的是编写代码的样式规则。不同的程序员,往往有不同的编程风格。
    好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。
    编程风格的选择不应该基于个人爱好、熟悉程度、打字量等因素,而要考虑如何尽量使代码清晰易读、减少出错。你选择的,不是你喜欢的风格,而是一种能够清晰表达你的意图的风格。
    如果你选定了一种“编程风格”,就应该坚持遵守,切忌多种风格混用。如果你加入他人的项目,就应该遵守现有的风格。

    (二)选择和优化

    1. 缩进

    行首的空格和 Tab 键,都可以产生代码缩进效果(indent)。
    无论你选择哪一种方法,都是可以接受的,要做的就是始终坚持这一种选择。
    我使用tab键,可以减少输入次数,据说压缩的文件也要更小(参考硅谷传奇)。

    2. 区块

    如果循环和判断的代码体只有一行,JavaScript 允许该区块(block)省略大括号。
    但是为避免歧义,建议总是使用大括号表示区块。
    因js某些情况下会在行末自动添加分号,因此表示区块起首的大括号,不要另起一行。

    3. 圆括号

    圆括号(parentheses)在 JavaScript 中有两种作用,一种表示函数的调用,另一种表示表达式的组合(grouping)。
    建议可以用空格,区分这两种不同的括号。

    • 表示函数调用时,函数名与左括号之间没有空格。
    • 表示函数定义时,函数名与左括号之间没有空格。
    • 其他情况时,前面位置的语法元素与左括号之间,都有一个空格。

    4. 分号

    分号表示一条语句的结束,JavaScript 允许省略行尾的分号。
    除特定情况外,建议语句的结尾要加分号。
    以下三种情况语法规定,结尾不需要写分号:

    (1)条件语句:if,switch,try

    if (true) {
    }
    
    switch () {
    }
    
    try {
    } catch {
    } 
    

    (2)循环语句:for,while

    for ( ; ; ) {
    }
    
    while (true) {
    }
    
    do {
    } while ();
    

    注意,do...while循环结尾要加分号。

    (3)函数的声明语句:

    function f() {
    }
    
    var f = function () {
    };
    

    注意,函数表达式结尾要加分号。

    5. 全局变量

    js的全局变量对于任何一个代码块,都是可读可写。这对代码的模块化和重复使用,非常不利。
    因此,建议避免使用全局变量。如果不得不使用,可以考虑用大写字母表示变量名,这样更容易看出是这是全局变量,比如var UPPER_CASE = 1;

    6. 变量声明

    js会自动将变量声明“提升”到代码块的头部。
    为了避免可能出现的问题,最好把变量声明都放在代码块的头部。
    所有函数都应该在使用前定义,函数内部的变量声明,都应该放在函数的头部。

    7. 语句的合并:建议不要将不同目的的语句,合并成一行。

    (三)弃用和替换

    8. with语句:不要使用with语句。

    9. 相等:建议不要使用相等运算符(==),只使用严格相等运算符(===)。

    10. 自增和自减运算符:建议尽量使用+=,-=代替++,--

    11. switch...case结构:建议使用对象结构代替switch...case结构

    //switch...case结构
    function doAction(action) {
                switch (action) {
                    case 'hack':
                    return 'hack';
                    case 'slash':
                    return 'slash';
                    case 'run':
                    return 'run';
                    default:
                    throw new Error('Invalid action.');
                }
            }
    
    //对象结构
    function doAction(action) {
                var actions = {
                    'hack': function () {
                        return 'hack';
                    },
                    'slash': function () {
                        return 'slash';
                    },
                    'run': function () {
                        return 'run';
                    },
                };
    
                // console.log(typeof actions[action]);
                if (typeof actions[action] !== 'function') {
                    throw new Error('Invalid action.');
                }
    
                return actions[action]();
            }
    

    相关文章

      网友评论

          本文标题:编程风格

          本文链接:https://www.haomeiwen.com/subject/chffpqtx.html