代码规范

来源：互联网发布：百度预测大数据足球编辑：程序博客网时间：2024/05/18 01:38

HTML规范

代码规范

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

<html lang="zh-CN">

- 一般情况下统一使用 “UTF-8” 编码

<meta charset="UTF-8">

空元素标签都不加 “/” 字符

元素属性

元素属性值使用双引号语法
元素属性值可以写上的都写上

####纯数字输入框使用 type=”tel” 而不是 type=”number”

<input type="tel">

注释规范

####单行注释一般用于简单的描述，如某些状态描述、属性描述等注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行推荐：

<!-- Comment Text --><div>...</div>

模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符， 表示模块开始，表示模块结束，模块与模块之间相隔一行

推荐写法：

<!-- S Comment Text A -->   <div class="mod_a">    ...</div><!-- E Comment Text A -->

####嵌套模块注释当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用

<!-- S Comment Text --><!-- E Comment Text -->

而改用

<!-- /Comment Text -->

注释写在模块结尾标签底部，单独一行。

图片规范

HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上
CSS 中图片引入不需要引号

CSS规范

代码规范

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”，统一使用展开格式书写样式

@charset "UTF-8";.jdc{    display: block;    width: 50px;}

选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器（div）

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格
逗号分隔的取值，逗号之后一个空格
为单个css选择器或新申明开启新行

.jdc, .jdc_logo, .jdc_hd {    color: #ff0;}.nav{    color: #fff;}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

.jdc {    color: rgba(255,255,255,.5);}

不要为 0 指明单位

属性值引号

css属性值需要用到引号时，统一使用单引号

属性书写顺序

建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.jdc {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    -o-border-radius: 10px;    -ms-border-radius: 10px;    border-radius: 10px;}

注释规范

单行注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/* 与模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

/* Module A---------------------------------------------------------------- */.mod_a {}

文件信息注释

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";/** * @desc File Info * @author Author Name * @date 2015-10-10 */

标准的注释规范如下：

@charset "UTF-8";/** * @desc File Info * @author liqinuo * @date 2015-10-10 *//* Module A----------------------------------------------------------------*/.mod_a {}/* module A logo */.mod_a_logo {}/* module A nav */.mod_a_nav {}/* Module B----------------------------------------------------------------*/.mod_b {}/* module B logo */.mod_b_logo {}/* module B nav */.mod_b_nav {}

重置样式

移动端

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }img { border: 0 none; vertical-align: top; }i, em { font-style: normal; }ol, ul { list-style: none; }input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }table { border-collapse: collapse; border-spacing: 0; }a { text-decoration: none; color: #666; }body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; fon-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

PC端

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }ul, ol { list-style: none; }img { border: 0 none; vertical-align: top; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: none; }table { border-collapse: collapse; border-spacing: 0; }strong, em, i { font-style: normal; font-weight: normal; }ins { text-decoration: underline; }del { text-decoration: line-through; }mark { background: none; }input::-ms-clear { display: none !important; }body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }a { text-decoration: none; color: #333; }a:hover { text-decoration: underline; }

命名规范

HTML/CSS文件命名

确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号

ClassName命名

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “” 连接。祖先模块不能出现下划线，除了是全站公用模块，如 mod 系列的命名：

JS规范

语言规范

引用

const 和 let 都是块级作用域，var 是函数级作用域，对所有引用都使用 const，不要使用 var，如果引用是可变动的，则使用 let

对象

请使用对象方法的简写方式

// badconst item = {  value: 1,  addValue: function (val) {    return item.value + val  }}// goodconst item = {  value: 1,  addValue(val) {    return item.value + val  }}

请使用对象属性值的简写方式

const job = 'FrontEnd'// badconst item = {  job: job}// goodconst item = {  job}

数组

向数组中添加元素时，请使用 push 方法

const items = []// baditems[items.length] = 'test'// gooditems.push('test')

使用拓展运算符 … 复制数组

// badconst items = []const itemsCopy = []const len = items.lengthlet i// badfor (i = 0; i < len; i++) {  itemsCopy[i] = items[i]}// gooditemsCopy = [...items]

使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return

解构赋值

当需要使用对象的多个属性时，请使用解构赋值

// badfunction getFullName (user) {  const firstName = user.firstName  const lastName = user.lastName  return `${firstName} ${lastName}`}// goodfunction getFullName (user) {  const { firstName, lastName } = user  return `${firstName} ${lastName}`}// betterfunction getFullName ({ firstName, lastName }) {  return `${firstName} ${lastName}`}

当需要使用数组的多个值时，请同样使用解构赋值

const arr = [1, 2, 3, 4]// badconst first = arr[0]const second = arr[1]// goodconst [first, second] = arr

函数需要回传多个值时，请使用对象的解构，而不是数组的解构

// badfunction doSomething () {  return [top, right, bottom, left]}// 如果是数组解构，那么在调用时就需要考虑数据的顺序const [top, xx, xxx, left] = doSomething()// goodfunction doSomething () {  return { top, right, bottom, left }}// 此时不需要考虑数据的顺序const { top, left } = doSomething()

字符串

程序化生成字符串时，请使用模板字符串

const test = 'test'// badconst str = ['a', 'b', test].join()// badconst str = 'a' + 'b' + test// goodconst str = `ab${test}`

函数

请使用函数声明，而不是函数表达式

// badconst foo = function () {  // do something}// goodfunction foo () {  // do something}

不要在非函数代码块中声明函数

// badif (isUse) {  function test () {    // do something  }}// goodlet testif (isUse) {  test = () => {    // do something  }}

不要使用 arguments，可以选择使用 …，arguments 只是一个类数组，而 … 是一个真正的数组

// badfunction test () {  const args = Array.prototype.slice.call(arguments)  return args.join('')}// goodfunction test (...args) {  return args.join('')}

不要更改函数参数的值

// badfunction test (opts) {  opts = opts || {}}// goodfunction test (opts = {}) {  // ...}

迭代器

不要使用 iterators

const numbers = [1, 2, 3, 4, 5]// badlet sum = 0for (let num of numbers) {  sum += num}// goodlet sum = 0numbers.forEach(num => sum += num)// better//reduce: 数组所元素调用指定调函数 该调函数返值累积结并且返值调用该调函数作参数提供const sum = numbers.reduce((total, num) => total + num, 0)

参考链接 https://guide.aotu.io/docs/image/import.html

阅读全文

0 0