命名技巧心得

宗旨

一个命名提供的信息量越多，就是越好的命名。

最容易的事

声明一个变量，是编程里最简单的事了。

在学习编程之初，先要会的就是声明一个变量。

int a = 1;
复制代码

最困难的事

命名又是咱们工做中最有难度的事。

随着咱们技术能力的提升，作的项目也愈来愈大，业务愈来愈复杂。命名稍微不注意，就变成一堆无心义或者误导咱们的字符串。

之因此说命名困难，个人想法是命名不单是想一个单词就ok。须要更多的理解业务，理解咱们使用的技术，才能作到最贴切的命名。

信息量

回到咱们的宗旨，来看看命名都会给咱们提供哪些信息量。

例1

var username = '卡哇伊';
复制代码

这段代码中有个变量username，它为咱们提供了一个信息。

1. 这是一个表明用户名的字段。

例2

var _username = '卡哇伊';
复制代码

这段代码是有个变量_username，它为咱们提供了两个信息。

1. 这是一个表明用户名的字段。
2. 这是一个私有变量。咱们把下划线开头的变量，称为私有变量。只有类内部能够访问。

例子3

class User {
    constructor() {
        this._name = '卡哇伊';
    }
    
    getName() {
        return this._name;
    }
    
    setName(val) {
        this._name = val;
    }
}
复制代码

User命名的信息

1. 这是一个类。
2. 用户的类。
3. 为内部的变量提供上下文，因此用户名能够只写成_name，表明User的_name。若是还须要一个用户年龄的字段，能够只写成_age。

getName的信息

1. 这是一个方法，由动词+名词组成。咱们用动词或者动词+名词命名一个方法。由于方法自己就表明某种动做，因此这样命名很贴切。而且和类的字段（名词）作了有效的区分。这样你在其余地方使用user.get***。你就知道这是调用了user的一个方法。user.hand就是使用了user的一个字段。
2. 拿到用户名。

读到这里，我想你大概知道我要说的什么意思了。咱们经过命名的格式，用开头有下划线表明私有变量，用首字母大写表明是一个类。区分不一样类型的成员，达到让代码拥有更多信息量的目的。

那么，重点就是掌握一套这样的命名规则，并严格贯彻这套规则。

工做中的实践

这里拿React写一个页面做为例子 首先我要新建一个Pages文件夹，而后新建一个ProductListPage文件夹，在里面创建index.js文件，代码以下：

class ProductListPage extends Component {

    constructor(props) {
        this.state = {
            productList:[],
            categroyOptions:[],
        }
    }
    
    componentDidMount() { ... }
    
    
    async requestProductList() { ... }
    
    async requestCategroyOptions() { ... }
    
    
    renderProductList() {
        const { productList } = this.state;
        
        return productList.map(product => { ... });
    }
    
    renderHeader() { ... }

    render() { ... }
}
复制代码

Pages文件夹：

1. 页面文件夹，为其下的文件提供上下文，我是一个放置页面文件的文件夹。
2. 代表我在项目的的位置，项目中还能够定义其余类别的文件夹，components文件夹，reducers文件夹，共同造成项目结构。

ProductListPage：

1. ProductListPage表明我要写一个产品列表相关的页面。
2. Page尾缀与Pages文件夹呼应。在项目中有特殊地位的文件，加尾缀是颇有用处的，好比你的代码中出现一个productListReducer变量，你就知道它来自Redcer这个特定模块。

componentDidMount:

1. 这里着重说一下react的声明周期方法，我认为这个命名是比vue的略好一点的。==由于越是系统级别的命名，越是要详细一点==。由于系统级别的方法，用的场景多，重名的概率就大。好比vue的created生命周期方法，一个新手不知道这个方法，在写一个私有方法的时候，刚好也是建立某事物的含义，就用了creacted命名，就形成了重名。
2. componentDidMount的component又与组件呼应。明确的告诉咱们这是组件的mount。
3. 引申出一条规则是：越局部的变量能够越短小。它能够充分的利用上下文解释本身。

productList：

1. 这个变量与页面名字同名，我喜欢用这种方式告诉本身，这个变量是这个页面的主角。另外List尾缀也有强调这是个重要数据的意思，配角的列表数据我都喜欢加s，好比categroyOptions。这样利用List和s区分主次关系。
2. 在列表变量进行循环的时候，循环体中就能够用product

requestProductList：

1. 请求产品列表。
2. request是一个关键动词，我赋予了它特别的含义，就是须要稍微花点时间才能取到的值，与get动词对应。

renderProductList：

1. 渲染产品列表
2. render是一个关键动词，是react的拥有特殊含义的词，渲染页面。

嗯，每一个命名都满满的信息量，咱们就获得了易读又工整的代码。

规则的破坏

值得注意的是，命名是件须要自律和习惯的事。好比某一天增长了一个产品包装页，我写成了goodsPackingPage。这样‘产品’这个有特殊业务含义的字段在项目中有了两个命名，product和goods，这就形成了必定的混乱。

我见过这样一个单文件，有2000多行的代码，一样表明品类，结果有三个单词type,catagory,class。起初我觉得是不一样的意思，这就形成了阅读的困难。你的代码越复杂，命名不当形成的问题越严重。

因此咱们在写代码时，创建的命名秩序，就不能破坏它。一旦破坏，本来能够传达的信息，便再也不可信。好比新写的私有字段不如下划线开头。那么之后在函数中看到变量，就不能根据是否已下划线开头，判断它是不是私有变量了。

结束语

判断一个命名是否糟糕，就是看它有没有传达信息。更糟糕的是，它传达错误的信息。

好的命名就是能传达更多信息。依靠的是你创建的命名秩序。

若是你对整洁代码颇有兴趣。推荐《代码整洁之道》这本书。里面有更多详细的关于命名的技巧知识。