创业6+1+2-代码规范
| 这个作业属于哪个课程 | 2021春软件工程实践|W班(福州大学) |
|---|---|
| 这个作业要求在哪里 | 团队作业六——beta冲刺+事后诸葛亮 |
| 团队名称 | 创业6+1+2 |
| 其他参考文献 | 《构建之法》 |
一、代码规范
前端react代码规范
1、基础规则
- 一个文件声明一个组件： 尽管可以在一个文件中声明多个 React 组件，但是最好不要这样做；推荐一个文件声明一个 React 组件，并只导出一个组件；
- 使用 JSX 表达式： 不要使用 React.createElement 的写法；
- 函数组件和 class 类组件的使用场景： 如果定义的组件不需要 props 和 state ，建议将组件定义成函数组件，否则定义成 class 类组件。
2、组件声明
（1）组件名称和定义该组件的文件名称建议要保持一致；
推荐：
import Footer from './Footer';
不推荐：
import Footer from './Footer/footer';
（2）不要使用 displayName 属性来定义组件的名称，应该在 class 或者 function 关键字后面直接声明组件的名称。
推荐：
export default class MyComponent extends React.Component{
}
不推荐：
export default React.Component({
displayName: 'MyComponent',
});
** 3、React 中的命名**
- 组件名称： 推荐使用大驼峰命名;
- 属性名称： React DOM 使用小驼峰命令来定义属性的名称，而不使用 HTML 属性名称的命名约定；
- style 样式属性： 采用下划线命名属性的 JavaScript 对象；
推荐：
// 组件名称
MyComponent
// 属性名称
onClick
// 样式属性
background_color
4、JSX 写法注意
4.1、标签
（1）当标签没有子元素的时候，始终使用自闭合的标签 。
推荐：
<Component />
不推荐：
<Component></Component>
（2）如果标签有多行属性，关闭标签要另起一行 。
推荐：
<Component
bar="bar"
baz="baz"
/>
不推荐：
<Component
bar="bar"
baz="baz" />
（3）在自闭标签之前留一个空格。
推荐：
<Foo />
不推荐:
<Foo/>
<Foo />
<Foo
/>
（4）当组件跨行时，要用括号包裹 JSX 标签。
推荐：
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
不推荐：
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>;
}
4.2、对齐
JSX 语法使用下列的对齐方式 ：
推荐：
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
// 如果组件的属性可以放在一行（一个属性时）就保持在当前一行中
<Foo bar="bar" />
// 多行属性采用缩进
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
<Quux />
</Foo>
不推荐：
<Foo superLongParam="bar"
anotherSuperLongParam="baz" />
4.3、引号
JSX 的属性都采用双引号，其他的 JS 都使用单引号 ，因为 JSX 属性 不能包含转义的引号, 所以当输入 "don't" 这类的缩写的时候用双引号会更方便。
推荐：
<Foo bar="bar" />
<Foo style={{ left: '20px' }} />
不推荐：
<Foo bar='bar' />
<Foo style={{ left: "20px" }} />
5、样式写法
React 中样式可以使用 style 行内样式，也可以使用 className 属性来引用外部 CSS 样式表中定义的 CSS 类，我们推荐使用 className 来定义样式。
6、defaultProps 使用静态属性定义
defaultProps 推荐使用静态属性定义，不推荐在 class 外进行定义。
推荐：
class Example extends React.Component {
static defaultProps = {
name: 'stranger'
}
render() {
// ...
}
}
不推荐：
class Example extends React.Component {
render() {
// ...
}
}
Example.propTypes = {
name: PropTypes.string
};
7、key 属性设置
key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key，但是要主要如果列表项目的顺序可能会变化，如果使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。
推荐：
{todos.map(todo => (
<Todo
{...todo}
key={todo.id}
/>
))}
不推荐：
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
8、为组件绑定事件处理器
React 为组件绑定事件处理器提供 4 种方法，有 public class fields 语法、构造函数中进行绑定、在回调中使用箭头函数、使用 Function.prototype.bind 进行绑定，我们推荐使用 public class fields 语法，在不满足需求情况下使用箭头函数的写法（传递参数给事件处理器）。
推荐：
handleClick = () => {
console.log('this is:', this);
}
<button onClick={this.handleClick}> Click me </button>
不推荐：
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
<button onClick={this.handleClick}> Click me </button>
9、State
除了 state 初始化外，其它地方修改 state，需要使用 setState( ) 方法，否则如果直接赋值，则不会重新渲染组件。
推荐：
this.setState({comment: 'Hello'});
不推荐：
this.state.comment = 'hello';
10、组件的代码顺序
组件应该有严格的代码顺序，这样有利于代码维护，我们推荐每个组件中的代码顺序一致性。
class Example extends Component {
// 静态属性
static defaultProps = {}
// 构造函数
constructor(props) {
super(props);
this.state={}
}
// 声明周期钩子函数
// 按照它们执行的顺序
// 1. componentWillMount
// 2. componentWillReceiveProps
// 3. shouldComponentUpdate
// 4. componentDidMount
// 5. componentDidUpdate
// 6. componentWillUnmount
componentDidMount() { ... }
// 事件函数/普通函数
handleClick = (e) => { ... }
// 最后，render 方法
render() { ... }
}
11、使用高阶组件
使用高阶组件解决横切关注点问题，而不是使用 mixins ，mixins 导致的相关问题可以参照文档；
12、避免不必要 render 的写法
shouldComponentUpdate 钩子函数和 React.PureComponent 类都是用来当 state 和 props 变化时，避免不必要的 render 的方法。shouldComponentUpdate 钩子函数需要自己手动实现浅比较的逻辑，React.PureComponent 类则默认对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。推荐使用 React.PureComponent 避免不要的 render。
13、状态提升
如果多个组件需要反映相同的变化数据，建议将共享状态提升到最近的共同父组件中去；从而依靠自上而下的数据流，而不是尝试在不同组件间同步 state。
14、Refs 写法
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素 。我们推荐使用 createRef API 的方式 或者 回调函数的方式使用 Refs ，而不是使用 this.refs.textInput 这种过时的方式访问 refs ，因为它存在一些 问题。
15、AJAX 发起请求的时机
推荐在 componentDidMount这个生命周期函数中发起 AJAX 请求。这样做你可以拿到 AJAX 请求返回的数据并通过 setState 来更新组件。
后端代码规范
1、缩进
程序块采用缩进风格编写，缩进的空格数为4个。
for(int i=0;i<10;i++){
System.out.println("i的值为" + i);
}
2、变量命名
采用驼峰命名法,函数名第一个逻辑断点首字母用小写字母来标记，其余逻辑断点首字母都用大写字母来标记。
int stuNum;
3、每行最多字符数
1、每行字符数不应超过80。
2、若某行包含较长URL，则该行字符数可以超过80。
4、函数、类命名
1、函数命名采用驼峰命名法,函数名第一个逻辑断点首字母用小写字母来标记，其余逻辑断点首字母都用大写字母来标记。
void printStuNum();
2、类命名采用驼峰命名法,函数名逻辑断点首字母都用大写字母来标记。
class StudentInfo{};
5、常量
常量命名全部使用大写字母。
public static final double PI = 3.14;
6、空行规则
相对独立的程序块之间、变量说明之后必须加空行。
说明 ：
以下情况应该是用空行分开：
1）函数之间应该用空行分开；
2）变量声明应尽可能靠近第一次使用处，避免一次性声明一组没有马上使用的变量；
3）用空行将代码按照逻辑片断划分；
4）每个类声明之后应该加入空格同其他代码分开。
if (!isInfoValid(info))
{
... // program code
}
System.out.println("test");
7、注释规则
1、注释和代码不出现同一行内。
2、注释放在要注释代码块的上方。
/**
* 类的描述
* @author Administrator
* @Time 2012-11-2014:49:01
*/
public classTest extends Button {
//i的描述
int i = 0;
}
8、操作符前后规则
1、关键字之后要留空格。象const、virtual、inline、case 等关键字之后至少要留一个空格，否则无法辨析关键字。象if、for、while 等关键字之后应留一个空格再跟左括号‘（ ’， 以突出关键字。
2、函数名之后不要留空格， 紧跟左括号’(’ ， 以与关键字区别。
3、‘( ’ 向后紧跟，‘ )’、‘ ，’、‘ ;’ 向前紧跟， 紧跟处不留空格。
4、‘ ,’ 之后要留空格， 如Function(x, y, z)。如果‘ ;’ 不是一行的结束符号，其后也要留空格，如for (initialization; condition; update)。
5、值操作符、比较操作符、算术操作符、逻辑操作符、位域操作符，如“ =”、“ +=”“ >=”、“ <=”、“ +”、“ *”、“ %”、“ &&”、“ ||”、“ <<” 、“ ^” 等二元操作符的前后应当加空格。
6、一元操作符如“ !”、“ ~”、“ ++”、“ --”、“ &”（ 地址运算符） 等前后不加空格。
7、象“［ ］”、“ .”、“ ->” 这类操作符前后不加空格。
void foo()
{
…// program code
}
if (i == 0)
{
…// program code
}
foo->bar, foo.bar, foo[bar]
i++, !i, &i
i += 9, a * b
9、其他规则
1、程序块的分界符（如 C/C++语言的大括号‘{’和‘}’）应各独占一行并且位于同一列，同时与引用它们的语句左对齐。在函数体的开始、类的定义、结构的定义、枚举的定义以及 if、for、do、while、switch、case 语句中的程序都要采用如上的缩进方式。
for (...){
... // program code
}
if (...){
... // program code
}
void example_fun( void ){
... // program code
}
