前端开发规范(代码区域规范)

Posted 2021-08-04 AKSYA

在日常开发中，如果没有代码功能区域划分将会是一件非常糟糕的事情。规范化代码区域的好处在于每个代码区域的功能清晰明确，我们在查找代码的时候也位置更加确定，无需要慢慢找，而是通过区域缩小在一个区域内,搭档之间也更加友好。

下面以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)部分代码，是否感觉每个功能区域都清晰

PS：如果对你有所收获点击关注不迷路、谢谢