前端开发规范

前端编码规范网址

• 京东凹凸实验室前端编码规范(基于 W3C、苹果开发者等官方文档)

网址： https://guide.aotu.io/index.html (opens new window)

• TGideas 腾讯游戏官方设计团队规范文档

网址：https://tgideas.qq.com/doc/index.html (opens new window)

• 腾讯 Code Guide by @AlloyTeam

网址：http://alloyteam.github.io/CodeGuide/ (opens new window)

• 网易前端编码规范

网址：http://nec.netease.com/standard (opens new window)

• 百度(FEX team web 前端研发部)前端规范

网址：https://github.com/fex-team/styleguide (opens new window)

• 百度 EFE team 编码规范

网址： https://github.com/ecomfe/spec (opens new window)

• 非官方阿里前端规范

网址：https://w3ctim.com/post/1d821dd8 (opens new window)

• Isobar 公司的创意技术部（前端工程）前端编码规范

网址: http://coderlmn.github.io/code-standards/#_accessibility (opens new window)

• 极客学院-前端代码规范

网址: https://wiki.jikexueyuan.com/project/web-development/basic-principle.html (opens new window)

• Bootstrap HTML 和 CSS 规范 codeguide

网址: https://codeguide.bootcss.com/ (opens new window)

前端开发

• 1.容错处理，非空判断，代码复用

• 3.添加必要的注释

• 10.删除不需要的代码，删除无用 log

图片

• 1.命名全部用小写英文字母||数字||_的组合，其中不得包含汉字||空格||特殊字符

• 2.运用 css 精灵图技术集中小的背景图或图标，减小页面 http 请求，但注意，请务必在对应的精灵图 psd 源图中划参考线，并保存至 img 目录下

• 3.所有页面元素类图片均放入 img 文件夹，测试用图片放于 demo 文件夹

其它

• 1.git 提交规范化

  • 格式

        第一行按格式必填
    
        具体内容根据情况填写，如修改“#禅道bug ID”，或其他多处修改分行填写，
    
        其他备注内容根据情况填写，比如记录xxx让改了什么东西作为后面撕逼的凭证
    
    <提交类型> : <提交内容概述>
    ​
    <空行>
    ​
    - 具体内容1
    - 具体内容2
    - 具体内容3
    ​
    <空行>
    ​
    - 其他备注
    - 其他备注
    

  • 提交类型

    • feat: 新特性
    • fix: 修改问题
    • refactor: 代码重构
    • docs: 文档修改
    • style: 代码格式修改, 注意不是 css 修改
    • test: 测试用例修改
    • chore: 其他修改, 比如构建流程, 依赖管理

  • demo

      fix:修复了xxx模块的4个bug
      ​
    - #302 xxx
    - #305 xxx未生效
    - #310 xxx报错
      ​
      xxx
  

• 2.代码命名规范化