Web前端开发标准规范
生活随笔
收集整理的這篇文章主要介紹了
Web前端开发标准规范
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
web前端開發規范的意義
- 提高團隊的協作能力
- 提高代碼的復用利用率
- 可以寫出質量更高，效率更好的代碼
- 為后期維護提供更好的支持
一、命名規則
二、注釋
- 頁面頭部需要添加制作時間等信息。
- 功能模塊，請在模塊之間加入注釋，中英文不做要求：
- 自定義函數。請注明函數的調用方式，包括函數的用途、參數類型等。
三、HTML規范
1、頁面頭部
PC端頭部示范：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!-- 月影 2019-02-19 --><title>抓金角銀角大王每周末放送裝備 - 地下城與勇士官方網站 - 騰訊游戲</title><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="keywords"content="英雄聯盟,lol,lol新手禮包,lol攻略,lol視頻,lol視頻攻略,英雄資料,英雄聯盟戰爭學院,明星解說視頻,101戰爭學院,英雄,攻略,WCG,點亮圖標,賽事"/><meta name="description"content="英雄聯盟官方網站，海量風格各異的英雄，豐富、便捷的物品合成系統，游戲內置的匹配、排行和競技系統，獨創的“召喚師”系統及技能、符文、天賦等系統組合，必將帶你進入一個嶄新而又豐富多彩的游戲世界。"/> </head> <body> </body> </html>移動端頭部示范：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!-- 月影 2019-02-19 --><title>頁面名稱-產品中文全稱-官方網站-騰訊游戲-產品slogan</title><!-- 禁止縮放 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- 為了防止頁面數字被識別為電話號碼，可根據實際需要添加： --><meta name="format-detection" content="telephone=no"><!-- 讓添加到主屏幕的網頁再次打開時全屏展示，可添加： 刪除默認的蘋果工具欄和菜單欄 --><meta content="yes" name="mobile-web-app-capable"><meta content="yes" name="apple-mobile-web-app-capable"><meta name="Description" content="頁面的描述內容"/><meta name="Keywords" content="頁面關鍵字"/><!-- External CSS --><link rel="stylesheet" href="demo.css"><!-- In-document CSS --><style></style> </head> <body><!-- External JS --> <script src="demo.js"></script><!-- In-document JS --> <script></script> </body> </html>2、HTML標簽
標簽中屬性必須添加雙引號（非單引號)，應該按照特定的順序出現以保證易讀性；屬性順序
classid
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。
三、CSS規范
1、CSS引入方式
-
一般情況使用外部樣式表：統一使用link標簽，少用@import（原生import有加載性能問題），sass、less、vue.js等文件使用import命令除外（因為最終前端構建工具會將引入文件編譯成一個css文件）。
<link rel="stylesheet" href="xxx.css"> -
個別情況使用內部樣式表：頁面非常簡單且樣式非常少的單獨頁面，如：純圖片海報頁面，純文字協議頁面
<style> ... </style> -
特殊情況才使用行內樣式：如：js動態獲取滾動高度：
style="height:{{scroll_height}}px;"
2、CSS代碼風格
- css頭部統一加上@charset聲明，如下： @charset "utf-8";
- 禁止使用ID選擇器來定義元素樣式
- 禁止使用層級過深的選擇器，最多3級。eg: ul.pro_list > li > p
-
除非是樣式reset需要，禁止對純元素選擇器設置特定樣式，避免樣式污染
PC端和移動端通用reset示例
body,html{width:100%;min-height:100%;/*移動端*/-webkit-user-select:none;user-select:none/* 禁止選中文本（如無文本選中需求，此為必選項） */} body{background-color:#fff;color:#333;font-size:16px;font-family:PingFangSC-Regular} a,body,button,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,table,td,textarea,th,tr,ul{box-sizing:border-box;margin:0;padding:0;border:0} button,input,select,textarea{outline:0;font-size:100%} h1,h2,h3,h4,h5,h6{font-size:100%} li,ol,ul{list-style:none} a{cursor:pointer} a,a:hover{text-decoration:none} ::-webkit-input-placeholder{color:#B0B0B0} :-moz-placeholder{color:#B0B0B0} ::-moz-placeholder{color:#B0B0B0} :-ms-input-placeholder{color:#B0B0B0} -
媒體查詢順序由大到小
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {} @media only screen and (max-width: 960px), only screen and (max-device-width:960px) { } - 縮進 使用soft tab（4個空格）
- 分號 每個屬性聲明末尾都要加分號。
- 引號 最外層統一使用雙引號；url的內容要用引號；屬性選擇器中的屬性值需要引號。
-
空格
以下幾種情況不需要空格：
屬性名后 多個規則的分隔符','前 !important '!'后 屬性值中'('后和')'前 行末不要有多余的空格以下幾種情況需要空格：
屬性值前 選擇器'>', '+', '~'前后 '{'前 !important '!'前 @else 前后 屬性值中的','后 注釋'/*'后和'*/'前 -
CSS屬性的聲明順序與性能無關，但是為了易于閱讀統一規范 按如下順序
.declaration-order {/* 定位 */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;float: right;/* 盒模型 */display: block;width: 100px;height: 100px;/* 外觀 */border: 1px solid #e5e5e5;border-radius: 3px;background-color: #f5f5f5;/* 排版 */color: #333;text-align: center;font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;/*透明度*/opacity: 1; } - 采用flex布局
- 項目上線前先添加兼容性前綴 Autoprefixer，然后壓縮代碼
2、CSS框架
- 阿里圖標庫
- css3 動畫庫
- Sass和Compass
四、Javascript規范
1、Javascript引入方式
-
一般情況使用外部js：統一使用<script>標簽，少用@import（原生import有加載性能問題）， 使用webpack等打包工具的項目使用import命令除外。js在body底部緊貼</body>引用，先引框架js的再引工具類js然后私有js的最后寫內部的js。如下
<script src="./plugins/layui/layui.js"></script><script src="./plugins/vue/vue.min.js"></script><script src="./plugins/js/util.js"></script><script src="./js/index.js"></script><script> ... </script> 優點：
1.頁面代碼跟js代碼實現有效分離，降低耦合度
2.便于代碼的維護和擴展
3.有利于代碼的復用 -
內部js: 在直接在頁面的<script></script>標簽內寫js代碼，vue項目多用此方式
<script>layui.use('console', layui.factory('console')); </script> 優點：內部js代碼較為集中，與頁面結構的實現代碼耦合度較低，比較便于維護
缺點：js代碼僅限于當前頁面的使用，代碼無法被多個頁面重復使用，導致代碼冗余度較高 -
行內js: 直接嵌套在html的語句
<input type="button" onclick="alert('行內引入')" value="button" name="button"> 開發中不推薦這種方式
1.因為這種方式跟頁面結構代碼耦合性太強了，后期維護很不方便，
2.而且這種方式在開發過程中會導致產生很多的冗余代碼
2、Javascript代碼編寫
- 目前只在使用了webpack等打包工具的時候才能用ES6語法，所以一般項目還是采用ES5。
- 一條語句通常以分號作為結束符。
- 變量必須先聲明再使用，即在每個作用域開始前聲明這些變量。
-
函數聲明使用表達式方式
// badconst fn= function () {}; // goodfunction fn() {} -
除了三目運算，if,else等禁止簡寫
console.log(name);// 不推薦的書寫if (true)alert(name);console.log(name);// 不推薦的書寫if (true)alert(name);console.log(name)// 正確的書寫if (true) {alert(name);}使用三元運算符，但不要濫用
(type==1?(agagin==1?'再售':'已售'):'未售')// 再多就不要用三元運算符！
3、Javascript框架以及插件
- 必須掌握jQuery和Vue；
- 工作中jQuery一般用在維護老項目，新項目一般都采用Vue。其他框架稍作了解，遇到了去查文檔。（業余時間可以自學angular和React以及你喜歡的框架）
- 移動端：Mint UI
- PC端官網、商城： Element
- PC端后臺管理系統：layui或者 iView
- 輪播圖：swiper
- 滾動插件：iScroll 或 better-scroll
- 響應式官網： 盡量使用媒體查詢自定義樣式，不推薦使用bootstrap(因為我不喜歡記那一堆類名^_^)。
- 將常用的功能封裝在util.js中，大家共同完善；方便以后使用。
參考
Code Guide by @AlloyTeam
頁面前端規范
總結
以上是生活随笔為你收集整理的Web前端开发标准规范的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Webpack vs Rollup
- 下一篇： 【前端词典】进阶必备的网络基础（下）