前端程式碼開發規範。web開發規範。web開發注意事項。前端開發如何寫出更規範的程式碼

阿新 • • 發佈：2019-01-18

一、圖片觀看：

二、文字描述：

1，web開發基本原則：

1.結構html，樣式css，行為js：三者要分離，儘量確保文件和模板只包含HTML結構，樣式都放到樣式表裡，行為都放到腳本里;
2.縮排：統一縮排方式：整體tab /整體空格;
3.檔案編碼：在HTML中指定編碼<meta charset =“utf-8”>，無需使用@charset（CSS字符集指定樣式表的編碼）;
4。 html元素一律使用小寫字母;
5.外鏈資源：省略（圖片及其它媒體資源）URL中的http / https協議，使URL成為相對地址，它協議（ftp等）的URL不省略;
6.統一註釋：

html註釋區分模組和區塊內容;
CSS註釋元件塊和子元件塊以及宣告塊之間使用一空行分隔，子元件塊之間三空行分隔;

JS註釋區分單行和多行註釋和檔案註釋在告訴不熟悉這段程式碼的讀者這個檔案中包含哪些東西應該提供檔案的大體內容，它的作者，依賴關係和相容性資訊）。

_____________________________________________________________________________________

2，HTML部分：
1.通用約定：
1.1 。標籤：單標籤無需閉合，雙標籤必須閉合;儘量減少標籤數和複雜度;

1.2.class和id：class應該功能或內容命名，不已表現形式命名;單詞過時時，應注意書寫格式; id作為選擇器唯一表示符（鉤子機制），同時避免建立無樣式資訊的類;
1.3屬性編寫順序：ID>類>名稱>資料- ×××>的src /為/型別/ HREF>標題/ ALT> aria-×××/作用;
1.4。儘量使用雙引號定義元素屬性;
1.5。元素巢狀：
<a>元素不要巢狀<a>元素，也不要巢狀<div>元素;
嚴格巢狀模式下：<a>元素不可以巢狀互動式元素，<a> / <button> / <select>等;

<素>不可巢狀塊級元素，<div> / <h1>〜<h6> / <p> / <ul> /
1.6 ; <form>等; 1.6。布林值屬性：disabled，checked，selected等屬性不用設定值。<input type =“text”disabled>;
2.標籤語義化：沒有CSS的HTML是一個語義系統而不是UI系統。此外語義化的HTML結構，有助於機器（搜尋引擎）理解，另一方面多人協作時，能迅速瞭解開發者意圖;
3.HEAD：
3.1。文件型別 - 標準模式宣告：<！DOCTYPE html>能夠確保在每個瀏覽器中擁有一致的表現;
3.2。語言屬性：中文-lang =“zh-Hans”，簡體中文 - LANG =”
3.3.IE相容模式：<meta http-equiv =“X-UA-Compatible”content =“IE = edge，chrome = 1”>;
3.4.SEO優化：
<head>
<meta charset =“utf-8”>
<meta http-equiv =“X-UA-Compatible”content =“IE = edge，chrome = 1”>
<meta name =“keywords”content =“your keywords”>
<meta name =“description”content =“your描述“>
<meta name =”author“content =”author，email address“>
<title> Style Guide </ title>
</ head>
3.5。支援移動端裝置優化，設定可見區域的寬度和初始縮放比例。
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0“>
3.6.iOS圖示處理：
apple-touch-icon圖片自動處理成圓角和高光等效果;

蘋果觸控圖示 - 預組合禁止系統自動新增效果，直接顯示設計原圖;

_______________________________________________________________________________________

3，CSS部分：
1.通用約定：
1.1。制定一致的註釋規範：元件塊和子元件塊以及宣告塊之間使用一空行分隔，子元件塊之間三空行分隔;
1.2.class和id：使用語義通用的命名方式;避免選擇器巢狀層級過多;避免選擇器和類，ID疊加使用;使用連字元 - 作為ID，類名稱界定符，不要駝峰命名法和下劃線;
1.3。相關屬性宣告定義定位>盒模型盒模型>字型樣式Typographic>視覺顏色
樣式Visual>其它樣式; 1.4.url（）引用使用：屬性選擇符，屬性值使用雙引號;
1.5。媒體查詢（Media query）的位置：將媒體查詢放在儘可能相關規則的附近。不要將他們打包放在一個單一樣式檔案中或者放在文件底部。如果你把他們分開了，將來只會被大家遺忘。1.6
。不要使用@import ，與<鏈路>相比，@進口要慢很多，不光增加額外的請求數，還會導致不可預料的問題。
替代辦法：通過Sass或Less類似的CSS前處理器將多個CSS檔案編譯為一個檔案;其他CSS檔案合併工具;
連結的樣式順序：a：link - > a：visited - > a：hover - > a：活躍（LoVeHAte）
2。
2.1。元件元件：從元件的角度思考，將網站的模組都作為一個獨立的元件
。2.2。元件命名命名元件：元件最少以兩個單詞命名，通過 - 分離，點贊按鈕（.like-button） ;
2.3。元素Elements：Elements是Components中的元素;
2.4。元素命名Naming elements：Elements的類名應儘可能僅有一個單詞;
2.5。多個單詞On multiple words：對於倘若需要兩個或以上單詞表達的元素類名，不應使用中劃線和下劃線連線，應直接 - 連線，中劃線比下劃線更容易輸出;
2.6。避免標籤選擇器避免標籤選擇器：任何時候儘可能使用classnames。標籤選擇器在使用上沒有問題，但是其效能上稍弱，並且表意不
明確; 2.7.layout（佈局）之間避免定位屬性避免定位屬性：元件應該在不同的上下文中都可以複用，所以應避免設定以下屬性，定位（位置，頂部，左側，右側，底部），浮動（浮動，清除），邊距（餘量），尺寸（寬度，高度）*;
2.8.layout（佈局）之固定尺寸固定尺寸：頭像和標誌這些元素應該設定固定尺寸（寬度，高度...）;
2.9.layout（佈局）之在父元素中設定定位：若若需要為元件設定定位，應將在元件的上下文（父元素）中進行處理
。2.10.layout（佈局）之間避免過分巢狀避免過度巢狀：當出現多個巢狀的時候容易失去控制，應保持不超過一個巢狀
。3.Less規範：
3.1。程式碼按以下順序組織：@import >>變數宣告>>樣式宣告;
3.2。@ import語句檔案引用：@import語句引用的文需要寫在一對引號內，.less字尾不得省略。引號使用'和'均可，但在同一專案內需統一
。3.3。less-mixin ）：mixin方法：一堆屬性從一個規則集到另一個規則集。less
，sass這些css預處理語言中的混合，可以理解成自定義了一段程式碼，後面可以用@include呼叫，如設定一個（預設寬高比的混合）
。// scss
@mixin box-size（$ width：100px，$ height：100px）{
width：$ width;
height：$ height;
} / *類似帶引數數量封裝* /
.demo {
@include box-size;
}
.demo2 {
@include box-size（200px，300px）;
}
//編譯之後
/ * css * /
.demo {
width：100px;
height：100px;
}
.demo2 {
width：200px;
height：300px;
}
3.4。避免巢狀層級過多：將巢狀深度限制在2級。對於超過3級的巢狀，給予重新評估;
3.5。字串插入值：變數可以用類似ruby和php的方式嵌入到字串中，像@ {name}這樣的結構：@ base-url：“http://assets.fnord.com”; background-image：url（“@ {base-url} /images/bg.png”）;

4.效能優化：
4.1。慎重選擇高消耗的樣式（高消耗屬性在繪製前需要瀏覽器進行大量計算）：陰影box-shadows，圓角border-radius，透明度transparenc，過渡轉換，濾鏡樣式CSS filters 。
http://www.cnblogs.com/zhenmingliu/archive/2012/05/05/2484720.html濾波器在CSS用的效果。
4.2。避免過分重排（當發生重排的時候，瀏覽器需要重新計算佈局位置與大小）：常見重排元素，寬度，高度，填充，邊距，顯示，邊框寬度，位置，頂部，左，右，底部，字型大小，浮動，文字對齊，溢位y，字型-
正確使用Display的屬性（Display屬性會影響頁面的渲染）：display：inline後不應該再使用width，height，margin，padding以及float; display：inline-block後不應該再使用float; display：block後不應該再使用vertical-alig n; display：table- *後不應該再使用margin或者float;
4.4。不濫用Float：Float在渲染時計算量比較大，儘量減少使用;
4.5。多利用硬體能力，如通過3D變形開啟GPU加速：一般在Chrome中，3D或透視變換（perspective transform）CSS屬性和對不透明進行CSS動畫會建立新的圖層，在硬體加速渲染通道的優化下，GPU完成3D變形等操作後，將圖層進行復合操作（Compesite Layers），從而避免觸發瀏覽器大面積重繪和重選。4.6。
提升CSS選擇器效能：1，避免使用通用選擇器; 2，避免使用標籤或類選擇器限制ID選擇器; 3，避免使用標籤限制類選擇器; 4，避免使用多層標籤選擇器。使用類選擇器替換，減少css查詢; 5，避免使用子選擇器; 6，使用繼承;
___________________________________________________________________________________________
4，js部分：
1.通用約定：
1.1。註釋原則：儘量提高程式碼本身的清晰性，可讀性（如無必要，勿增註釋）;
合理的註釋，空行排版等，可以讓程式碼更易閱讀，更具美感（如有必，儘量詳盡）;
1.2。函式/方法註釋：1必須包含函式說明，有引數和返回值時必須使用註釋標識; 2引數和返回值註釋必須包含型別資訊和說明; 3。當函式是內部函式，外部不可訪問時，可以使用@inner標識;
1.3。檔案註釋：檔案註釋用於告知不熟悉這段程式碼的讀者這個檔案中包含哪些東西。應該提供檔案的大體內容，它的作者，依賴關係和相容性資訊。\
1.4。命名之變數，函式及函式引數：駱駝式命名法（Camel-Case）;三種程式設計命名規範（匈牙利命名法（下劃線），駝峰式命名法（大駝峰），帕斯卡命名法），var loadingModules = {};
1.5。命名之私有屬性，變數和方法：以下劃線_開頭，var _privateMethod = {};
1.6。命名之常量：使用全部字母大寫，單詞間下劃線分隔的命名方式，var HTML_ENTITY = {};
1.7。命名之類：使用使用Pascal命名法（大駝峰），函式stringFormat（source）{};
1.8。類的方法/屬性：Camel命名法（小駝峰），TextNode.prototype.clone = function（）{ };
1.9。列舉變數：使用Pascal命名法，var TargetState = {READING：1，READED：2，};
1.10。列舉的屬性：使用全部字母大寫，單詞間下劃線分隔的命名方式，var TargetState = {READING：1，READED：2，};
1.11命名語法：
類名：使用名詞，函式Engine（options）{};函式名：使用動賓賓語，函式getStyle（element）{};布林型別變數：is或has開頭，var hasMoreCommands = false; Promise物件：用動賓短語的進行時表達，var hasMoreCommands = false;
1.12。介面命名規範：可讀性強，見名知意;儘量與jquery已有的衝突;儘量寫全，少用縮寫除非是jquery社群提前約定好的;
1.13.true和false布林表示式：型別檢測優先使用typeof。
物件型別檢測使用instanceof。null
或undefined的檢測使用==
null。false = nulll / undefined /“”/ 0; 真= “0”/ [] / {};
1.14。不要在Array中使用For迴圈：for-in迴圈只用於object / map / hash的遍歷，對Array迴圈有時會出錯。因為它並不是從0到length - 1進行遍歷，而是所有出現在物件及其原型鏈的鍵值。1.15
。二元和三元操作符：操作符始終寫在前一行，以免分號的隱式插入產生預想不到的問題。
var z = a？
moreComplicatedB：
moreComplicatedC;
1.16。三元操作符用於替代if條件判斷語句.return val？foo（）：bar（）;
1.17。&&和|| ：二元布林操作符是可短路的，只有在必要時才會計算到最後一項。2.

效能優化：
2.1。避免不必要的DOM操作：瀏覽器遍歷DOM元素的代價是昂貴的。最簡單優化DOM樹查詢的方案是，當一個元素出現多次時，將它儲存在一個變數中，就避免多次查詢DOM樹了
。var myList =“”;
var myListHTML = document.getElementById（“myList”）。innerHTML;
for（var i = 0; i <100; i ++）{
myList + =“<span>”+ i +“</ span>”;
}
myListHTML = myList;
2.2。
var arr = new Array（1000），len，i;
對於（i = 0，len = arr.length; i <len; i ++）{};
2.3。非同步載入第三方內容：當你無法保證嵌入第三方內容比如Youtube視訊或者一個like / tweet按鈕可以正常工作的時候，你需要考慮用非同步載入這些程式碼，避免阻塞整個頁面載入。
（函式（）{
VAR指令碼，
指令碼= document.getElementsByTagName（ '指令碼'）[0];
功能負載（URL）{
指令碼=使用document.createElement （'script'）;
script.async = true;
script.src = url;
scripts.parentNode.insertBefore（script，scripts）;
}
load（'// apis.google.com/js/plusone.js'）;
負載（ '// platform.twitter.com/widgets.js'）;
負載（ '// s.widgetsite.com/widget.js'）;
}（））;
2.4。避免使用jQuery實現動畫：禁止使用slideUp / Down（）fadeIn / fadeOut（）等方法;儘量不使用animate（）方法;
_______________________________________________________________________________
5，移動端部分優化：
1.click的300ms延遲響應：點選300ms延遲是由雙擊縮放（雙擊縮放）所導致的，由於使用者可以進行雙擊縮放或者雙擊滾動的操作，當用戶一次點選螢幕之後，瀏覽器並且不能立刻判斷使用者是確實要開啟這個連結，還是想要進行因此，移動端瀏覽器就等待300毫秒，以判斷使用者是否再次點選了螢幕。隨著響應式網頁逐漸增加，使用者使用雙擊縮小機會減少，這300ms的延遲就更不可接受了。解決移動端瀏覽器300毫秒點選延遲問題所開發的一個輕量級的庫FastClick就是很好的選擇.FastClick在檢測到touchend事件的時候，會通過DOM自定義事件立即觸發一個模擬點選事件，並把瀏覽器在300毫秒之後真正觸發的單擊事件阻止掉。
快點選的使用方法非常簡單，在視窗載入事件之後，在<body>上呼叫FastClick.attach（）即可。window.addEventListener
（“load”，function（）{
FastClick.attach（document.body）;
}，false）;
2.快速回滾滾動：如果想要為某個元素擁有本地般的滾動效果，可以這樣操作，
.element {
overflow：auto; / * auto | 滾動* /
-webkit-overflow-scrolling：touch;
}
除了iScroll之外，還有一個更加強大的滾動外掛組隊，探索（是免費且最現代的移動觸控滑塊http://idangero.us/swiper/#.VfaVk52qqko ），支援3D和內建滾動條等。

3 。裝置檢測：
var WIN = window;
var LOC = WIN [“location”];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase（）;
功能測試（needle）{
return needle.test（UA）;
}
WIN中的var IsTouch =“ontouchend”;
var IsAndroid = test（/ android | htc /）|| /linux/i.test(NA.platform +“”）;
var IsIPad =！IsAndroid && test（/ ipad /）;
var IsIPhone =！IsAndroid && test（/ ipod | iphone /）;
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test（/ windows phone /）;
var IsWebapp = !! NA [“standalone”];
var IsXiaoMi = IsAndroid && test（/ mi \ s + /）;
var IsUC = test（/ ucbrowser /）;
var IsWeixin = test（/ micromessenger /）;
var IsBaiduBrowser = test（/ baidubrowser /）;
var IsChrome = !! WIN [“chrome”];

var IsPC =！IsAndroid &&！IsIOS &&！IsWinPhone;
var IsHTC = IsAndroid && test（/ htc \ s + /）;
var IsBaiduWallet = test（/ baiduwallet /）;
4.獲取滾動條值：PC端滾動條的值是通過document.scrollTop和document.scrollLeft獲得，但在iOS中並沒有滾動條的概念，所以只能通過windows.scroll獲取，同時也能相容Android。
window.scrollY;
window.scrollX;
5.清除輸入框內陰影：在iOS上，輸入框預設有內部陰影，但無法使用box-shadow來清除，如果不需要陰影，可以這樣操作;
輸入，textarea {
border：0; / *方法1 * /
-webkit-appearance：none; / *方法2 * /
}
6.Meta相關：頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面;
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0，minimum-scale = 1.0，maximum-scale = 1.0，user-scalable = no”/>
7.電話號碼識別：iOS Safari （Android或其他瀏覽器不會）會自動識別看起來像電話號碼的數字，將其處理為電話號碼連結;
<！ - 關閉電話號碼識別： - >
<meta name =“format-detection”content =“telephone = no”/>
<！ - 開啟電話功能： - >
<a href =“tel：123456” > 123456 </a>
<！ - 開啟簡訊功能： - >
<a href="sms:123456"> 123456 </a>
8.郵箱地址識別：在Android（iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字串，不論有你沒有加上郵箱連結，當你在這個字串上長按，會彈出發郵件的提示。
< -關閉郵箱地址識別： - >
< meta name =“format-detection”content =“email = no”/>

9.指定iOS的safari頂端狀態條的樣式：<meta name =“apple-mobile-web-app-status-bar-style”content =“default / black / black-translucent”/>

本文件僅供初學者或首次開發提供參考。如代解釋不清晰之處，請見諒。如果有更好的前端開發程式碼規範經驗，歡迎指點一二。謝謝觀看!!!

前端程式碼開發規範。web開發規範。web開發注意事項。前端開發如何寫出更規範的程式碼

前端程式碼開發規範。web開發規範。web開發注意事項。前端開發如何寫出更規範的程式碼

《程式設計珠璣》程式碼之路12：如何用C/C++實現array[-1]並利用它寫出優美的程式碼

如何寫出整潔規範的R程式碼？是時候討論一下程式碼規範性了

《連載 | 物聯網框架ServerSuperIO教程》- 5.輪詢通訊模式開發及注意事項。附：網友製作的類庫說明（CHM）

Android TV開發中所有的遙控器按鍵監聽及注意事項，新增home鍵監聽

iOS開發：2017 蘋果APP上架更新應用版本注意事項及APP版本迭代步驟方法

程式設計師如何寫出優雅的程式碼？

Java 11正式釋出，這8個逆天新特性教你寫出更牛逼的程式碼

Java 11 正式釋出，這 8 個逆天新特性教你寫出更牛逼的程式碼

前端學習筆記-8.6css前處理器Stylus問題報錯注意事項在vue-cli專案中

Java 11正式釋出，這幾個逆天新特性教你寫出更牛逼的程式碼

驚！女朋友用Python寫出幾行程式碼就監控了我的電腦，吃雞被發現了

力薦！這些工具可以幫你寫出乾淨的程式碼

寫出優質Java程式碼的4個技巧

程式設計師如何才能寫出優秀的程式碼

django 資料庫增強工具 south 的安裝使用和注意事項。。。

pg_reload 如何使用以及注意事項。

iis和apache共享80埠。phpstudy 搭建PHP注意事項。

C/C++之寫出高質量程式碼

如何寫出更好的Java程式碼

前端程式碼開發規範。web開發規範。web開發注意事項。前端開發如何寫出更規範的程式碼

相關推薦