摘要:頁面名稱月影功能模塊,請在模塊之間加入注釋,中英文不做要求活動規則開始活動規則活動規則結束自定義函數。參考頁面前端規范
web前端開發規范的意義
提高團隊的協作能力
提高代碼的復用利用率
可以寫出質量更高,效率更好的代碼
為后期維護提供更好的支持
一、命名規則命名使用英文語義化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合!
項目、目錄、html/css/js等文件命名全部采用小寫方式, 以下劃線分隔。eg:my_project_name
html/css/js文件名一一對應參考微信小程序.eg: login.html、login.css、login.js
class、圖片、視頻、音頻采用小寫方式,以下劃線或中劃線分隔;eg:btn-play或btn_play
id可采用駝峰命名;eg:play或playGame
變量名采用小寫方式, 以下劃線分隔;應為名詞,eg: product,product_detail
常量采用全大寫方式, 以下劃線分隔;eg:MAX_COUNT
函數名采用駝峰命名,以動詞開始。 getName(), 返回類型是布爾類型,一般以is開頭,eg: isEnable();
變量和函數命名,不要擔心長度,一定要語義化合乎邏輯。eg: saveImageToPhotosAlbum()
變量和函數名不能以數字開始,不能使用保留字;jQuery對象以"$"符號開頭,私有變量以"_"開頭。
二、注釋頁面頭部需要添加制作時間等信息。
頁面名稱
功能模塊,請在模塊之間加入注釋,中英文不做要求:
......活動規則{{index+1}}{{item}}
/* rules start*/ .rules-wrapper{...} .rules-title{...} .rules-list{...} .rules-item{...} .rules-num{...} .rules-text{...} /* rules end*/
自定義函數。請注明函數的調用方式,包括函數的用途、參數類型等。
/** * JQ公告滾動 封裝函數 * 參數說明 * @obj : 動畫的節點,本例中是ul * @top : 動畫的高度,本例中是-35px;注意向上滾動是負數 * @time : 動畫的速度,即完成動畫所用時間,本例中是500毫秒,即marginTop從0到-35px耗時500毫秒 * function : 回調函數,每次動畫完成,marginTop歸零,并把此時第一條信息添加到列表最后; * */ function noticeUp(obj,top,time) { $(obj).animate({ marginTop: top }, time, function () { $(this).css({marginTop: "0"}).find(":first").appendTo(this); }) } $(function () { // 調用 公告滾動函數 setInterval("noticeUp(".notice ul","-35px",500)", 2000); });三、HTML規范 1、頁面頭部
文檔類型統一使用html5的doctype:
lang屬性統一使用en,特殊場景特殊處理
字符編碼統一指定為"UTF-8"
頁面標題(Title): 頁面名稱-產品中文全稱-官方網站-騰訊游戲-產品slogan,28個漢字以內
頁面關鍵字(Keywords): Keywords為產品名、專題名、專題相關名詞,之間用英文半角逗號隔開
頁面描述(Description) :不超過150個字符,描述內容要和頁面內容相關。
IE兼容模式
移動端禁止縮放
PC端頭部示范:
抓金角銀角大王每周末放送裝備 - 地下城與勇士官方網站 - 騰訊游戲
移動端頭部示范:
2、HTML標簽頁面名稱-產品中文全稱-官方網站-騰訊游戲-產品slogan
標簽必須合法且閉合、嵌套正確,標簽名需小寫,不要使用HTML5已經廢棄的標簽。eg:b、 em
自定義標簽需要符合語義化,必須小寫
標簽的自定義屬性以data-開頭,后面跟小寫單詞,多單詞使用下劃線連接如:
縮進使用Tab鍵不要使用空格鍵,webstorm中使用快捷鍵command+option+L(Ctrl+Alt+L)對齊
引入CSS 和 JavaScript 文件時一般不需要指定 type 屬性,因為 text/css 和 text/javascript 分別是它們的默認值。css放在上面head中,JavaScript放在body下面緊臨
標簽中屬性必須添加雙引號(非單引號),應該按照特定的順序出現以保證易讀性;屬性順序
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是為高可復用組件設計的,所以應處在第一位;
id更加具體且應該盡量少使用,所以將它放在第二位。
boolean屬性指不需要聲明取值的屬性,XHTML需要每個屬性聲明取值,但是HTML5并不需要;boolean屬性的存在表示取值為true,不存在則表示取值為false。
在編寫HTML代碼時,需要盡量避免多余的父節點;很多時候,需要通過迭代和重構來使HTML變得更少。刪除無意義的空標簽,不要用標簽名來設置樣式
三、CSS規范 1、CSS引入方式
一般情況使用外部樣式表:統一使用link標簽,少用@import(原生import有加載性能問題),sass、less、vue.js等文件使用import命令除外(因為最終前端構建工具會將引入文件編譯成一個css文件)。
個別情況使用內部樣式表:頁面非常簡單且樣式非常少的多帶帶頁面,如:純圖片海報頁面,純文字協議頁面
特殊情況才使用行內樣式:如: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:統一使用
優點:
1.頁面代碼跟js代碼實現有效分離,降低耦合度
2.便于代碼的維護和擴展
3.有利于代碼的復用
內部js: 在直接在頁面的標簽內寫js代碼,vue項目多用此方式
優點:內部js代碼較為集中,與頁面結構的實現代碼耦合度較低,比較便于維護
缺點:js代碼僅限于當前頁面的使用,代碼無法被多個頁面重復使用,導致代碼冗余度較高
行內js: 直接嵌套在html的語句
開發中不推薦這種方式2、Javascript代碼編寫
1.因為這種方式跟頁面結構代碼耦合性太強了,后期維護很不方便,
2.而且這種方式在開發過程中會導致產生很多的冗余代碼
目前只在使用了webpack等打包工具的時候才能用ES6語法,所以一般項目還是采用ES5。
一條語句通常以分號作為結束符。
變量必須先聲明再使用,即在每個作用域開始前聲明這些變量。
函數聲明使用表達式方式
// bad const fn= function () { }; // good function fn() { }
除了三目運算,if,else等禁止簡寫
3、Javascript框架以及插件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?"再售":"已售"):"未售") // 再多就不要用三元運算符!
必須掌握jQuery和Vue;
工作中jQuery一般用在維護老項目,新項目一般都采用Vue。其他框架稍作了解,遇到了去查文檔。(業余時間可以自學angular和React以及你喜歡的框架)
移動端:Mint UI
PC端官網、商城: Element
PC端后臺管理系統:layui或者 iView
輪播圖:swiper
滾動插件:iScroll 或 better-scroll
響應式官網: 盡量使用媒體查詢自定義樣式,不推薦使用bootstrap(因為我不喜歡記那一堆類名^_^)。
將常用的功能封裝在util.js中,大家共同完善;方便以后使用。
參考
Code Guide by @AlloyTeam
頁面前端規范
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101810.html
摘要:年,和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后,前端開發者可以從瀏覽器開發中學習到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:年,和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后,前端開發者可以從瀏覽器開發中學習到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:年,和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后,前端開發者可以從瀏覽器開發中學習到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
閱讀 1785·2023-04-26 00:47
閱讀 1543·2021-11-11 16:55
閱讀 2597·2021-09-27 14:04
閱讀 3548·2021-09-22 15:58
閱讀 3554·2021-07-26 23:38
閱讀 2129·2019-08-30 13:47
閱讀 1979·2019-08-30 13:15
閱讀 1142·2019-08-29 17:09