小知识,大挑战,前端统一规范

195 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

公司由于之前的前端未进行规范的统一,项目又比较多,导致前端风格掺杂不一,苦不堪言,这事也是吐槽了蛮久

有时候呢项目急了还会招外包,甚至后端也会加入进来,这坑啊是越挖越深

最近呢公司进行了前端项目规范统一,个人是比较赞成的,并在会上提出了几点规范建议供大家参考

目前在规范初期,并且每个公司的规范不一样,因此这里只提供思路和方向,可以根据这个思路去布置或者去查看是否可扩展,初期不建议太过复杂

命名规范
  1. class
  2. 组件名
  3. 变量名
  4. 函数名
注释

单行、多行、JS规范、CSS规范等,可参照成熟的注释文档模型

检查代码规范
  1. eslint等代码检测工具
  2. 利用vscode的插件进行配置,可以自动格式化代码,十分方便
  3. 初期可使用人性化的、简单的、可修改的配置
技术选型
  1. 初步筛选,剔除掉淘汰的,不稳定的
  2. 根据公司人员配置、水平、产品需求等,进行二次筛选
  3. 对实际应用场景进行domo尝试,例如地图一类
  4. 预测未来可能出现的业务升级类的场景,因此应该是可迭代的
git提交规范
  1. 可读的
  2. 完整的
  3. 一致的
代码规范
  1. html规范、css规范(LESS/SASS等)、js规范等
  2. 缩进、分号、空格、换行等
  3. 可读的
目录
  1. 目录命名规范
  2. 层级清晰且统一
  3. 完整的,例如公共组件、静态资源、业务组件等
配置
  1. 还有一些按需加载等,我个人建议是采用按需加载,而且要统一新建一个项目配置进行整体拆分导入
  2. webpack配置:
  3. 公司采用微服务,因此做代理那块,会跟后端进行统一,尽量把代理的api减少到最少,并且在生产环境可以配置
  4. 一些性能上的配置,例如Tree Shaking、提取公共代码,进行splitChunks