## 一、構建項目目錄
](images/screenshot_1568881943294.png)
* 目錄結構的統一化，可讀性，分模塊、組件構建，嚴禁構建雜亂無章，毫無可讀性而言的項目目錄。
* 了解開發當前項目所需的框架，工具、插件，功能，兼容性，分辨率等問題做好準備工作，做到心中有數。
* 目錄結構整齊劃一，方便日后的維護和其他同事的閱讀。
1. #### ***目錄結構說明***
\-- main.js為入口js文件，app.vue為項目的根組件。
\-- 總共三層開發目錄，**src、build、dist**，src是源碼文件夾，build是調試文件夾，dist目錄依賴build目錄，生成線上版完整代碼，包括代碼的丑化，圖片的壓縮，各類插件的加載順序等。
\-- 所有的其余頁面都放到neo組件目錄下，neo目錄下的頁面全部歸類放置，不要直接扔進去完事。
\-- api目錄下包含所有的請求路徑url，config是全局配置目錄，router是路由文件，store為全局狀態管理，所有的js插件放到libs目錄下。
\-- 所有的圖片放置assets目錄下，static目錄下放置固定不動的圖片，和默認css文件包。
## 二、代碼規范
1. #### ***書寫規范：增強語義化，增強閱讀性***。
* **只用小寫字母**
所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和 CDATA ）， 選擇器，特性，特性值（除了字符串）。
**代碼示例：**
~~~xml
<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png" alt="Google"></pre>
<h3>行尾空格</h3>
<strong>刪除行尾白空格。</strong>
行尾空格沒必要存在。
<pre><!-- 不推薦 -->
<p>What?_
<!-- 推薦 -->
<p>Yes please.
~~~
* **增強語義**
根據HTML各個元素的用途而去使用它們。
使用元素 (有時候錯稱其為“標簽”) 要知道為什么去使用它們和是否正確。 例如，用heading元素構造標題， p 元素構造段落, a 元素構造錨點等。
根據HTML各個元素的用途而去使用是很重要的，它涉及到文檔的可訪問性、重用和代碼效率等問題。
* **禁止用行內元素包裹塊級標簽，最好不要在p標簽內嵌套別的標簽**
**代碼示例：**
~~~xml
<!-- 不推薦 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 -->
<a href="recommendations/">All recommendations</a>
~~~
* **關注點分離**
**將表現和行為分開**
嚴格保持結構 （標記），表現 （樣式），和行為 （腳本）分離, 并盡量讓這三者之間的交互保持最低限度。
確保文檔和模板只包含HTML結構， 把所有表現都放到樣式表里，把所有行為都放到腳本里。
此外，盡量使腳本和樣式表在文檔與模板中有最小接觸面積，即減少外鏈。
將表現和行為分開維護是很重要的，因為更改HTML文檔結構和模板會比更新樣式表和腳本更花費成本。
**代碼示例**
~~~xml
<!-- 不推薦 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:</p>
<u>HTML is stupid!!1</u>
<!-- 推薦 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually</p>
~~~
2. #### ***格式規范：禁止看到參差不齊的格式。***
**1、HTML格式**
每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。
獨立元素的樣式，將塊元素、列表元素或表格元素都放在新行。
另外，需要縮進塊元素、列表元素或表格元素的子元素。
**代碼示例**
~~~xml
<!-- 不推薦 -->
<section>
<div class=""></div>
<h1></h1>
<div>
<span></span>
<em></em>
</div>
</section>
<!-- 推薦 -->
<section>
<div class=""></div>
<h1></h1>
<div>
<span></span>
<em></em>
</div>
</section>
~~~
**2、CSS格式**
依字母順序進行聲明
都按字母順序聲明，很容易記住和維護。
忽略瀏覽器的特定前綴排序，但多瀏覽器特定的某個CSS屬性前綴應相對保持排序（例如-moz前綴在-webkit前面）。
**代碼示例**
~~~undefined
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
~~~
代碼塊內容縮進，它能夠提高層次結構的清晰度。
~~~css
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
~~~
聲明完結，所有聲明都要用“;”結尾。
~~~css
/* 不推薦 */
.test {
display: block;
height: 100px
}
/* 推薦 */
.test {
display: block;
height: 100px;
}
~~~
選擇器和聲明分行，每個選擇器和聲明都要獨立新行。
~~~css
/* 不推薦 */
a:focus, a:active {
position: relative;
top: 1px;
}
/* 推薦 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
~~~
規則分行，每個規則獨立一行，兩個規則之間隔行
~~~css
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
~~~
3. #### ***命名規范：嚴禁特簡化命名***
**1、ID和class的命名**
應該從ID和class的名字上就能看出這元素是干嘛用的，而不是表象或模糊不清的命名。
應該優先慮以這元素具體目來進行命名，這樣他就最容易理解，減少更新。
通用名稱可以加在兄弟元素都不特殊或沒有個別意義的元素上，可以起名類似“helpers”這樣的泛。
使用功能性或通用的名字會減少不必要的文檔或模板修改。
**代碼示例**
~~~css
/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
/* 不推薦: 表達不具體 */
.button-green {}
.clear {}
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}
~~~
**2、ID和class命名風格**
非必要的情況下，ID和class的名稱應盡量簡短。
簡要傳達ID或class是關于什么的。
通過這種方式，似的代碼易懂且高效。
**代碼示例**
~~~css
/* 不推薦 */
#navigation {}
.atr {}
/* 推薦 */
#nav {}
.author {}
~~~
**3、類型選擇器**
避免使用CSS類型選擇器。
非必要的情況下不要使用元素標簽名和ID或class進行組合。
出于性能上的考慮避免使用父輩節點做選擇器 performance reasons.
**代碼示例**
~~~css
/* 不推薦 */
ul#example {}
div.error {}
/* 推薦 */
#example {}
.error {}
~~~
**4、屬性縮寫**
寫屬性值的時候盡量使用縮寫。
CSS很多屬性都支持縮寫shorthand （例如 font ） 盡量使用縮寫，甚至只設置一個值。
使用縮寫可以提高代碼的效率和方便理解。
**代碼示例**
~~~cpp
/* 不推薦 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推薦 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
~~~
**5、0和單位，省略0后面的單位，省略0開頭小數點前面的0。**
**代碼示例**
~~~css
.test {
margin: 0;
padding: 0;
font-size: .8em;
}
~~~
**6、ID和class命名的定界符**
選擇器前面加上特殊應用標識的前綴（可選）。
大型項目中最好在ID或class名字前加上這種標識性前綴（命名空間），使用短破折號鏈接。
使用命名空間可以防止命名沖突，方便維護，比如在搜索和替換操作上。
ID和class名字有多單詞組合的用短破折號“-”分開。
**代碼示例**
~~~css
/* 不推薦：“demo”和“image”中間沒加“-” */
.demoimage {}
/* 不推薦：用下劃線“_”是屌絲的風格 */
.error_status {}
/* 不推薦：用駝峰命名是屌絲的風格 */
.errorStatus {}
/* 推薦 */
#video-id {}
.ads-sample {}
~~~
4. #### ***Js語法規范（重點）：嚴格按照此中語言的語法要求進行編碼。***
**1、變量**
駝峰式命名，駝峰式命名法由小(大)寫字母開始，后續每個單詞首字母都大寫。
命名方法：小駝峰式命名法。
命名規范：前綴應當是名詞。(函數的名字前綴為動詞，以此區分變量和函數)。
命名建議：盡量在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示為字符串類型。
**代碼示例**
~~~jsx
// 好的命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';
// 不好的命名方式
var setCount = 10;
var getTitle = 'LoginTable';
~~~
**2、函數**
命名方法：小駝峰式命名法。
命名規范：前綴應當為動詞。
命名建議：可使用常見動詞約定
**代碼示例**
~~~jsx
// 是否可閱讀
function canRead() {
return true;
}
// 獲取名稱
function getName() {
return this.name;
}
~~~
**3、常量**
命名方法：名稱全部大寫。
命名規范：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。
**代碼示例**
~~~jsx
var MAX_COUNT = 10;
var URL = 'http://www.baidu.com';
~~~
**4、構造函數**
介紹：在JS中，構造函數也屬于函數的一種，只不過采用new 運算符創建對象。
命名方法：大駝峰式命名法，首字母大寫。
命名規范：前綴為名稱。
**代碼示例**
~~~jsx
function Student(name) {
this.name = name;
}
var st = new Student('tom');
~~~
**5、類的成員**
**類的成員包含：**
公共屬性和方法：跟變量和函數的命名一樣。
私有屬性和方法：前綴為\_(下劃線)，后面跟公共屬性和方法一樣的命名方式。
**代碼示例**
~~~jsx
function Student(name) {
var _name = name; // 私有成員
// 公共方法
this.getName = function () {
return _name;
}
// 公共方式
this.setName = function (value) {
_name = value;
}
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：輸出_name私有變量的值
~~~
## 三、注釋
* 編碼時一定注意寫好注釋，頁面結構和樣式的動態變化和添加，打好注釋，便于后臺同事套頁面時候的閱讀。
* 尤其Js，做到主要代碼、方法、參數的行行注釋說明，便于其他同事了解你做此功能的思路，避免代碼的冗余，
造成性能問題，盡量做到高內聚低耦合。
**代碼示例**
~~~xml
<!-- HTML推薦注釋，左右各空一個空格，注釋說明，單行 -->
<!--<div class="sell"></div>-->
<!-- HTML推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋 -->
<!--
<div class="sell">
<p>多行注釋</p>
<p>多行注釋</p>
<p>多行注釋</p>
<p>多行注釋</p>
</div>
-->
/* CSS推薦注釋，左右各空一個空格，區塊注釋說明 */
.sell {
/*background: #000;*/
}
/* CSS推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋 */
/*
.sell p {
background: #000;
font-size: 12px;
}
*/
// Js推薦注釋，注釋符號與注釋說明之間空一個空格，單行
// var sellEle = document.querySelector('.sell');
// Js推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋
/*
var sellEle = document.querySelector('.sell');
console.log(sellEle);
*/
~~~
函數(方法)注釋
**代碼示例**
~~~jsx
/**
* 函數說明
* @關鍵字
*/
/**
* 合并Grid的行
* @param {Grid} grid 需要合并的Grid
* @param {Array} cols 需要合并列的Index(序號)數組；從0開始計數，序號也包含。
* @param {Boolean} isAllSome 是否2個tr的cols必須完成一樣才能進行合并。true：完成一樣；false(默認)：不完全一樣
* @return void
* @author barry
*/
function mergeCells(grid, cols, isAllSome) {
// Do Something
}
~~~
