前端開發的一些實踐規範
一、HTML實踐
- 使用標準的
HTML5簡化的定義的方式- 定義文件型別
<!DOCTYPE html> - 定義頁面的編碼
<meata charset="UTF-8"> - 樣式和頁尾的引用，不需要寫
type型別，如linkscript
- 定義文件型別
- 停止使用不標準的標籤和屬性，如
mqrquee - 不推薦在
HTML標籤中新增樣式屬性，如img標籤中新增寬高 - 不要使用
@import，此方式最大的缺點是引用css檔案不能同時並行下載 - 增加
JavaScript禁用的提示資訊，最常用的方式是使用<noscript> - 新增必要的
meta標籤 - 使用頻率較高的語義化標籤
puldlpemstrongtablesiteblockquotenavheaderfooterarticlesectionasidehground
- 樣式和結構的分離：把
HTML中用於表達外觀的部分從HTML中刪除，並用css實現。如<span>|</span>中的|用css的偽類實現即可 - 如果圖片作為頁面內容的一部分，應該使用
img標籤，如果圖片僅僅是裝飾作用，應該使用背景圖片方式 - 提高表單易用性的手段
- 使用
label標籤，並設定label標籤的for屬性 - 給輸入控制元件設定合理的
placehoder - 如有必要，給輸入控制元件設定
tab順序，tabindex用來設定輸入控制元件的切換順序<input type="text" tabindex="2"> - 使用
HTML5中引入的表單控制元件url email date search - 精簡
HTML程式碼 - 刪除多餘的容器
- 裝飾性的元素使用
css實現 - 避免使用
table佈局
- 使用
二、CSS實踐
- 推薦的
css類的命名規則和元素的id命名規則相似，只是組成類名的關鍵字的連線符為中劃線-.reder-content-title- 為了避免
class命名的重複，命名時取父元素的class作為字首
- 為了避免
- 使用
css reset統一瀏覽器的顯示效果 - 給
css樣式定義排序，最佳是按型別分組排序- 顯示與浮動、定位、尺寸、邊框相關屬性、字型樣式、背景、其他樣式
- 合理利用
css的權重，提高程式碼的重用性css樣式中儘量不要使用ID選擇器，最佳實踐儘可能使用較低權重的選擇器作為基礎樣式- 減少自選擇器的層級
- 使用組合的
css選擇器 empx%w3c把尺寸單位分為相對長度單位和絕對長度單位兩種。- 相對長度單位又分為字型相對單位和視窗相對單位
- 字型相對單位包括：
emexchrem - 視窗相對單位包括：
vwvhvminvmax - 使用最廣泛的是
empx百分比
- 字型相對單位包括：
em計算是相對自身元素的字型尺寸的，rem相對於根元素的字型大小計算， 百分比是相對於父元素的尺寸的- 如何設定元素的尺寸和字型大小最佳實踐
- 儘量設定相對尺寸（區域性的尺寸要儘量使用相對尺寸，即區域性自適應）
- 只有在可預知元素尺寸的情況下才使用絕對尺寸
- 使用
em設定字型大小
css選擇器定義最佳實踐- 避免使用萬用字元
- 避免使用標籤選擇器及單個屬性選擇器作為關鍵選擇器
- 不要在
id選擇器前使用標籤名 - 儘量不要使在選擇符中定義過多的層級，最好不要超過三層
css相關圖片處理- 不要設定圖片尺寸
- 使用
css雪碧圖技術 - 減少
css程式碼量- 定義簡潔的
css規則 - 合併相關的
css規則 - 定義簡潔的屬性值合併相同的定義
- 定義簡潔的
三、JavaScript實踐
- 避免定義全域性變數或函式
- 使用
var - 使用
JavaScript的嚴格模式use strict;
- 使用
- 使用簡化的編碼方式
- 物件建立
pserson={age:22,name:"poetries"} - 陣列建立
list=[12,23,55]
- 物件建立
- 使用
===和!==而不是==和!= - 避免使用
with語句和eval() - 使用更嚴格的編碼格式
- 使用嚴格模式遵循：
- 不要在全域性中啟用嚴格模式
- 在已有程式碼中謹慎使用嚴格模式
- 嚴格模式主要對不合理的地方做了改進
- 禁用
width關鍵字 - 防止意外的全域性變數
- 函式中的
this不在預設指向全域性 - 防止函式引數重新命名
- 更安全的使用
eval()
- 禁用
- 事件處理和業務邏輯相分離
- 配置資料和程式碼邏輯相分離
- 邏輯與結構相似相分離
- 從
JavaScript邏輯中分離css樣式 - 從
JavaScript中分離HTML結構
- 從
JavaScript模組化的開發，提高程式碼的可維護性JavaScript的兩種模組化規範ComonJSAMD- 兩者的主要區別在載入模組的方式上
ComonJS以同步的方式載入，使用require()方法來載入模組AMD以非同步的方式載入模組
- 使用嚴格模式遵循：
- 合理使用
Ajax技術，適合的使用場景有- 前端會根據使用者的需求動態取得後端資料，然後更新網頁介面
- 期望通過不重新整理頁面取得任何資源或頁面
- 動態進行使用者輸入的認證
四、附錄
附錄一 DIV命名規範
-
企業
DIV使用頻率高的命名方法 -
網頁內容類
-
標題:
title- 摘要:
summary - 箭頭：
arrow - 商標：
label - 網站標誌：
logo - 轉角/圓角：
corner - 橫幅廣告：
banner - 子選單：
subMenu - 搜尋：
search - 搜尋框：
searchBox - 登入：
login - 登入條：
loginbar - 工具條：
toolbar - 下拉：
drop - 標籤頁：
tab - 當前的：
current - 列表：
相關推薦
前端開發的一些實踐規範
一、HTML實踐 使用標準的HTML5簡化的定義的方式 定義文件型別 <!DOCTYPE html>定義頁面的編碼 <meata charset="UTF-8">樣式和頁尾的引用，不需要寫type型別，如link scr
【WEB前端開發最佳實踐系列】JavaScript篇
return 訪問 on() 語句 ret 作用域 {} 公開 成對 一、養成良好的編碼習慣，提高可維護性 1、避免定義全局變量和函數，解決全局變量而導致的代碼“汙染”最簡單的額方法就是把變量和方法封裝在一個變量對象上，使其變成對象的屬性： 1 var myCurren
前端開發規範總結 總結前端開發模式和規範
這樣的 oat 真假 貢獻 駝峰命名 lpad 使用 後者 載器 1、前端開發規範 WEB客戶端開發自成體系， 主要用於智能終端（iPhone、Android手機、iPad、Android Pad）和傳統PC的開發。JS規範、HTML規範和CSS規範對客戶端開發進行全方位指
Web前端開發最佳實踐 (黨建著) 完整pdf掃描版
方法 壓縮 學習 制作 src log 基本 html5 color 最近幾年，Web前端的發展非常迅速，並呈現出一片欣欣向榮的景象。但層出不窮的新技術又擾亂了開發人員的思緒，以致很多開發人員疲於學習新技術而忽略了最基礎的技術修煉。很多開發人員介紹*技術時頭頭是道，卻無
關於前端開發一些css的技巧
文字屬性連寫： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
前端開發CSS命名規範-命名規則
使用類選擇器，放棄ID選擇器i ID在一個頁面中的唯一性導致瞭如果以ID為選擇器來寫CSS，就無法重用。 NEC特殊字元:”-“連字元 “-“在本規範中並不表示連字元的含義。 他只表示兩種含義：分類字首分隔符、擴充套件分隔符，詳見以下具體規則。 分類的
3、學什麼技術之前端開發JS程式碼規範語法
學什麼技術之前端開發JS程式碼規範語法JS程式碼規範一（語法&格式篇）基本原則所有的程式碼都要符合可維護性原則 —— 簡單、便於閱讀。部分編碼原則是與效能原則相悖的, 如果遇到這種情況, 請優先遵守語法規範。 (注: 如果確實有不確定的 情況或者效能影響很大, 請聯絡
WEB前端開發最佳實踐（4）
加快JS檔案載入速度 最有效的減少初始載入的檔案體積和載入次數 延遲載入：避免程式碼載入和執行過程阻止頁面的解析 儘量把js放在body的底部 使用成熟的載入框架HeadJS，RequireJS，L
前端開發的一些規範
轉載 整理一些前端開發規範文件 這份文件已經寫了差不多一年了，最近也更新過了，作為一個有組織和紀律的團隊，規範是必須的，畢竟每個coder都有自己的一套風格和規範，為了以後團隊的和諧發展，結合前端業界的開發經驗，故而寫出了一個相對是大而簡潔的文件，希望能夠對
前端開發中一些容易混淆的概念匯總
提交表單 容易 html text bmi blog 技術分享 mit script ★:HTML中，按鈕button與submit區別是什麽？ 1，button 定義可點擊按鈕（多數情況下，用於通過 JavaScript 啟動腳本）。 2，submit 定
前端開發規範
.html 操作 comm pda 前端 ref 移動端 docs action 前端開發規範 github - fork & Pull Request style git commit - comment 必須有意義，不允許單純的 ‘update‘ ‘fi
Web前端開發規範收集
mod 流量 idt jquery version 目的 文件夾 -i service 在Web開發中，後端跟前端配合非常easy出現故障。這時我們就須要一些規則來約束前端任意的編寫。 CSS編程規範 1. 屬性書寫基本順序 a. 先位置屬
前端開發規範手冊：（一）基本原則
name ges rop scrip 有效 object sel 代碼 charset 1、結構、樣式、行為分離 盡量確保文檔和模版只包含HTML結構，樣式都放到樣式表中，行為都放到腳本裏。 2、縮進 統一兩個空格縮進（總之縮進統一即可），不要使用Tab鍵或者Tab
Web前端開發規範手冊
常用 菜單 ima 代碼規範 反饋 o-c css樣式 遇到 人員 一、規範目的 1.1 概述 .....................................................................................
前端開發規範手冊
w3c nbsp google html sch 統一 www clas pan 參考：https://www.w3cschool.cn/webdevelopment/index.html 1、標簽中屬性值統一使用 雙引號 <!-- Not recommended
Web前端開發規範
布局 fig 小技巧 配置 web nav 文件 語句 this 1.文件書寫規範 1.1 基本要求 1) 頁面標簽的屬性和值用雙引號引起來 2) 所有頁面編碼均采用utf-8 1.2 書寫規範 1)文檔類型聲明及編碼：統一為
前端開發規範總結
內存 count side sele orm html開發 完全 限制 緩存 1、前端開發規範 WEB客戶端開發自成體系， 主要用於智能終端（iPhone、Android手機、iPad、Android Pad）和傳統PC的開發。JS規範、HTML規範和CSS規範
前端開發的一些常用資源
1、顏色拾取器：FastStone Capture 2、打包好的圖表（echartsjs）：http://www.echartsjs.com/examples/ 3、座標拾取器（騰訊地圖）：https://lbs.qq.com/tool/getpoint/ 4、thinkPHP 5.0(
前端小團隊建設（實用前端開發規範，推薦收藏）
一、命名規則（英文-直譯） 1、檔案命名 資料夾/檔案的命名統一用小寫 保證專案有良好的可移植性，可跨平臺 2、檔案引用路徑 因為檔案命名統一小寫，引用也需要注意大小寫問題 3、js變數 3.1 變數 命名方式：小駝峰 命名規範：字首名詞 命名建議：語
web前端開發工程師需要注意的web前端開發規範有哪些
從事web前端開發工作我們就需要了解web前端開發的規範，這樣才能保證web前端開發工程師們可以高效快速的完成工作，本篇文章小編和大家分享一下web前端開發工程師需要注意的web前端開發規範有哪些，希望對小夥伴們有所幫助。 一、css書寫規範 1. 編碼統一為utf-8; 2. 協
- 摘要:
-