提升代码质量篇

如何写出易于维护的代码？

• 有统一的代码风格(Code Style)
• 合理的代码设计。
• 易于管理的项目版本号。
• 清晰明了的提交信息。

HTML

1. HTML 是要满足W3C标准
2. 选择语义化(Semantic)的HTML标签

CSS

1. CSS的类名用BEM命名法
   BEM
2. 语义化CSS的类名

• 布局: header(头部), footer(尾部), main(主栏),side(侧栏), wrap(盒容器), item(条目)。
• 模块: nav(导航), subnav(子导航), breadcrumb(面包屑), menu(菜单), tab(选项卡), title(标题), list(列表), content(内容), table(表格), form(表单), hot(热点), top(排行), login(登录), log(标志), search(搜索), slide(幻灯), tip(提示), help(帮助), news(新闻), download(下载), regist(注册), vote(投票), copyright(版权), result(结果), button(按钮), input(输入), avatar(用户头像), badge(徽章), tag(标签)。
• 状态: collapsed(收拢的), expanded(展开的), current(当前), selected(选中的), active(活跃的), enabled(可用), disabled(不可用)。
• ** 根据模块的功能来命名，而不是根据样式来命名。**

3. CSS属性的书写顺序

• 先写布局类的，再写细节类；从外到内，从上到下，从左到右

4. 其他

• 类名要优先用BEM命名

5. JavaScript
   JavaScript 标准代码风格(JavaScript Standard Style)

合理的代码设计

1. 单一职责。一个函数只做一件事
2. 减少重复代码

• 同样的代码出现了三次，就应该考虑去消除这些重复代码。

3. 高内聚低耦合
   高内聚指模块内的代码是紧密联系的；
   低耦合指模块间的依赖尽可能低。
4. 约定编程
5. 健壮性
   健壮的代码，就是考虑的全面
   约定编程－－－指通过命名规则之类的约束来减少程序中的配置，旨在减少软件开发人员需要做决定的数量，获得简单的好处，而又不失灵活性

如何提升设计代码的能力

• 多读优秀源码
• 设计模式代表了最佳的实践
• 多写（用心的写。同时经常回顾自己过去写的代码）

易于管理的项目版本号

语义化版本规范让项目版本号变得易于管理

• 主版本号：当你做了不兼容的 API 修改，
• 次版本号：当你做了向下兼容的功能性新增
• 修订号：当你做了向下兼容的问题修正。

清晰明了的提交信息

提交类型: 任务id或备注
提交类型：

• feature: 新功能。
• fix: 改bug。
• perf: 优化。 如： 代码写法优化，性能优化等。
• ver: 版本升级。
• doc:添加文档。
• test: 添加测试。

代码评审(Code Reveiw)

代码评审是指通过阅读代码来检查源代码与编码标准的符合性以及代码质量的活动。代码评审可以是一个人 Review 其他人的代码，也可以是一群人一起 Review 代码

推荐阅读

1. 《代码整洁之道》
2. 《重构》
3. if 我是前端团队 Leader，怎么制定前端协作规范?

工具

• Phabricator
• Sonar

参考

Web前端进阶之路: 提升代码质量篇