资深前端开发人员倾心总结的规范建议，值得mark

以下主要针对Angular，其他框架也可以借鉴。
 

• 做项目时，利用cli创建一个新的，干净的项目，而不是从另外一个项目复制粘贴。即便要复制粘贴，要确保项目移除不必须要的东西。

• 如果需要使用moment与lodash，

moment用dayjs替换或者使用angular自带的datepipe，lodash注意导入方式。这样可以优化打包（tree shaking）

• 时刻保持最新，如果项目还在开发阶段，保持依赖包保持最新状态。（可以定一个周期做一次）

• 路由一定使用懒加载，常用页面可以eager loading

• 使用web-analyzer检测打包后的各个文件大小，便于查找，优化过大的包。

• 及时重构代码，多利用Typscript的特性，例如继承，类型定义等

• 使用强类型而不是弱类型（js的var），尽量少用any（有的时候需要）

• 标注参数以及返回值类型（如下图）
• 

• 使用#region折叠功能，一个ts代码中可以分几个部分
• 

• 代码尽量有自我解释的功能

比如定义一个函数，函数名不要写成a。

1. 模块化开发

Card collection是一个模块，其下有自身需要的各种components，services，routes，models等

• 学会使用简单的rxjs功能

• 学会参考其他的template

可以预览，我很多东西都是从这些template学到的。

• Css 命名 带项目或者公司前缀缩写，以便区分这个css是UI库的还是自己写的。

比如我用的UI库是primeng，它的样式都带有前缀p-，我们自己写的可以弄成
.nv-header {}

• 推荐使用css 的grid + flex布局，拒绝display: float

• 尽可能让一些东西变成可配置项（比如颜色，倒计时秒数等），这样方便维护以及扩展。（参考另外一个文档 – config.json）

• 尽可能使用Angular中的Onpush策略来优化性能，不需要重复检测的就不要检测。对于一般小项目可能没有什么很大的提升，但对于大型项目是有必要的。我觉得不论什么项目都可以加上这个策略

• 不需要Angular进行变化检测的，还可以放入Ngzone中去执行，例如，记录鼠标移动的坐标。如果不使用Ngzone，那么鼠标移动一下可能会执行几十次的变化检测，这是没有必要的。

• 尽可能为一些元素加上动画，这样体验更好。（尤其是*ngif处理的元素）

• Angular中的form表单的input或者textare 类型的组件，需要使用trim，去掉前后空格，可以利用directive实现。表单中第一项如果是input或者textare，应该自动foucs，也可以利用directive实现

• 代码使用代码检查工具Eslint，可以自己配置一套代码规范。