命名规范：

语义化！！！

命名规范，文件夹、变量、url等的命名，首先语义化最好一眼能看出来，然后确保命名规范：
a. 常量：小写开头驼峰
b. 文件夹：小写开头驼峰
c. url、路由：小写中划线或下划线
d. interface\enum：大写开头驼峰；
e. 文件中引入组件：大写开头驼峰

文件夹命名：

推荐：文件夹命名都是 大驼峰 + 单数

文件命名：

推荐：文件命名都是 小驼峰，单复数看情形。

方法/变量命名：

1.1 变量

命名方法：小驼峰式命名法。

命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)

命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

eg:

// 好的命名方式 let maxCount = 10; let tableTitle = 'LoginTable';

// 不好的命名方式 let setCount = 10; let getTitle = 'LoginTable';

1.2 常量

命名方法：名称全部大写。

命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。

eg:

const MAX_COUNT = 10;

const URL = 'www.foreverz.com';

1.3 函数

命名方法：小驼峰式命名法。

命名规范：前缀应当为动词。

命名建议：可使用常见动词约定

动词 / 前缀	含义	返回值
can	判断是否可执行某个动作(权限)	函数返回一个布尔值。true：可执行；false：不可执行
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象
load	加载某些数据	无返回值或者返回是否加载完成的结果
hand / click	手动点击
handle	处理返回
chose	选择
init	加载

eg:

// 是否可阅读 function canRead(): boolean { return true; }

// 获取名称 function getName(): string { return this.name; }

1.4 类 & 构造函数

命名方法：大驼峰式命名法，首字母大写。

命名规范：前缀为名称。

eg:

class Person {

    public name: string;

    constructor(name) {

        this.name = name;

    }

}

const person = new Person('mevyn');

1.5 类的成员

类的成员包含：

公共属性和方法：跟变量和函数的命名一样。
私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。

eg:

class Person { private _name: string; constructor() { }

// 公共方法 getName() { return this._name; }

// 公共方法 setName(name) { this._name = name; } } const person = new Person(); person.setName('mervyn'); person.getName(); // ->mervyn

文件分布：

文件处理：

src下的：

根据项目而定

components 展示组件库
utils 工具库

states 状态
apis API接口

features 特征（展示页面组件库）
dict 固定数据

configs 配置环境

目录结构：

存在差异 copy的

    Project/App

    ├── index.js # 入口文件

    ├── router.js # App路由

    ├── store.js # 生成Store

    ├── <manifest.json> # App的相关配置

    ├── components # 展示型组件

    │ └── Header # 以<Header>组件为例

    │ ├── index.js

    │ ├── index.less # 样式文件

    │ └── __tests__ # 测试

    │ ├── __snapshots__ # 快照测试文件夹，自动生成

    │ └── index.test.js # 展示型组件测试

    ├── ui # 自定义的基础ui组件

    │ └── Button # 以<Button>组件为例

    │ ├── index.js

    │ ├── index.less

    │ └── __tests__

    │ ├── __snapshots__

    │ └── index.test.js

    ├── states # 状态管理相关，主要是Redux

    │ ├── containers # 容器型组件

    │ │ ├── Header.js

    │ │ ├── index.js # 将所有container聚合

    │ │ └── __tests__

    │ │ └── Header.test.js

    │ ├── middlewares # 中间件

    │ │ ├── middlewareOne.js

    │ │ ├── middlewareTwo.js

    │ │ ├── index.js # 将所有中间件聚合

    │ │ └── __tests__

    │ │ ├── middlewareOne.test.js

    │ │ └── middlewareTwo.test.js

    │ ├── selectors

    │ │ ├── selectorOne.js

    │ │ ├── selectorTwo.js

    │ │ ├── index.js # 将所有异步selector聚合

    │ │ └── __tests__

    │ │ ├── selectorOne.test.js

    │ │ └── selectorTwo.test.js

    │ ├── actions

    │ │ ├── sync # 同步action

    │ │ │ ├── actionOne.js

    │ │ │ ├── actionTwo.js

    │ │ │ ├── index.js # 将所有同步action聚合

    │ │ │ └── __tests__

    │ │ │ ├── actionOne.test.js

    │ │ │ └── actionTwo.test.js

    │ │ └── async # 异步action

    │ │ ├── actionOne.js

    │ │ ├── actionTwo.js

    │ │ ├── index.js # 将所有异步action聚合

    │ │ └── __tests__

    │ │ ├── actionOne.test.js

    │ │ └── actionTwo.test.js

    │ ├── reducers

    │ │ ├── reducerOne.js

    │ │ ├── reducerTwo.js

    │ │ ├── index.js # 将所有异步reducer聚合

    │ │ └── __tests__

    │ │ ├── reducerOne.test.js

    │ │ └── reducerTwo.test.js

    │ ├── types

    │ │ ├── typeOne.js

    │ │ ├── typeTwo.js

    │ │ ├── index.js # 将所有异步type聚合

    │ │ └── __tests__

    │ │ ├── typeOne.test.js

    │ │ └── typeTwo.test.js

    ├── apis

    │ ├── apiOne.js

    │ ├── apiTwo.js

    │ ├── index.js # 将所有api聚合

    │ └── __tests__

    │ ├── apiOne.test.js

    │ └── apiTwo.test.js

    └── utils # 一些公共的工具类文件

    ├── utilOne.js

    ├── utilTwo.js

    ├── index.js # 将所有util聚合

    └── __tests__

    ├── utilOne.test.js

    └── utilTwo.test.js

命名规范与文件分布