web開發(fā)約束
項目結(jié)構(gòu)：
vue項目結(jié)構(gòu)
|-- 項目名
|-- static 開發(fā)相關(guān)靜態(tài)文件
|-- fonts 字體樣式的存放目錄
|-- image 全局共用的img圖片目錄
|-- js 全局共用的js目錄
|-- other 全局共用的其他文件目錄(如果需要忘古，可選)
|-- ...
|-- src 開發(fā)內(nèi)容
|-- api api請求server的目錄
|-- components 全局共用組件的目錄
|-- dependent 有依賴于第三方的自行構(gòu)建的全局組件 組件使用前綴 dep-
|-- independent 無依賴的自行構(gòu)建的全局組件 組件使用前綴 indep- 具有可靠的移植性和獨立性
|-- config 默認配置的目錄
|-- constant.js 共用常量配置文件
|-- translate.js 翻譯配置文件
|-- fragment.js 配置碎片
|-- ...
|-- frame 自定義框架的目錄
|-- global 全局引用目錄
|-- doc 用于存放項目文檔(如果需要，可選)
|--mixin vue混合的目錄
|-- page 單頁面應用的目錄
|-- 業(yè)務(wù)目錄
|-- 業(yè)務(wù)模塊
|-- _js 此業(yè)務(wù)私有的js
|-- _img 此業(yè)務(wù)私有的img(如果需要惠奸，可選)
|-- ...
|-- _共用模塊名 業(yè)務(wù)私有的共用模塊必須使用_前綴
|-- doc 用于存放業(yè)務(wù)文檔(如果需要俗壹，可選)
|-- ...
|-- routes vue路由的目錄
|-- style 單頁面應用樣式的目錄
|-- utils 項目工具型函數(shù)的存放目錄
|-- custom-methods.js 自定義的共用方法
|-- validator.js 自定義的驗證方法
|-- ...
|-- datajson 引入本地json的目錄，誰引入則在建立其對應的目錄中存放
|-- fragment 公用碎片
vue命名約束
語義化和命名
應以功能或內(nèi)容命名般卑，不以表現(xiàn)形式命名武鲁；
命名-縮寫規(guī)范使用業(yè)界熟知的或者約定俗成的。
常量采用全部大寫蝠检，單詞間下劃線分隔的命名方式沐鼠。
變量采用駝峰命名法。
全局屬性或者引入文件采用$駝峰命名法進行命名叹谁。
私有屬性饲梭、變量和方法以下劃線 _ 開頭，由多個單詞組成的 縮寫詞焰檩。在命名中憔涉，根據(jù)當前命名法和出現(xiàn)的位置，所有字母的大小寫與首字母的大小寫保持一致析苫。
枚舉變量 使用 Pascal 命名法兜叨。（與駱駝命名法類似。只不過駱駝命名法是首字母小寫藤违，而帕斯卡命名法是首字母大寫）
對于vue組件的props命名采用駝峰命名法浪腐，對于data(){}中定義的變量采用下劃線纵揍，特殊的功能需要加入特殊的下劃線后綴或前綴顿乒。
props: {
routerJump: String // props命名采用駝峰命名法
}
data () {
return {
// data(){}中定義的變量采用下劃線,特殊的功能需要加入特殊的下劃線后綴
city_id: 100101, // _id標記id
city_name '北京' , // _name標記_id對應的結(jié)果
idcard_photo: null, // _photo標記圖片
re_evaluate: '重新評估', // re_重新
is_show: false // is_
}
}
對于vue組件屬性和組件引用采用中劃線的方式，枚舉變量 使用 Pascal 命名法
<label-content :value="auto_query_condition" label-width="120px" :inline="true" :border="true" label-position="left" label-item-width="400px" all-background="#fbfdff"></label-content>
import AudioGallery from './mode/audio-gallery.vue' // 音頻-Pascal 命名法
export default {
components: {'audio-gallery': AudioGallery} // 組件引用采用中劃線
}
vue方法名泽谨，計算屬性名采用駝峰命名法
computed: {
conversion () {}
},
methods: {
checkFind () {}
}
選項順序：
export default {
name: '',
mixins: [], // 混入
components: {}, // 組件
model: {},
props: {},
data () {
return {}
}, // 數(shù)據(jù)
created () {}, // 創(chuàng)建周期
mounted () {}, // dom掛載周期
computed: {}, // 計算屬性
watch: {}, // 監(jiān)聽器
methods: {}, // 方法
filters: {}, // 過濾
directives: {}, // 指令
destroyed () {} // 實例銷毀周期
}
vue-router
引用形式
const Frame = {template: '<router-view></router-view>'}
import TemplateList from '@/page/template/list/list.vue'
import TemplateAddEdit from '@/page/template/add_edit/add-edit.vue'
export default [
{
path: '/template',
name: '模板演示',
component: Frame,
children: [
{
path: 'list',
name: '模板列表',
meta: { linkable: true }, // 元信息
props: { ruterModule: '模板列表' }, // 路由組件傳參
component: TemplateList
},
{
path: 'edit/:templateId', // id參數(shù)必須唯一璧榄，例如用戶模塊下必須使用userId
name: '編輯模板',
meta: { linkable: true }, // 元信息
props: { ruterModule: '編輯模板' }, // 路由組件傳參
components: TemplateAddEdit
}
]
}
]
vuex
state采用駝峰命名，
getter
采用駝峰命名吧雹，以get開頭
getAllWords (state, getters, rootState, rootGetters) {
return [...state.words]
}
mutations
采用大寫明明
export const DATA_RESET = 'DATA_RESET' // 數(shù)據(jù)重置
[types.DATA_RESET] (state) { // 數(shù)據(jù)重置
state.words = []
}
約束-后綴
// 加載:_LOADING,狀態(tài):_STATE,確認:_CONFIRM,彈框:_ALERT,對話框:_DIALOG,賦值:_ASSIGN,通知:_MESSAGE,成功:_SUCCESS,失敗:_FAILURE,
// 結(jié)賬:_CHECKOUT,清除:_CLEAR,重置:_RESET,可用骨杂、允許:_ABLE,
// 列表:_LIST,文件:_FILE,任意類型:_ARBIT,數(shù)字:_NUMBER,對象:_OBJECT,布爾:_BOOLEAN,日期:_DATE,
// 標記id:_ID,信息:_INFO,編號:_NO,概率:_RATE,約束:_CONSTRAINT,匹配:_MATCH,
約束-前綴
// 接收:RECEIVE_,請求:REQUEST_,添加:ADD_TO_,是否:IS_,有無:HAS_,移除:RM_,刪除:DEL_,重新:RE_,更新:UPDATE_,
actions
采用駝峰命名，以功能性詞匯開頭雄卷。
getWords (context) { // 請求獲取works
}
setStateWords (context) {
// 設(shè)置
}
modules
采用駝峰命名搓蚪，注意模塊劃分。
modules: {
common: {
namespaced: true, // 根據(jù)模塊注冊的路徑調(diào)整命名
modules: {
wordsStore
}
},
pictureBooks
}
分離
結(jié)構(gòu)丁鹉、樣式妒潭、行為分離悴能，盡量確保文檔和模板只包含 HTML 結(jié)構(gòu)，樣式都放到樣式表里雳灾，行為都放到腳本里漠酿。
功能應用分離:方法該做的事叫給方法做，不要為了便利直接為對象的某個變量進行運算賦值谎亩。
統(tǒng)一注釋
HTML 模塊注釋:
<!-- 文章列表列表模塊 -->
<div class="article-list">
...
</div>
HTML 區(qū)塊注釋:
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->
JS 單行注釋:
在代碼上面注釋炒嘲，必須獨占一行。// 后跟一個空格匈庭，縮進與下一行被注釋說明的代碼一致夫凸。
JS 后綴注釋:
在一段語句后面后綴進行注釋， // 前后都跟一個空格阱持，用于對某個語句的說明寸痢。
this.getBaseDataAfter() // 基礎(chǔ)數(shù)據(jù)請求完成之后執(zhí)行的方法
JS 多行注釋
/**
* 函數(shù)描述
* 與此函數(shù)相關(guān)聯(lián)引入的其他函數(shù)，并說明該函數(shù)具體位置以及說明其功能
* @param {string} p1 參數(shù)1的說明
* @param {string} p2 參數(shù)2的說明紊选，比較長
* 那就換行了.
* @param {number=} p3 參數(shù)3的說明（可選）
* @return {Object} 返回值描述
*/
JS 文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西啼止。 應該提供文件的大體內(nèi)容, 它的作者, 依賴關(guān)系和兼容性信息。如下:
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/
多進行注釋兵罢，對于自行定義的一些對象參數(shù)必須進行注釋說明如下：
{
name: null, // 姓名
mobile: null, // 手機號碼
id_card: null, // 身份證號
monthly_income_money: '', // 月收入
}
語義化和命名
應以功能或內(nèi)容命名献烦，不以表現(xiàn)形式命名；命名-縮寫規(guī)范使用業(yè)界熟知的或者約定俗成的卖词。常量采用全部大寫巩那，單詞間下劃線分隔的命名方式。變量采用駝峰命名法此蜈。全局屬性或者引入文件采用$駝峰命名法進行命名即横。私有屬性、變量和方法以下劃線 _ 開頭裆赵。由多個單詞組成的 縮寫詞东囚，在命名中，根據(jù)當前命名法和出現(xiàn)的位置战授，所有字母的大小寫與首字母的大小寫保持一致页藻。枚舉變量 使用 Pascal 命名法。（與駱駝命名法類似植兰。只不過駱駝命名法是首字母小寫份帐，而帕斯卡命名法是首字母大寫）
var HTML_ENTITY = {}; // 常量
var loadingModules = {}; // 變量
var _privateMethod = {}; // 私有屬性、變量和方法
function XMLParser() {}; // 多個單詞組成的 縮寫詞
import CustomUnit from './config/unit.js' // 枚舉變量
命名-縮寫規(guī)范:
navigation => nav
header => hd
description => desc
button => btn
previous => prev
css 命名
ID楣导、Class :采用命名必須由單詞废境、中劃線-連接或數(shù)字組成命名。不允許使用拼音（約定俗成的除外，如：youku, baidu）噩凹，尤其是縮寫的拼音朦促、拼音與英文的混合。
命名-前綴規(guī)范:
選擇器必須是以某個前綴開頭
.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }
| 前綴 | 說明 | 示例 |
|---|---|---|
| g- | 全局通用樣式命名栓始，前綴g全稱為global务冕，一旦修改將影響全站樣式 | g-mod |
| m- | 模塊命名方式 | m-detail |
| ui- | 組件命名方式 | ui-selector |
| js- | 所有用于純交互的命名，不涉及任何樣式規(guī)則幻赚。JSer擁有全部定義權(quán)限 | js-switch |
出于性能考量禀忆，在沒有必要的情況下避免元素選擇器疊加 Class、ID 使用落恼。
JS 命名
對于不經(jīng)常使用jquery的項目箩退，在使用jquery的地方必須進行jquery的標注聲明:
/* global $ */
JS 對象或JSON的屬性命名:字母小寫，多個單詞組成時佳谦，采用下劃線分隔戴涝。
var obj = {
result_type: '',
name: '',
status_show: ''
}
JS 函數(shù)命名:使用動賓短語和駝峰命名法，參數(shù)也使用駝峰命名法钻蔑，可選參數(shù)以 opt_ 開頭.
function getStyle(element, opt_child) {}
JS 類:使用名詞和Pascal 命名法（與駱駝命名法類似啥刻。只不過駱駝命名法是首字母小寫，而帕斯卡命名法是首字母大寫）咪笑，類的 方法 / 屬性, 使用駝峰命名法可帽。
function Engine(options) {}
boolean 類型的變量使用 is 或 has 開頭。如果在對象中使用is_或has_開頭
var isReady = false;
var hasMoreCommands = false;
var obj = {
is_show: false,
has_name: true
}
JS 組件命名:文件名和組件名采用中劃線-連接命名
date-range.js // 日期范圍選擇
<!-- 視頻自定義播放組件 -->
<video-play></video-play>
操作符始終寫在前一行, 以免分號的隱式插入產(chǎn)生預想不到的問題窗怒。
var y = a ?
longButSimpleOperandB : longButSimpleOperandC;
if (a === 'string' ||
s === 'object'
) {}
接口命名規(guī)范：可讀性強映跟，見名曉義；盡量不與各個社區(qū)已有的習慣沖突扬虚；盡量寫全努隙。不用縮寫，除非是下面列表中約定的辜昵；（變量以表達清楚為目標荸镊，uglify 會完成壓縮體積工作）
常用后綴:
_id-標記id
_form-表單
_name-標記_id對應的結(jié)果/名稱
_photo-標記圖片
_pdf-PDF文件
_video-視頻
_audio-音頻
_excel-表格
_number-數(shù)字
_date-日期
_info-信息
_rate-概率
_serialnum-編號/_NO-編號
_abel-是否可以Boolean
_remarks-備注
_result-結(jié)果
_loading-加載
_alert-彈框
_assign-賦值
_reset-重置
_able-允許
_state-狀態(tài)
_confirm-確認
_dialog-對話框
_msg-通知
_succ-成功
_err-錯誤
_failure-失敗
_clear-清除
_lists-列表
_file-文件
_infor-信息
_rate-概率
常用前綴:
is_: 是、可以/否路鹰、不可以Boolean
show_: 顯示/隱藏Boolean
has_: 有/無Boolean
re_: 重新/再一次
add_to_添加
rm_: 移除
del_: 刪除
update_: 更新
up_: 上
down_: 下
req_: 請求
resp_: 響應
receive_: 接收
dis_: 禁止
pre_: 預
sub_: 低贷洲、下
co_: 共同、和
ec_: 超出
auto_: 自動
inter_: 之間
mono_: 單獨晋柱、單一
bith_: 兩個、二
tri_: 三
mutil_: 多個
se_: 分離
aph_: 來自
trans_: 通過
pub_: 公共
into_: 輸入
intro_: 到...中
all_: 全部
HTML HEAD 模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超過150個字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 為移動設(shè)備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
聲明順序
css聲明順序
相關(guān)屬性應為一組诵叁，推薦的樣式編寫順序
- Positioning（定位）
- Box model（盒子模型）
- Typographic（排版）
- Visual（視覺效果雁竞，如動畫顏色等）
- other（其他）
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
結(jié)構(gòu)以ESLint為準
比如縮進，=的前后有空格等都按ESLint為準
JS語言特性
[強制] 任何使用this的地方都要說名此this代表誰。
[強制] 每個 var 只能聲明一個變量碑诉。一個 var 聲明多個變量彪腔，容易導致較長的行長度，并且在修改時容易造成逗號和分號的混淆进栽。
var hangModules = [];
var missModules = [];
var visited = {};
[強制] 變量必須 即用即聲明德挣，不得在函數(shù)或其它形式的代碼塊起始位置統(tǒng)一聲明所有變量。變量聲明與使用的距離越遠快毛，出現(xiàn)的跨度越大格嗅，代碼的閱讀與維護成本越高。
[強制] 在 判斷中使用類型嚴格的 ===唠帝。
[建議] 按執(zhí)行頻率排列判斷或代碼分支的順序屯掖。
[建議] 如果函數(shù)或全局中的 else 塊后沒有任何語句，可以刪除 else襟衰。
function getName() {
if (name) {
return name;
}
return 'unnamed';
}
[建議] 不要在循環(huán)體中包含函數(shù)表達式贴铜，事先將函數(shù)提取到循環(huán)體外。因為循環(huán)體中的函數(shù)表達式瀑晒，運行過程中會生成循環(huán)次數(shù)個函數(shù)對象绍坝。
function clicker() {
// ......
}
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
addListener(element, "click", clicker);
}
[建議] 對循環(huán)內(nèi)多次使用的不變值，在循環(huán)外用變量緩存苔悦。
var width = wrap.offsetWidth + 'px';
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
element.style.width = width;
// ......
}
[建議] 類型檢測優(yōu)先使用 typeof陷嘴。對象類型檢測使用 instanceof。null 或 undefined 的檢測使用 == null间坐。
// string
typeof variable === 'string'
// number
typeof variable === 'number'
// boolean
typeof variable === 'boolean'
// Function
typeof variable === 'function'
// Object
typeof variable === 'object'
// RegExp
variable instanceof RegExp
// Array
variable instanceof Array
// null
variable === null
// null or undefined
variable == null
// undefined
typeof variable === 'undefined'
[強制] 字符串開頭和結(jié)束使用單引號 '灾挨。輸入單引號不需要按住 shift，方便輸入竹宋。實際使用中劳澄，字符串經(jīng)常用來拼接 HTML。為方便 HTML 中包含雙引號而不需要轉(zhuǎn)義寫法蜈七。
[強制] 不允許修改和擴展任何原生對象和宿主對象的原型秒拔。
[建議] 屬性訪問時，盡量使用 .飒硅。
[建議] 一個函數(shù)的長度控制在 50 行以內(nèi)砂缩。將過多的邏輯單元混在一個大函數(shù)中，易導致難以維護三娩。一個清晰易懂的函數(shù)應該完成單一的邏輯單元庵芭。復雜的操作應進一步抽取，通過函數(shù)的調(diào)用來體現(xiàn)流程雀监。特定算法等不可分割的邏輯允許例外双吆。
function syncViewStateOnUserAction() {
if (x.checked) {
y.checked = true;
z.value = '';
}
else {
y.checked = false;
}
if (a.value) {
warning.innerText = '';
submitButton.disabled = false;
}
else {
warning.innerText = 'Please enter it';
submitButton.disabled = true;
}
}
// 直接閱讀該函數(shù)會難以明確其主線邏輯眨唬，因此下方是一種更合理的表達方式：
function syncViewStateOnUserAction() {
syncXStateToView();
checkAAvailability();
}
function syncXStateToView() {
y.checked = x.checked;
if (x.checked) {
z.value = '';
}
}
function checkAAvailability() {
if (a.value) {
clearWarnignForA();
}
else {
displayWarningForAMissing();
}
}
[建議] 一個函數(shù)的參數(shù)控制在 6 個以內(nèi)。
[建議] 屬性在構(gòu)造函數(shù)中聲明好乐，方法在原型中聲明匾竿。
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function () {
return this;
};
