前端基础编码规范与注释规范

HTML

标签

• 自闭合的标签无需闭合 img、input、br、hr 等
• 可选闭合的那种 需要闭合
• 减少标签数量、嵌套

Class & Id

• 一个项目 尽量只有一个ID属性
• classname and id 的命名尽量用 功能和内容
• 样式尽量用 - 分割

嵌套

• 用于
  或
  下
  1. 用于

     下

  2. 用于 下
     inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
     里不可以嵌套交互式元素、、等;

     里不可以嵌套块级元素

     、

     ~

     、

     、

     /
     /
     1. 、

        /

        /

        、

        等

     HEAD

     • 文档类型
     • 语言属性 参考链接
     • 字符编码(必须是标签的第一个子元素)
     • 优先使用最新内核
     • SEO优化
     • viewport
     • iOS图标
       • apple-touch-icon 图片自动处理成圆角和高光等效果;
       • apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;
     • favicon

     语义化

     更多标签 参考

     标签	语义
     	段落
     、 、 ...	标题
     、	列表
     	引用 大
     Ï	引用 normal
     	粗
     	强调加粗
     	倾斜
     	内容倾斜
     	代码
     	缩写

     CSS

     声明顺序

     Positioning > Box model > Typographic > Visua

     位置信息 > 盒子模型 > 排版信息 > 视觉效果Ï

     十六进制

     全部小写

     class命名推荐词

     • 布局类：header, footer, container, main, content, aside, page, section
     • 包裹类：wrap, inner
     • 区块类：region, block, box
     • 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
     • 列表类：list, item, field
     • 主次类：primary, secondary, sub, minor
     • 大小类：s, m, l, xl, large, small
     • 状态类：active, current, checked, hover, fail, success, warn, error, on, off
     • 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
     • 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
     • 星级类：rate, star
     • 分割类：group, seperate, divider
     • 等分类：full, half, third, quarter
     • 表格类：table, tr, td, cell, row
     • 图片类：img, thumbnail, original, album, gallery
     • 语言类：cn, en
     • 论坛类：forum, bbs, topic, post
     • 方向类：up, down, left, right
     • 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

     其他要求

     • url() 、属性选择符、属性值使用双引号
     • 将媒体查询(Media query)放在尽可能相关规则的附近
     • 不要使用 @import
     • 链接样式顺序 a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
     • 中线链接
     • 图标以icon-为头

     JavaScript

     命名

     • 变量 驼峰命名法
     • 私有属性变量方法 _开头
     • 常量 全部字母大写, _分隔
     • 函数及函数的参数 驼峰命名法
     • 类 单词首字母大写, 类的方法及属性 驼峰命名法
     • 多个单词组成的缩写词, 在命名中, 根据当前命名法和出现的位置, 所有字母的大小写与首字母大小写保持一致

     词法

     • 类名 使用名词 function Engine(options) {}
     • 函数名，使用动宾短语。 function getStyle(element) {}
     • boolean类型的变量 使用 is 或 has 开头。var isReady = false; var hasMoreCommands = false;

     ES6^

     • let取代var

     • let const优先使用const(所有的函数应设置为const常量,let表示的变量，Ï只有该变量需要被重新赋值才用 let)

     • 静态字符串使用单引号

     • 动态字符串使用字符串模板

     • 尽量使用解构赋值

     • 单行定义的对象,最后一个成员不以逗号结尾

     • 多行定义的对象,最后一个成员以逗号结尾

     • 对象尽量静态化,不得随意添加属性.如果添加属性不可避免,使用Object.assign()

     • 如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

     • 对象属性和方法尽量采用简洁表达法

     • 使用默认值语法设置函数参数的默认值

     其他要求

     • for-in循环只用于object/map/hash遍历, 因为Array上使用for-in循环会对所有出现在原型上的对象进行遍历
     • 二元及三元操作符始终写在前一行
     • 三元操作符替代if...else
     • && || 设置默认值和替代多个if嵌套判断
     • 正则表达式 仅准用.test()和.exec()。不准用"string".match()
     • 多个参数使用对象字面量存储

     注释内容

     Version 202012281312

     文件注释

     每个文件都尽量在头部添加一个头部注释

     推荐格式

     /*

     *@Author:yourname

     *@Date:2020-11-0909:32:24

     @Description:

     @FilePath:

     */

     单行注释

     独占一行，后跟一个空格，缩进与下一行被注释说明的代码一致

     多行注释

     避免使用 /.../这样的多行注释。有多行注释内容时，使用多个单行注释

     函数注释

     多次引用函数、公共函数、重要函数 公共函数 必须使用此种注释方式 注释

     /**

     *@description:描述

     *@param{类型}参数

     @return{}

     */

     函数内注释

     重要函数、公共函数、逻辑重函数这种函数在实现逻辑内部 尽量添加单行注释 解释每一个部分的意义所在

     注释工具

     KoroFileHeader

     使用方法

     搜索 KoroFileHeader
     
      安装
     

     无图

     配置
     
     ctrl + shift + p
     
     输入打开用户设置
     
     搜索 fileheader 
     

     选择第一项进行设置

     设置样例 你用到什么 就写什么

     
     "fileheader.customMade":{//此为头部注释
     
     "Description":"",
     
     "Version":"2.0",
     
     "Autor":"lhl",
     
     "Date":"Donotedit",
     
     "LastEditors":"lhl",
     
     "LastEditTime":"Donotedit"
     
     },
     
     "fileheader.cursorMode":{//此为函数注释
     
     "description":"",
     
     "param":"",
     
     "return":"",
     
     "author":"lhl"
     
     },
     
     "fileheader.configObj":{
     
     "autoAdd":true,
     
         //默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
     
     "autoAlready":true,//默认开启
     
     "prohibitAutoAdd":[
     
     "json",
     
     "md"
     
     ],//禁止.json.md文件，自动添加头部注释
     
     "wideSame":false,//设置为true开启
     
     "wideNum":13//字段长度默认为13
     
     }
     
     本人的自定义设置
     
     "fileheader.customMade":{
     
     "Author":"yourname",
     
     "Date":"Donotedit",
     
     "Description":"",
     
     "FilePath":"Donotedit",
     
     }