前端編碼規範文檔

前端編碼規範文檔

Html編碼規範

HTML書寫規範

一、  容器佈局：遵循bootstrap的標籤套用原則，不該有多餘標籤。

 

全部內容都應放在row下的col裏。

二、  標籤頁：在Metronic的佈局標準下，標籤頁的容器應爲row和col。

 

代碼詳見Metronic模版。

三、  頁面html行數較多時要添加region標籤。Ctrl+k，s

 

四、  Layout佈局容器應在.container 裏

 

HTML元素命名規範

標籤	命名
<input type=」text」 />	txtName
<select></select>	sltProjectState
<texarta></texarea>	textProductDesc
<label></lable>	lbPrice
<div></div>	divProjectFile
<span></span>	spSKUPro
擴展標籤	命名
標籤頁	tabUserManage
模態框	modalAddUser
遮罩層	dialogLoading

 

ViewModel編碼規範

1. viewModel編寫需包含如下幾個聲明，屬性、私有方法、公共方法、事件、回調方法、初始化。
2. 屬性已self.****來聲明。
3. 私有方法直接用function聲明
4. UserControl回調方法用 fn_控件名稱_方法名稱_callback來命名。
5. 事件用event_事件名稱來命名。
6. 提交數據、獲取數據，與後臺交互用fn_方法名稱來命名。
7. Init事件用於控件初始化內部邏輯，如加載數據等。
8. 當一個viewmodel聲明方法過多時須要考慮內部是否有抽取成UserControl的必要。

 

UserControl開發規範

1. userControl編碼規則詳見viewmodel，他們的聲明方式相似，傳入參數上只有prarms。
2. userControl最下面一行須要調用控件註冊，並指定模版路徑。

 

通用js方法規範

1. 須要標識做者以及實現功能。在經過前端方法評估時在加入通用庫。
2. 2.         通用js方法須要適配寬放大模式（Loose augmentation）

 

Knockout擴展規範

1. 遵循官方文檔擴展原則。
2. 全部組件放在usercontrol這個文件夾內，ko-component是組件綁定初始化的註冊腳本。
3. 組件適用範圍能夠用組件名稱區分。也能夠用項目模塊名來區分。
4. 全部頁面的viewModel以ControllerActionViewModel來命名。

項目文件結構

文件位置規範

 

Viewmodel跟view同樣。

Business代碼規範

一、  Bussiness調用服務接口,簡單邏輯處理

二、  Bussiness下處理本地模型與服務模型轉換（Translator）