前端基礎(chǔ)編碼規(guī)范與注釋規(guī)范

HTML

標(biāo)簽

  • 自閉合的標(biāo)簽無需閉合 img、input、br、hr 等
  • 可選閉合的那種 需要閉合
  • 減少標(biāo)簽數(shù)量、嵌套

Class & Id

  • 一個(gè)項(xiàng)目 盡量只有一個(gè)ID屬性
  • classname and id 的命名盡量用 功能和內(nèi)容
  • 樣式盡量用 - 分割

嵌套

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

HEAD

  • 文檔類型 <!DOCTYPE html>
  • 語言屬性 <lang="zh-cmn-Hans"> 參考鏈接
  • 字符編碼(必須是<head>標(biāo)簽的第一個(gè)子元素) <meta charset="utf-8">
  • 優(yōu)先使用最新內(nèi)核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • SEO優(yōu)化 <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圖標(biāo)
    • apple-touch-icon 圖片自動(dòng)處理成圓角和高光等效果;
    • apple-touch-icon-precomposed 禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖;
  • favicon <link rel="shortcut icon" href="path/to/favicon.ico">

語義化

更多標(biāo)簽 參考

標(biāo)簽 語義
<p> 段落
<h1>、<h2>、<h3>... 標(biāo)題
<ul>、<ol> 列表
<blockquote> 引用 大
<cite>? 引用 normal
<b> 粗
<storng> 強(qiáng)調(diào)加粗
<i> 傾斜
<em> 內(nèi)容傾斜
<code> 代碼
<abbr> 縮寫

CSS

聲明順序

Positioning > Box model > Typographic > Visua

位置信息 > 盒子模型 > 排版信息 > 視覺效果?

十六進(jìn)制

全部小寫

class命名推薦詞

  • 布局類：header, footer, container, main, content, aside, page, section
  • 包裹類：wrap, inner
  • 區(qū)塊類：region, block, box
  • 結(jié)構(gòu)類：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
  • 狀態(tài)類：active, current, checked, hover, fail, success, warn, error, on, off
  • 導(dǎo)航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
  • 交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
  • 星級(jí)類：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() 、屬性選擇符、屬性值使用雙引號(hào)
  • 將媒體查詢(Media query)放在盡可能相關(guān)規(guī)則的附近
  • 不要使用 @import
  • 鏈接樣式順序 a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
  • 中線鏈接
  • 圖標(biāo)以icon-為頭

JavaScript

命名

  • 變量 駝峰命名法
  • 私有屬性變量方法 _開頭
  • 常量 全部字母大寫, _分隔
  • 函數(shù)及函數(shù)的參數(shù) 駝峰命名法
  • 類 單詞首字母大寫, 類的方法及屬性 駝峰命名法
  • 多個(gè)單詞組成的縮寫詞, 在命名中, 根據(jù)當(dāng)前命名法和出現(xiàn)的位置, 所有字母的大小寫與首字母大小寫保持一致

詞法

  • 類名 使用名詞 function Engine(options) {}
  • 函數(shù)名，使用動(dòng)賓短語。 function getStyle(element) {}
  • boolean類型的變量 使用 is 或 has 開頭。var isReady = false; var hasMoreCommands = false;

ES6^

  • let取代var

  • let const優(yōu)先使用const(所有的函數(shù)應(yīng)設(shè)置為const常量,let表示的變量，?只有該變量需要被重新賦值才用 let)

  • 靜態(tài)字符串使用單引號(hào)

  • 動(dòng)態(tài)字符串使用字符串模板

  • 盡量使用解構(gòu)賦值

  • 單行定義的對(duì)象,最后一個(gè)成員不以逗號(hào)結(jié)尾

  • 多行定義的對(duì)象,最后一個(gè)成員以逗號(hào)結(jié)尾

  • 對(duì)象盡量靜態(tài)化,不得隨意添加屬性.如果添加屬性不可避免,使用Object.assign()

  • 如果對(duì)象的屬性名是動(dòng)態(tài)的，可以在創(chuàng)造對(duì)象的時(shí)候，使用屬性表達(dá)式定義。

  • 對(duì)象屬性和方法盡量采用簡(jiǎn)潔表達(dá)法

  • 使用默認(rèn)值語法設(shè)置函數(shù)參數(shù)的默認(rèn)值

其他要求

  • for-in循環(huán)只用于object/map/hash遍歷, 因?yàn)?code>Array上使用for-in循環(huán)會(huì)對(duì)所有出現(xiàn)在原型上的對(duì)象進(jìn)行遍歷
  • 二元及三元操作符始終寫在前一行
  • 三元操作符替代if...else
  • && || 設(shè)置默認(rèn)值和替代多個(gè)if嵌套判斷
  • 正則表達(dá)式 僅準(zhǔn)用.test()和.exec()。不準(zhǔn)用"string".match()
  • 多個(gè)參數(shù)使用對(duì)象字面量存儲(chǔ)

注釋內(nèi)容

Version 202012281312

文件注釋

每個(gè)文件都盡量在頭部添加一個(gè)頭部注釋

推薦格式

/*

*@Author:yourname

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

@Description:

@FilePath:

*/

單行注釋

獨(dú)占一行，后跟一個(gè)空格，縮進(jìn)與下一行被注釋說明的代碼一致

多行注釋

避免使用 /.../這樣的多行注釋。有多行注釋內(nèi)容時(shí)，使用多個(gè)單行注釋

函數(shù)注釋

多次引用函數(shù)、公共函數(shù)、重要函數(shù) 公共函數(shù) 必須使用此種注釋方式 注釋

/**

*@description:描述

*@param{類型}參數(shù)

@return{}

*/

函數(shù)內(nèi)注釋

重要函數(shù)、公共函數(shù)、邏輯重函數(shù)這種函數(shù)在實(shí)現(xiàn)邏輯內(nèi)部 盡量添加單行注釋 解釋每一個(gè)部分的意義所在

注釋工具

KoroFileHeader

使用方法

搜索 KoroFileHeader

 安裝

無圖

配置

ctrl + shift + p

輸入打開用戶設(shè)置

搜索 fileheader

選擇第一項(xiàng)進(jìn)行設(shè)置

設(shè)置樣例 你用到什么 就寫什么


"fileheader.customMade":{//此為頭部注釋

"Description":"",

"Version":"2.0",

"Autor":"lhl",

"Date":"Donotedit",

"LastEditors":"lhl",

"LastEditTime":"Donotedit"

},

"fileheader.cursorMode":{//此為函數(shù)注釋

"description":"",

"param":"",

"return":"",

"author":"lhl"

},

"fileheader.configObj":{

"autoAdd":true,

    //默認(rèn)開啟自動(dòng)添加頭部注釋，當(dāng)文件沒有設(shè)置頭部注釋時(shí)保存會(huì)自動(dòng)添加

"autoAlready":true,//默認(rèn)開啟

"prohibitAutoAdd":[

"json",

"md"

],//禁止.json.md文件，自動(dòng)添加頭部注釋

"wideSame":false,//設(shè)置為true開啟

"wideNum":13//字段長(zhǎng)度默認(rèn)為13

}

本人的自定義設(shè)置

"fileheader.customMade":{

"Author":"yourname",

"Date":"Donotedit",

"Description":"",

"FilePath":"Donotedit",

}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容