V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
heike1235
V2EX  ›  推广

如何才能让自己写的代码特别清晰

  •  
  •   heike1235 · 2021-07-23 10:15:07 +08:00 · 1446 次点击
    这是一个创建于 1224 天前的主题,其中的信息可能已经有所发展或是发生改变。

    编码约定是编程的风格指南。其中包括编程最佳实践和原则。这里我们将讨论一些编码约定。

    遵循约定的好处

    • 干净的代码
    • 代码质量
    • 代码可读性
    • 使代码维护更容易

    “干净的代码简单而直接。干净的代码读起来就像写得很好的散文。干净的代码永远不会模糊设计师的意图,而是充满了清晰的抽象和直接的控制线。” — 罗伯特·C·马丁

    神奇数字

    一个神奇的数字意味着我们正在分配没有明确意义的数字。有时我们出于特定目的使用值,并且我们不会在有意义的变量中分配值。问题在于,当有人使用您的代码时,该人不知道该直接值的含义。

    //错误示范
    for(let i = 0; i < 50; i++){
        //业务代码
    }
    //正确示范
    let NUMBER_OF_STUDENTS= 50
    for(let i = 0; i < NUMBER_OF_STUDENTS; i++){
        //业务代码
    }
    

    深度嵌套

    有时我们使用难以理解的嵌套循环。处理这个问题的方法是将所有循环提取到单独的函数中。 假设我们有一个包含另一个数组的数组,并且我们想要最后一个数组的值。我们可以编写一个嵌套循环来满足我们的要求。但这不是正确的方法。这里我写了一个可以做同样事情的函数,但这个函数更简洁、更简单、重复更少、更易于阅读和可重用。

    // 错误示范
    const array = [ [ ['Shoaib Mehedi'] ] ]
    array.forEach((firstArr) =>{
        firstArr.forEach((secondArr) => {
            secondArr.forEach((element) => {
                console.log(element);
            })
        })
    })
    
    // 正确示范
    const array = [ [ ['Shoaib Mehedi'] ] ]
    const getValuesOfNestedArray = (element) => {
        if(Array.isArray(element)){
            return getValuesOfNestedArray(element[0])
        }
        return element
    }
    getValuesOfNestedArray(array)
    

    [作者: 吴雄伟]

    评论

    这是对某人的一种人身攻击。注释有助于人们以后理解,也有助于其他程序员在同一个项目上工作。代码中的注释意味着您的代码可能不是不言自明的。这是 Jeff Atwood 关于撰写评论的名言。

    “虽然评论本身没有好坏之分,但它们经常被用作拐杖。您应该始终编写代码,就好像注释不存在一样。这迫使您以人类能想到的最简单、最简单、最自我记录的方式编写代码。” — 杰夫·阿特伍德

    注释应该是好的,但您的代码需要不言自明。

    避免大型函数

    当一个函数或一个类较大时,建议将其分成多个。这将使我们的代码更简单、干净、易于理解且可重用。 假设我们需要加减两个数字。我们可以用一个函数来完成。但好的做法是将它们分成两部分。当有单独的功能时,这将在整个应用程序中可重用。

    // 错误示范
    const addSub = (a,b) => {
        // 加法
        const addition = a+b
        // 减法
        const sub = a-b
        // 返回
        return `${addition}${sub}`
    }
    
    // 正确示范
    // 加法
    const add = (a,b) => {
        return a+b
    }
    // 减法
    const sub = (a,b) => {
        return a-b
    }
    

    代码重复

    重复代码是指在您的代码中多次重复的代码块。这意味着您的代码部分需要提取到一个函数中。 这是我们之前在第 2. 点深度嵌套中使用的示例。看第一部分:我们重复了三遍同样的事情。让一个单独的函数做同样的事情的解决方案是更好的解决方案;此外,这是可重复使用的。

    // 错误示范
    const array = [ [ ['Shoaib Mehedi'] ] ]
    array.forEach((firstArr) =>{
        firstArr.forEach((secondArr) => {
            secondArr.forEach((element) => {
                console.log(element);
            })
        })
    })
    
    // 正确示范
    const array = [ [ ['Shoaib Mehedi'] ] ]
    const getValuesOfNestedArray = (element) => {
        if(Array.isArray(element)){
            return getValuesOfNestedArray(element[0])
        }
        return element
    }
    getValuesOfNestedArray(array)
    

    变量命名

    驼峰式大小写是变量和函数以及其他标识符的命名标准。这意味着名称应该以小写字母开头,并且下一个单词的每个第一个字母都将大写。 函数和变量都必须遵循规则。

    let camelCase = ''
    const thisIsCamelCase = () => {
        //业务代码
    }
    

    有意义的名字

    有意义的名称是最重要的约定之一。始终为变量、函数和其他名称使用有意义的名称。选择一个能表达您的目的含义的名称。 如果我们需要一个函数来获取用户的银行信息,那么我们不能使用类似的名字 getUserInfo 。我们应该使用 getUserBankInfo 更具体。

    描述性胜于简洁

    尝试对任何命名使用细节。假设我们需要一个函数来查找使用手机的用户。在这里,我们可以使用有意义的名称,但如果有其他类似的功能,则出错的可能性很大。 我们必须使用一个详细的、有意义的名称来概括地表达含义。

    //通过手机号搜索用户
    //错误示范
    const searchUser = (phone) => {
    //业务代码
    }
    //正确示范
    const searchUserByPhoneNo = (phone) => {
    //业务代码
    }
    

    [作者: 吴雄伟]

    每个概念使用一致的动词

    这是重要的命名约定之一。如果我们需要一个 CRUD 函数,我们使用 create, get, 或 update 与名称。 如果我们需要从数据库中获取用户信息,那么函数的名称可以是 userInfo, user, 或 fetchUser,但这不是约定。我们应该使用 getUser.

    //好习惯
    function getUser(){ 
    // 做一些事情
    }
    

    使用名词作为类名并使用 Pascal 大小写

    类不拿东西;他们就是东西。类主要是某物的蓝图。不要在类名中使用动词。 此外,一个类应该包含 Pascal 大小写。Camel case 是用于对象的,所以如果你在 class 中使用 Camel case,这会不太清楚。

    //错误示范
    class MakeCar = {
        //...
    }
    //正确示范
    class Car = {
        //...
    }
    
    

    将常量值大写( SNAKE UPPER CASE )

    这是我们需要遵循的另一个约定。始终对常量使用完全大写的名称。 Snake 大写表示所有字母都大写,下划线将所有单词分开。

    const DAYS_IN_A_YEAR = 365;
    

    避免单字母变量名

    单字母变量使用起来非常非常糟糕。不要将其用于变量名。 但是在一个循环中,我们使用了一些带有字母的变量,使用起来是可以的。

    //错误示范
    const q = () => {
        //....
    }
    //正确示范
    const query = () => {
        //....
    }
    //这样也可以
    for(let i = 0;i < 10; i++){
        //...
    }
    

    结论 从长远来看,遵循这些约定将使您受益匪浅。当你跟着他们写代码时,不管谁也在用它,这个人会自己理解一切。个人和团队都需要干净的代码。 感谢您的阅读。祝你有美好的一天。

    [作者: 吴雄伟]

    7 条回复    2021-07-23 16:34:45 +08:00
    3dwelcome
        1
    3dwelcome  
       2021-07-23 10:42:04 +08:00   ❤️ 1
    实践了半天,最后发现,数据库里字段全用中文,JS 变量全用中文,代码最清晰。

    连注释都不需要加。
    heike1235
        2
    heike1235  
    OP
       2021-07-23 13:33:11 +08:00
    @3dwelcome 要么老兄用的是易语言,要么老兄是在凡尔赛。
    3dwelcome
        3
    3dwelcome  
       2021-07-23 14:38:19 +08:00
    @heike1235 不啊,在业务为向导的公司里,数据库字段用中文来起名字,这个没什么异议吧?

    那么 JS 前端操作后端返回的字段,也用中文变量一一对应,那也是顺理成章的事情。

    JS 天然就支持中文变量,用一下不挺好的。又不是写个 for 循环也用中文。
    Vegetable
        4
    Vegetable  
       2021-07-23 14:42:36 +08:00
    SNAKE UPPER CASE

    const DAYS_IN_A_YEAR = 365;

    /沉思
    Vegetable
        5
    Vegetable  
       2021-07-23 14:46:25 +08:00   ❤️ 1
    为什么 Magic number 要和常量分开讨论...

    实际上这些规则并不是核心,真正让代码清晰的核心要素是,自己脑子清楚
    Samuelcc
        6
    Samuelcc  
       2021-07-23 16:21:23 +08:00 via Android
    对于 oo 语言来说,用一些经典的设计模式也可以让读者快速领悟代码意图。
    IgniteWhite
        7
    IgniteWhite  
       2021-07-23 16:34:45 +08:00 via iPhone
    camel case 和 snake case,或者说 naming,对于不同语言有不同的建议用法,参见 google style guide 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1205 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:35 · PVG 02:35 · LAX 10:35 · JFK 13:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.