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

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

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