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

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

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