前言
有研究表明，软件组织有 60%的时间花在维护上，40%的时间花在开发上。所以代码的可维护性是非常重要的。本文是关于提高前端代码可维护性的一些基础方案，里面掺杂着一些个人理解，有不对的地方欢迎大家指正，我会及时进行修改。
1. 统一风格（Eslint)
Eslint 的好处：
• 降低低级 bug（例如拼写问题）出现的概率； • 增加代码的可维护性，可阅读性； • 硬性统一代码风格，团队协作起来时更轻松；
VsCode 插件：
• Prettier - Code formatter Eslint 标准格式化 js 类型文件 • Beautify css/sass/scss/less 格式化 Css 类型文件
2. 目录结构
大部分情况下你的目录结构组织得好，你的可维护性就已经及格了，而一个好的目录结构应该是可以自解释的。这步各种脚手架也帮我们做好了。所以现在进行开发是很方便的，我们只需按照脚手架模板示例管理你的目录结构。尽量避免出现一个文件夹里同时放多个 jsx 的情况
3. 注释
• page 文件夹下页面顶部加注释，标明是什么组件或什么页面，以免目录结构混乱，找不到的情况 • 有语义化命名和 ts 时，避免无用注释，注释可加在较复杂逻辑上或你认为需要加的地方 • 不要为了注释而注释，多余的注释等价于冗余的代码 • 注释的目的是：提高代码的可读性，从而提高代码的可维护性。
4. 命名风格
• 语义化命名 • 禁止使用拼音 • 使用小驼峰命名。 VsCode插件： Code Spell Checker.
5. 类型
• 推荐使用 TypeScript • 目的是为了增加代码可维护性，尽量避免定义类型为 any
6. 组件
• 有相似性的地方尽可能写成组件 • 分清业务组件和页面组件
7. 写法
• 关于组件： 刚开始可采用尽可能拆分组件的原则，可是我们要避免钻牛脚尖，不是拆的细就好复用，我们要考虑代码是否真的有被复用，是否真的提高了代码的可读性？实际上，在业务代码开发过程中，很多时候过度封装反倒会提高复杂度降低可维护性，所以我们要自己提升经验把握好度，不要搞复杂了。 • 关于 Scss： scss 是有层级关系的，这种层级关系就提高了代码的可维护性，所以不要把 scss 写成 css,否则这样就失去了它的意义。其次用 scss 可以提取公共变量，这里就涉及到了主题概念，比如项目中的一些公共字体，公共颜色和背景颜色可以提取出来放到项目的 global.scss 文件里，然后在页面级的 scss文件里面引入这些变量，这就可以达到一键更换主题的效果
$text-color-chart: #999999;
$text-font-chart: 11px;
$text-color-List: #1f1f1f;
$text-font-List: 16px;
8. 性能优化
性能提升体验，大家最好还是能够养成编写高性能代码的习惯 • hooks 函数组件代替类组件 • 避免重复渲染 （React.memo) • 考虑兼容性 • 采用发布订阅模式避免多层级的 props 传递嵌套太深，页面级采用 useContext 配合 useReducer,全局采用 redux 或脚手架自带全局状态管理 • 常量提到全局定义，防止随组件渲染而重新创建，方法亦类似 • 公共方法和变量定义 const 声明，非公共的可避免无用 const 声明
之后会专门针对提高性能方面再写一篇文章。
愿你也能如隐官陈十一，不忘初心，心向阳光
