分享自定义前端web开发规范(命名、文本、开发、html、css、js、vue)

4,018 阅读2分钟

介绍

  • 本规范借助vuepress框架搭建而成。
  • 具体规则查看github项目,本文只简单描述。
  • 项目也仅是草案,仅供参考,欢迎建议。
  • github链接:github.com/zhuangweizh…

为什么要规范

入坑多年,感受深入。每个人有每个人的想法,每个人也有每个人的习惯。在一个没有主导人的团队,往往就是内心互-相吐槽的对方的代码,然后自己也写着让人吐槽的代码。

似乎每个人都是对的,每个人都有充足的理由。

再慢慢,项目越来越"模块化"。我的模块,只有我能看得懂!

所以,为什么要规范?个人的理解就是:

一起定下一个规矩,团队(或多数人,或主导人)达成共识后,一起执行。后续,不要再出现你的个人习惯!不要再搞一套骚气的写法!也不需要再跟其他人解释你的写法多么优雅!你只需要,依葫芦画瓢!

如命名,驼峰跟下划线分割,他们永远都没有绝对的利与弊。团队定义好,然后执行即可。

规范的定义

如何定义好,才是关键点。

个人觉得流程应该是这样的:

  • 1)参考百家之长,阿里规范还是腾讯规范,拷贝起来。
  • 2)某位负责人,或某位不懂事小伙伴,整理成自己的初稿(吐槽版)
  • 3)吐槽版开始进行团队的吐槽。针对各个点利弊讨论。
  • 4)初稿的整理。然后方案的实践(如何进行约束,检测等)
  • 5)终极版本(有结论,且实践没发现问题后,后不建议再多次修改)
  • 6)代码review
  • 7)吐槽别人没有使用规范处理的代码

规范的目的

借鉴baldwin的一文的说法(juejin.cn/post/684490…

  • 规范的代码可以促进团队合作;
  • 规范的代码可以减少bug处理;
  • 规范的代码可以降低维护成本;
  • 规范的代码有助于代码审查;
  • 养成代码规范的习惯,有助于程序员自身的成长

本文分享的规范

本文分享的规范,仅为草稿,大概内容:

  • 1)命名规范,包括基本原则,目录,变量,样式等命名规范
  • 2)文本规范,包括缩进,引号,间隔等定义
  • 3)开发规范,包括原则,ide,插件等定义。
  • 4)html规范,包括基本语法,属性顺序等。
  • 5)css规范,包括基本语法,scss,bem规范,院子类等规范。
  • 6)js规范,包括基本准则,函数方法,循环方法等定义。
  • 7)vue规范,包括基本原则,生命周期,缓存方案等规范。

image.png

欢迎借鉴,临时草案也欢迎纠正与提出不足。