日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

前端开发规范参考

發(fā)布時間：2024/3/24 HTML 46 豆豆
生活随笔 收集整理的這篇文章主要介紹了 前端开发规范参考 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言：前端開發(fā)規(guī)范參考分享

前端開發(fā)規(guī)范參考

  • 一、規(guī)范目的
  • 二、通用規(guī)范
  • 三、框架開發(fā)規(guī)范
    • 1、項目使用框架
    • 2、學(xué)習(xí)資料
  • 四、編碼規(guī)范
    • 1、HTML
    • 2、CSS+LESS
    • 3、REACT+TS
  • 五、圖片使用規(guī)范
  • 六、團隊約定
  • 七、圖片大小規(guī)則
  • 八、圖片質(zhì)量要求
  • 九、圖片引入
  • 十、組件編寫規(guī)范
  • 十一、工程目錄規(guī)范
  • 十二、疑問解答與加群交流學(xué)習(xí)

一、規(guī)范目的

  • 好的代碼規(guī)范能夠提高代碼的可讀性便于協(xié)作溝通，好的開發(fā)模式能夠避免不必要的 bug 出現(xiàn)。
  • 為了規(guī)范和約束團隊成員的開發(fā)編碼，提升團隊協(xié)作能力，提高開發(fā)效率，使開發(fā)流程更加規(guī)范化。
  • 有利于前端項目的維護(hù)性和擴展性。

二、通用規(guī)范

  • 前端編輯器統(tǒng)一使用 Visual Studio Code (簡稱 VSCode)。
  • 所有代碼縮進(jìn)嚴(yán)格按照一個TAB 鍵執(zhí)行，一個TAB 鍵用兩個空格代替。 (請自行在vscode中設(shè)置tab鍵)。
    前端開發(fā)規(guī)范包括以下幾方面
    Ⅰ、框架開發(fā)規(guī)范
    Ⅱ、編碼規(guī)范
    Ⅲ、圖片使用規(guī)范
    Ⅳ、組件編寫規(guī)范
    V、工程目錄規(guī)范

三、框架開發(fā)規(guī)范

1、項目使用框架

技術(shù)棧： UMI + REACT + DVA +ANTD+ TYPESCRIPT +LESS+ESLINT

2、學(xué)習(xí)資料

UMI： https://umijs.org/zh/guide/#%E7%89%B9%E6%80%A7
REACT：http://caibaojian.com/react/
DVA：https://dvajs.com/guide/
ANTD ：https://ant.design/docs/react/introduce-cn
TYPESCRIPT: https://typescript.bootcss.com/

四、編碼規(guī)范

1、HTML

  • 語義化：根據(jù)元素/標(biāo)簽被創(chuàng)造出來時的初始意義來使用它。
  • 標(biāo)簽嵌套：塊級標(biāo)簽可嵌套行內(nèi)標(biāo)簽，行內(nèi)標(biāo)簽不能嵌套塊級標(biāo)簽。
  • 語義嵌套： 如：
  • 只能用于
    • 或
    • 內(nèi)。
  • 內(nèi)容至上：盡量使用before、after偽類代替html標(biāo)簽處理背景圖片等視覺設(shè)計問題。
  • 組件首字母大寫，原生html標(biāo)簽統(tǒng)一小寫。
  • HTML 屬性值引號：使用雙引號(“”) 而不是單引號(”) 。
  • 標(biāo)簽屬性值大于3時，斷行處理編寫。
    不推薦
    • <Drawer closable={false} width='500px' title='商品詳情' height='600px'>……</Drawer>

    推薦

    <Drawerclosable={false}width="500px"title="商品詳情"height="600px"> …… </Drawer>

    2、CSS+LESS

    2.1 通用規(guī)范

  • 以組件為單位組織代碼段，組件與組件間樣式用/*======組件名 ====== */隔開，無組件嵌套則可不加注釋。
  • 超鏈接a標(biāo)簽樣式書寫順序： a:link -> a:visited -> a:hover -> a:active。
  • 0后面單位省略。
  • 盡量使用復(fù)合屬性。
    不推薦
    • .ant-btn-primary{margin-top: 0;margin-left: 0;margin-right: 10px;margin-bottom: 4px;}

    推薦

    .ant-btn-primary{margin: 0 10px 4px 0; }
  • 命名
    • 圖片的命名原則：根據(jù)模塊名稱命名，如一張圖片多個模塊使用，則根據(jù)功能命名。如：login.svg，icon_close.png
    • class命名原則：根據(jù)功能+標(biāo)簽命名(中間加“-”隔開)，如一個標(biāo)簽存在多個顯示效果，則根據(jù)功能+標(biāo)簽+顯示效果命名。如：search-form，ant-divider-horizontal，ant-divider-inline。

    2.2 LESS編寫規(guī)范
    1.運算規(guī)范

    • 運算符前后統(tǒng)一加一個空格。
    • 注意運算單位，單位同時參與運算，乘除運算時需要特別注意，注:10px不等于10

    Extend 名: 使用 -ext 結(jié)尾。
    推薦屬性書寫順序: 顯示屬性 -> 自身屬性 -> 文本屬性和其他修飾。
    使用變量命名常用的數(shù)字和顏色。
    列表型屬性值 書寫在單行時, 后必須跟一個空格。
    每行不得超過 50 個字符，除非單行不可分割。
    當(dāng)一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。

    .post,.page,.comment {line-height: 1.5;}

    屬性選擇器中的值必須用雙引號包圍。
    屬性定義必須另起一行。
    屬性定義后必須以分號結(jié)尾。

    /* good */article[character="juliet"] {voice-family: "Vivien Leigh", victoria, female;}

    推薦選擇器的嵌套層級應(yīng)不大于 3 級，位置靠后的限定條件應(yīng)盡可能精確
    url() 函數(shù)中的路徑加引號 如:background
    url(“bg.png”); RGB顏色值必須使用十六進(jìn)制記號形式 #rrggbb,少使用 rgb()

    • 帶有alpha的顏色可以使用 rgba()。使用 rgba() 時每個逗號后必須保留一個空格。

    3、REACT+TS

    (1)、 通用規(guī)范

  • 全面使用ES6、ES7語法，優(yōu)先使用解構(gòu)賦值編寫代碼。
  • 命名原則：語義化，盡可能利用英文單詞或其縮寫。
    • 變量、常量、方法名、對象應(yīng)采用小駝峰方式命名。 如：defaultData
    • 類、組件應(yīng)采用大駝峰式方式命名。如：SearchForm
  • 盡量使用三元運算符代替if else。
  • 分號結(jié)束以增加代碼可讀性。
  • 串連、回調(diào)等寫法要換行，以增加代碼可讀性。
    不推薦
    • dispatch({ type: 'home/fetchAuth',payload: {'account_name':account_name, 'account_id':account_id}, callback: res => {let autRoutes = getRealAuthoritRoutes(routes,res.data); …… }});

    推薦

    dispatch({ type: 'home/fetchAuth', payload: { 'account_name':account_name, 'account_id':account_id }, callback: res => {//實際權(quán)限路由數(shù)組 let autRoutes = getRealAuthoritRoutes(routes,res.data) dispatch({ type: 'home/storeAllRoutesAndBtns', payload: autRoutes }); } });
  • 項目使用eslint進(jìn)行代碼檢測,具體使用插件。

    • (2)、REACT編寫規(guī)范

  • React 組件使用帕斯卡命名，引用實例采用駝峰命名, 組件名稱應(yīng)該和文件名一致，eslint: react/jsx-pascal-case
  • 為 JSX 語法使用下列的對其方式: eslint: react/jsx-closing-bracket-location
  • JSX 的屬性都采用雙引號，其他的 JS 都使用單引號。eslint: jsx-quotes
  • 屬性名稱始終使用駝峰命名法。
  • 當(dāng)屬性值等于true的時候，省略該屬性的賦值。 eslint: react/jsx-boolean-value
  • 用括號包裹多行 JSX 標(biāo)簽。 eslint: react/wrap-multilines
  • 當(dāng)標(biāo)簽沒有子元素時，始終時候自閉合標(biāo)簽。 eslint: react/self-closing-comp
  • 如果控件有多行屬性，關(guān)閉標(biāo)簽要另起一行。 eslint: react/jsx-closing-bracket-location
  • 在 render 方法中事件的回調(diào)函數(shù)，應(yīng)該在構(gòu)造函數(shù)中進(jìn)行bind綁定。 eslint:react/jsx-no-bind,或者使用@autobind進(jìn)行事件處理方法與this的綁定state初始化和事件處理函數(shù)建議使用es7的property initializers新特性
  • React 組件的內(nèi)部方法命名不要使用下劃線前綴。
  • isMounted:不要使用 isMounted. eslint: react/no-is-mounted , 會被官方棄用.
  • key 屬性設(shè)置: 渲染多個同類型組件時，必須加上key，如無特殊用途key值統(tǒng)一為組件名_+下標(biāo)，如：key = { submenu_${idx} },
  • Refs 提供了一種方式，允許我們訪問 DOM 節(jié)點或在 render 方法中創(chuàng)建的 React 元素 。我們推薦使用 createRef API 的方式
  • 建議使用withxxx或xxxable形式的詞作為高階組件的名稱。
    • 高階組件是為組件添加行為和功能的函數(shù)，因此使用如上形式的詞有助于對其功能進(jìn)行理解。
  • 建議按照以下順序編排組件中的方法和屬性：
    • txt&nbsp;&nbsp;static&nbsp;propTypes&nbsp;&nbsp;static&nbsp;contextTypes&nbsp;&nbsp;state&nbsp;defaultProps&nbsp;&nbsp;static&nbsp;state&nbsp;&nbsp;其它靜態(tài)的屬性&nbsp;&nbsp;用于事件處理并且以屬性的方式（onClick&nbsp;=&nbsp;e&nbsp;=>&nbsp;{...}）聲明的方法&nbsp;&nbsp;其它實例屬性&nbsp;&nbsp;constructor&nbsp;&nbsp;getChildContext&nbsp;（如非必要，少用）&nbsp;&nbsp;componentDidMount&nbsp;&nbsp;getDerivedStateFromProps&nbsp;&nbsp;shouldComponentUpdate&nbsp;&nbsp;getSnapshotBeforeUpdate&nbsp;&nbsp;componentDidUpdate&nbsp;&nbsp;componentWillUnmount&nbsp;&nbsp;事件處理方法&nbsp;&nbsp;其它方法&nbsp;&nbsp;render

  • 建議使用箭頭函數(shù)聲明函數(shù)組件。

  • 推薦除頂層或路由級組件以外，所有組件均在概念上實現(xiàn)為純組件（Pure Component）。

  • 禁止為繼承自PureComponent的組件編寫shouldComponentUpdate實現(xiàn)。

  • 建議將各個組件中的JSX的層級控制在3層以內(nèi)。
    (3)、TS編寫規(guī)范

  • 禁止隱式使用 any ; 如果有必須要聲明為 any , 必須注釋聲明為什么要使用 any 類型定義, – noImplicitAny

  • 基礎(chǔ)代碼封裝要使用 泛型 來做類型定義

  • 多使用 const 定義變量

  • 私有屬性和方法必須使用 private 關(guān)鍵字,

  • 暴露給外部的方法: 使用 public 關(guān)鍵字, 避免內(nèi)部屬性直接暴露給外部, 可以使用接口暴露

  • 避免強行繼承, 可以使用組合, 或者是聲明接口(interface) 使用(implements)

    • 五、圖片使用規(guī)范

    原則：優(yōu)先使用iconfont正常情況下圖片格式時按照ui給定格式下載，無需自己額外轉(zhuǎn)換圖片格式，如若需要前端自己切圖，圖片格式應(yīng)選擇一下幾種格式：

  • GIF:需要圖片為動畫效果時使用，不然不要使用
    • 優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時將體積變得很小。
    • 可插入多幀，從而實現(xiàn)動畫效果。
    • 可設(shè)置透明色以產(chǎn)生對象浮現(xiàn)于背景之上的效果。
    • 由于采用了8位壓縮，最多只能處理256種顏色，故不宜應(yīng)用于真彩色圖片。
  • SVG:
    • 優(yōu)點：文本文件、體積小、不失真、兼容性好
    • 可伸縮矢量圖形
    • SVG 使用 XML 格式定義圖形
    • SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
    • 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
  • PNG:
    • 支持256色調(diào)色板技術(shù)，文件體積小。
    • 無損壓縮
    • 最高支持48位真彩色圖像以及16位灰度圖像。
    • 支持Alpha通道的透明/半透明特性。
    • 支持圖像亮度的Gamma校準(zhǔn)信息。
    • 支持存儲附加文本信息，以保留圖像名稱、作者、版權(quán)、創(chuàng)作時間、注釋等信息。
    • 漸近顯示和流式讀寫，適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。
    • 使用CRC防止文件出錯。
    • 最新的PNG標(biāo)準(zhǔn)允許在一個文件內(nèi)存儲多幅圖像。
  • JPEG
    • 適用于儲存24位元全采影像
    • 采取的壓縮方式通常為有損壓縮
    • 不支持透明或動畫
    • 壓縮比越高影像耗損越大，失真越嚴(yán)重
    • 壓縮比在10左右肉眼無法�辨出壓縮圖與原圖的差別
  • WEBP
    • 同時提供有損壓縮和無損壓縮兩種圖片文件格式
    • 文件體積小，無損壓縮后，比 PNG 文件少了 45％ 的文件大小；有損壓縮后，比 JPEG 文件少了 25% - 34% 文件大小
    • 瀏覽器兼容差，目前只支持客戶端 Chrome 和 Opera 瀏覽器以及安卓原生瀏覽器(Andriod 4.0+)

    六、團隊約定

    原則：優(yōu)先考慮使用SVG代替其他格式圖片

  • 內(nèi)容圖
    • 多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大
    • 優(yōu)先考慮 JPEG 格式，條件允許的話優(yōu)先考慮 WebP 格式
    • 盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大
  • 背景圖
    • 背景圖多為圖標(biāo)等顏色比較簡單、文件體積不大、起修飾作用的圖片
    • PNG 與 GIF 格式，優(yōu)先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率
    • 圖像顏色比較簡單的，如純色塊線條圖標(biāo)，優(yōu)先考慮使用 PNG8 格式，避免不使用 JPEG 格式
    • 圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優(yōu)先考慮 PNG24 格式
    • 圖像顏色豐富而且文件比較大的（40KB - 200KB）優(yōu)先考慮 JPEG 格式 條件允許的，優(yōu)先考慮 WebP 代替 PNG 和 JPEG 格式

    七、圖片大小規(guī)則

    • PC平臺單張的圖片的大小應(yīng)小于200KB。
    • 移動平臺單張的圖片的大小應(yīng)小于100KB。

    八、圖片質(zhì)量要求

    • 上線的圖片都應(yīng)該經(jīng)過壓縮處理，壓縮后的圖片不應(yīng)該出現(xiàn)肉眼可感知的失真區(qū)域
    • 60質(zhì)量的JPEG格式圖片與質(zhì)量大于60的相比，肉眼已看不出明顯的區(qū)別，因此保存 JPEG 圖的時候，質(zhì)量一般控制在60，若保真度要求高的圖片可適量提高到 80，圖片大小控制在200KB 以內(nèi)

    九、圖片引入

    Data URIs（base64編碼）使用建議

    • 適合更新頻率高的小圖片，如某些具備自定義功能的標(biāo)題icon等
    • 轉(zhuǎn)換成 Base64 編碼的圖片應(yīng)小于 2KB
    • 移動端不使用 Base64 編碼
    • 要兼容 IE6/IE7 的不使用

    十、組件編寫規(guī)范

    原則：可復(fù)用代碼、邏輯請抽離成單獨方法或組件，組件代碼盡量控制在200行以內(nèi)，以增加代碼復(fù)用性和可讀性。除命名、引用外，組件編寫遵循react+ts編寫規(guī)范。
    1、 命名

  • 文件夾名稱、導(dǎo)出組件名稱：采用開頭用大寫的駝峰方式名稱（如：GlobalHeader）
  • 文件名稱（包括樣式文件）：采用開頭用小寫的駝峰方式名稱（如：index.jsx）
    2、注釋：
    • 多行注釋：組件用途、參數(shù)說明、返回值描述和重要邏輯注釋等占用多行時使用多行注釋
    • 單行注釋：簡單邏輯注釋等占用單行時使用單行注釋
    /*** 通用權(quán)限檢查方法* Common check permissions method* @param authority 必需參數(shù)，當(dāng)前路由權(quán)限* @param target 必需參數(shù)，通過路由所要渲染的頁面* @return 通過的路由返回target，未通過路由返回403，沒有的路由返回404*/ //簡單說明：使用單行注釋

    3、編寫

  • 全面使用 ES6、ES7語法，優(yōu)先使用解構(gòu)賦值編寫代碼。
  • 注意區(qū)分變量、方法、類的大小寫（和JS命名保持一致）。
  • 使用 className 代替 class 。
  • 使用 htmlFor 代替 for 屬性。
  • 傳遞給 HTML 元素的自定義屬性，需要添加 data-前綴。

    • 4、引用

  • 統(tǒng)一采用開頭用大寫的駝峰方式名稱。
  • 注意引用組件路徑的大小寫（重要）。

    • 十一、工程目錄規(guī)范

    一、目錄規(guī)范
    1.項目主要目錄結(jié)構(gòu)

    ├─config //umi基礎(chǔ)配置文件，項目路由文件所在地
    ├─src //項目源碼目錄
    ├─package.json //項目依賴配置文件

    2.src文件主要目錄：

    • 圖片統(tǒng)一放在assets文件下，如某一個模塊使用圖標(biāo)較多，可在assets下再加一個文件夾，以模塊名命名即可。
    • 公共業(yè)務(wù)組件統(tǒng)一放在components下。
    • src/models、src/ services文件下放置多個模塊重復(fù)調(diào)用接口數(shù)據(jù)。
    • 公共方法、工具類統(tǒng)一放置在utils 。
    • pages：以頁面一級路由（模塊）為單位存放代碼并命名，每個模塊下包含一下文件：

    ├─index.jsx //頁面邏輯
    ├─model.js //store:處理接口返回數(shù)據(jù)
    ├─service.js //私有api接口
    ├─style.less //私有樣式文件
    ├─mock.js //接口模擬數(shù)據(jù)
    ├─views //私有組件存放地，非必須

    十二、疑問解答與加群交流學(xué)習(xí)

    總結(jié)

    以上是生活随笔為你收集整理的前端开发规范参考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。