前端开发代码区域规范分享

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

下面以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