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

HTML

标签

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

Class & Id

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

嵌套

  • <li>用于<ul>或<ol>下
  • <dd> <dt> 用于 <dl>下
  • <thead> <tbody> <tfoot> <tr> <td> 用于 <table> 下
  • inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
  • <a>里不可以嵌套交互式元素<a>、<button>、<select>等;
  • <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等

HEAD

  • 文档类型 <!DOCTYPE html>
  • 语言属性 <lang="zh-cmn-Hans"> 参考链接
  • 字符编码(必须是<head>标签的第一个子元素) <meta charset="utf-8">
  • 优先使用最新内核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • SEO优化 <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta name="author" content="author,email address">
  • viewport <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • iOS图标
    • apple-touch-icon 图片自动处理成圆角和高光等效果;
    • apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;
  • favicon <link rel="shortcut icon" href="path/to/favicon.ico">

语义化

更多标签 参考

标签 语义
<p> 段落
<h1>、<h2>、<h3>... 标题
<ul>、<ol> 列表
<blockquote> 引用 大
<cite>Ï 引用 normal
<b> 粗
<storng> 强调加粗
<i> 倾斜
<em> 内容倾斜
<code> 代码
<abbr> 缩写

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",

}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容