當前位置:首頁 » 網頁前端 » 前端設計命名
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端設計命名

發布時間: 2023-02-28 03:37:20

① 為什麼前端命名的時候都愛用下劃線或中劃線

1,選中需加下劃線的行;2,在表格和邊框工具欄按「線型」工具選擇下劃線類型(實線或虛線);3,按「外側框線」工具按鈕選擇其中的下劃線。這種下劃線,不論是否該行有無文字均會劃線。

② 為什麼前端命名的時候都愛用下劃線或中劃線

這只是一種命名風格也是為了後期維護或者查找的時候方便而且現在項目都是幾個人一起開發為了便於管理避免起名沖突就這樣在開發之前就制定好要求的

③ 前端開發中的圖片的常規命名有哪些

  • 所有的命名最好都小寫。

  • 文件夾命名,盡量採取單個英語單詞描述,如login,index。

  • html文件名稱,當需要多個英語單詞描述時用」_」(下劃線)連接多個單詞分隔,如:user_add.html,動詞放在後面,便於相同業務模塊文件放在一起。

  • css,image,js文件名稱,當需要多個英語單詞描述時用」-「(分隔線)連接多個單詞分隔,如:font-awesome.css,login-user.jpg,login-pwd.jpg。 當基於某種類型從屬關系劃分文件時,以.(點)作為單詞分隔,如:jquery.min.js,common.left-sliding.js

  • js變數命名

    建議採取系統匈牙利命名法,因為js語言是一弱類型語言,聲明變數時,在名稱上標識其數據類型,以提高代碼的的可讀性。

    變數名=數據類型+對象描述

    s: 表示字元串Stringn:表示數字i: 表示整型Int(它是Number中的整數類型)fl: 表示浮點Float(它是Number中的小數類型)b: 表示布爾Booleana: 表示數組Arrayo: 表示對象Objectfn: 表示函數Function

    例如var aPerson = []; // Array數組var oBtn = document.getElementById(『btn』); //Object對象var fnName = function () {}; // function函數var sName = 「w3cplus」; // string字元串

④ 前端規范一(命名規范)

前端規范一(命名規范)

1、小駝峰命名法(lowerCamelCase) :第一個單詞以小寫字母開始,第二個單詞的首字母大寫,例如:firstName、lastName。

2、大駝峰命名法(CamelCase) :每一個單詞的首字母都採用大寫字母,例如:FirstName、LastName。

3、下劃線命名法(snake_case):下劃線命名法也叫蛇形法,全由小寫字母和下劃線組成,在兩個單詞之間用下滑線連接。例如:first_name。

4、中劃線命名法(kebab-case):中劃線命名法也叫串式命名法,各個單詞之間通過下劃線「-」連接。例如:first-name。

強制使用:中劃線命名法

命名規則:1、文件名不得含有空格

2、文件名建議只使用小寫字母,不使用大寫字母

3、文件名包含多個單詞時,單詞之間建議連詞線 ( - ) 分隔

4、有復數結構式,要使用復數

示例:login 、 error-page、 icons

強制使用:全部大寫字母

為了醒目,某些說明文件的文件名,可以使用大寫字母

示例:README

補充說明: README 標准

◎ 項目簡介。
◎ 注意事項。
◎ 線上的示例地址(測試、正式)。
◎ 支持運行的環境。
◎ 必要的依賴准備,以及如何搭建。
◎ 項目的安裝指南。
◎ 相關的文檔鏈接。
◎ 相關人員的聯系方式。

README.md 示例:

強制使用:小駝峰命名法

命名規則:前綴為動詞,見名知意

1、onXxx 監聽事件的回調

2、handleXxx 處理事件

3、getXxx 獲取某個值

4、setXxx 設置某個值

常見場景:

a、事件處理:

(1).事件主動監聽採用 onXxx ,被動處理使用handleXxx

示例:onXxxSubmit: '提交表單'
handleXxxSizeChange: '處理分頁頁數改變'
handleXxxPageChange: '處理分頁每頁大小改變'
onXxxKeydown: '按下鍵'

(2). 其他命名:元素+click、 元素+change、select+范圍

示例:selectAllXxx: '選擇所有'
xxxCellClick: '當某個單元格被點擊時會觸發該事件'
xxxSortChange: '當表格的排序條件發生變化的時候會觸發該事件'

b、增刪改查處理:

增: addXxx 添加子項

createXxx 創建大項

刪: deleteXxx 真刪除

removeXxx 偽刪除

改:updateXxx

查: getXxx 獲取原始數據需要修改

fetchXxx 原始數據

示例:getUserList: '獲取用戶列表', fetchToken: '取得Token', deleteUser: '刪除用戶', removeTag: '移除標簽', updateUserInfo: '更新用戶信息', addUser: '添加用戶', createAccount: '創建賬戶'

c、API介面函數:

get: getXxxApi

post: postXxxApi

patch: patchXxxApi

delect: delectXxxApi

域名:xxxUrl

一般屬性變數 強制使用:小駝峰命名法

1、布爾值

命名規則:前綴為判斷性動詞

hasXxx 判斷是否含有某個值。true:含有此值; false:不含有此值

isXxx 判斷是否為某個值。true:為某個值; false:不為某個值

示例:isShow: '是否顯示', isLoading: '是否處於載入中', hasToken: '是否包含Token',

2、數組命名

命名規則:使用名詞+List組合

示例: userList: '用戶列表'

3、私有屬性變數

命名規則:前綴為下劃線(_)後面和變數命名一樣。

4、枚舉變數 \textcolor{red}{強制使用:大駝峰命名法}

枚舉的屬性使用全大寫字母,單詞間用下劃線隔開。

示例:let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };

5、常量: 強制使用:使用全大寫字母,單詞間用下劃線隔開

強制使用:大駝峰命名法

命名規則: 可參考vue官網風格指南

例如: 1、按照功能來命名

2、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭,比如 Base、App 或 V。

3、組件名應該以高級別的 (通常是一般化描述的) 單詞開頭,以描述性的修飾詞結尾。

示例:components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

強制使用: 中劃線命名法

命名規則:

1.class、id 、標簽、屬性的命名應該盡量精短、明確,必須以字母開頭命名,且全部字母為小寫,單詞之間統一使用中劃線 「-」 連接

2.class必須代表相應模塊或部件的內容或功能,不得以樣式信息進行命名。

3.元素 id 必須保證頁面唯一。

4.禁止創建無樣式信息的 class

示例:

1、盡量不要縮寫、簡寫的單詞。除了 template => tmp、message => msg、image => img、property => prop 這些單詞已經被公認的縮寫

2、可讀性強的命名優先於簡短的命名

3、命名長度最好在 20 個字元以內,避免多長帶來的閱讀不便

4、命名要有具體的含義,避免使用一些泛指和無具體含義的詞

5、不要使用拼音,更不要使用中文

6、正則表達式用 Exp 結尾

7、ref:使用Ref結尾

⑤ ui切圖怎麼命名給前端

1、所有命名全部為小寫英文字母

原因是開發小哥哥的代碼裡面全是小寫的英文字母,如何切圖命名成中文的話,會導致開發小哥哥將命名全部更改,這樣會耽誤產品開發的進度。

2、所有命名不得出現大寫以及中文和空格或其他符號,單詞之間用_隔開

  • 切圖格式:Png格式

  • 通用切片命名格式:組件_類別_功能_狀態@2x.png

  • 舉例:

    [email protected](中文對應的是:標簽欄_圖標_主頁_默認@2x.png)

1.工程師在實現我們效果圖的過程中,需要計算好每一個元素的位置,然後再調用我們切好的圖進行填充,那麼在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求;

2.切圖輸出應該盡可能的降低工程師的開發工作量,避免因切圖輸出而導致的不必要的工作量,養成良好的命名習慣,比如可以利用版本命名,亦或時間命名都可以更清晰地標明。

3.一個團隊之間應該統一標准,制定並遵循規范,這樣不管是後期版本的跟新迭代或者是設計師之間的交接,都會方便快捷很多。

⑥ 前端開發命名必備單詞

一、導航類

導航:nav 主導航:mainbav 子導航:subnav 頂導航:topnav

邊導航:sidebar 左導航:leftsidebar 右導航:rightsidebar 菜單:menu

子菜單:submenu 標題:title 摘要:summary

二、頁面結構

容器:container 頁頭:header 內容:content/container 頁面主體:main

頁尾:footer 導航:nav 側欄:sidebar 欄目:column

頁面外圍控制整體布局寬度:wrapper 左右中:left right center

三、功能

標志:logo 滾動:scroll 廣告:banner 標簽頁:tab

登錄:login 文章列表:list 登錄條:loginbar 提示信息:msg

注冊:regsiter 當前的:current 搜索:search 小技巧:tips

功能區:shop 圖標:icon 標題:title 注釋:note

加入:joinus 指南:guild 狀態:status 服務:service

按鈕:btn 熱點:hot 合作夥伴:partner 新聞:news

友情鏈接:friendlink 下載:download 版權:right 投票:vote

四、p英文釋譯

標題 title 字體 font 身體 body 大小 size

列表 list 文本 text 樣式 style 對齊 align

圖像 image 修飾 decoration 資源 source 線 line

寬度 width 穿過 through 高度 height 縮進 indent

行 line 斜體 italic 鏈接 link 加粗 bold

斜體 italic 加重 weight 加粗 bold 寬 width

輸入 input 高 height 下面的 under 背景 background

頂部 top 主體 main

五、css英文釋譯

重復 repeat 填充 padding 位置 position 正常 normal

顯示類型 display 父級 parent 顯示可見 visibility 子級 children

隱藏 hidden 頂部導航topnav顯示 visible 溢出 overflow

列表 list 樣式 style 邊框 border 導航 nav

廣告圖片 banner 行高line-height邊界 margin 頁眉 header

六、樣式文件命名

主要的master.css 模塊mole.css 基本共用base.css 布局,版面layout.css

主題themes.css 專欄columns.css 文字font.css 表單forms.css

補丁mend.css 列印print.css

七、顏色釋譯

綠 green 紅 red 藍 blue 黑 black

灰 gray 黃 yellowa 紫 purple 白 white

棕 brown 卡其色 khaki

六、命名參考

登錄條loginBar 標志:logo 側邊欄:sideBar 廣告:banner

導航:nav 子導航:navBar 菜單:menu 子菜單:subMenu

搜索:search 滾動:scroll 頁面主體:main 內容:content

標簽頁:tab 文章列表:list 提示信息:msg 小技巧:tips

欄目標題:title 加入:joins 指南:guild 服務:service

熱點:hot 新聞:news 按鈕:btn 投票:vote

狀態:status 合作夥伴:partner 外套:wrap 商標:label

頂導航:topnav 左導航:leftSideBar 右導航:rightSideBar菜單內容:menuContent

菜單容器:menuContainer注釋:note 邊導航圖標:sidebarIcon版權:right

友情鏈接:friendLink容器:container 頁腳:footer 當前:current

激活:active 購物車:shop 登錄:login 注冊:regsiter

下載:download 麵包屑:breadCrumb

⑦ 為什麼前端命名的時候都愛用下劃線或中劃線

其實命名只要符合規范就行
那為什麼那樣命名呢
主要也是為了好區分 後期好維護
因為現在一個項目不是一個人在做 有很多人
那麼命名的時候 就要事先規范好 這樣便於維護
而且也避免重名 便於查找 差不多就是這樣
你可以去後盾人平台看一下,裡面的東西不錯

⑧ 前端html頁面id命名問題

常用id的命名
(1) 頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
(2) 導航
導航:nav
主導航:mainbav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3) 功能
標志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:regsiter
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標簽頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作夥伴:partner
友情鏈接:link
版權:right