在日常开发中,如果没有代码功能区域划分将会是一件非常糟糕的事情。前端培训规范化代码区域的好处在于每个代码区域的功能清晰明确,我们在查找代码的时候也位置更加确定,无需要慢慢找,而是通过区域缩小在一个区域内,搭档之间也更加友好。
下面以React为例子 (这里只是略举了常规的区域,你可以根据自己的需求添加自定义区域名词)
class AkSya extends React.Component<props,state>{
constructor(props: Props) {
super(props);
}
// *********************
// Default Function
// *********************
public updateLocalState() {
// ...
}
public updateGlobalState() {
// ...
}
// *********************
// Life Cycle Function
// *********************
async componentDidMount() {
// ...
}
async componentWillUnmount() {
// ...
}
// *********************
// Service Function
// *********************
async getUserName() {
// ...
}
async updateUserName() {
// ...
}
// *********************
// View
// *********************
render() {
return (
<div>
// ...
</div>
)
}
}
// *********************
// Types
// *********************
type Props = {
// ...
};
type State = {
// ...
};
下面是我写的Vscode插件(file-teleport)部分代码,是否感觉每个功能区域都清晰
提示: 常规的代码区域注释,我们可以使用VScode的代码片段提前制定好一些模板,就不需要每次都要重复写。
文章来源AKSYA