《Vue前端開發手冊》

時間 2019-12-01

標籤 Vue前端開發手冊简体版

原文原文鏈接

序言css

爲了統一前端的技術棧問題，技術開發二部規定開發技術必須以Vue爲主。html

爲了更好的規範公司的前端框架，現以我前端架構師爲主，編寫如下開發規範，若有不當的地方，歡迎批評教育並慢慢改善該開發文檔，謝謝合做。前端

咱們在作產品不僅是實現功能，還要考慮到之後的優化升級，那麼就須要一套標準的代碼規範，使得代碼易懂，養成代碼規範的習慣，有助於程序員自身的成長。那麼咱們如今就來談談，前端代碼的規範。vue

1、編碼規範node

一、樣式文件命名說明webpack

注：【css處理程序統一使用stylus，並放在「src/common/stylus」目錄下】程序員

（1）重置樣式：reset.stylusweb

（2）基礎佈局樣式：base.stylusajax

（3）公共樣式：public.stylusnpm

（4）變量樣式：variable.stylus

（5）icon樣式：icon.stylus

（6）混合類型(函數樣式)：mixin.stylus

2、樣式規範化

（1）連字符CSS選擇器命名規範

長名稱或詞組可使用「中橫線」來爲選擇器命名。不建議使用「_」下劃線來命名CSS選擇器，例：class=」page page-index」。

（2）使用16進製表示顏色值，除非表示的是透明度，例：#F62AB5

（3）如下經常使用的css命名規則；

page-hd、page-bd、page-ft、tit、cnt、desc、info、left-bar、search-bar

3、文件目錄

（1）存放其它圖片文件夾命名規範：imgaes

（2）存放廣告圖的文件夾banner

（3）文件名應該所有小寫，多個單詞如下劃線「_」分開

（4）JS文件：駝峯命名方式，首字母小寫，例：getUserInfo.js

（5）確保文檔或模板中只包含html，把用到的樣式都寫到樣式表文件中，把腳本都寫到js文件中，採用外鏈引入形式，使頁面的結構與行爲分離。

四、 Javascript

（1）因vue腳手架有自動編譯的功能，爲了代碼的整潔，每行js代碼沒必要帶「；」做爲結束，但需遵循一個語句一行的編碼方式；

5、命名規範

（1）文件命名：以英文命名，後綴爲.js，例：（共用）common.js，其餘命名可根據模塊需求命名；

（2）變量命名：駝峯式命名，原生JavaScript變量要求是純英文字母，首字母須小寫，變量集中聲明，避免全局變量
（3）類命名：首字母大寫，駝峯式命名。eg：StudentInfo、UserInfo、ProductInfo；

（4）函數命名：首字母小寫駝峯式命名。eg：getUserInfo；

（5）命名語義化，儘量利用英文單詞或其縮寫。

（6）常量：必須採用全大寫的命名，且單詞以_分割，常量一般用於ajax請求url，和一些不會改變的數據；

命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。

例：const MAX_LENGTH = 20;const URL = 'http://www.star.com'

（7）變量：必須採用小駝峯式命名法，例：let maxCount = 10;

6、項目命名

所有采用小寫方式，如下劃線分隔。例：my_project_name

7、函數

命名方法：小駝峯式命名法；

命名規範：前綴應當爲動詞；

命名建議：可以使用常見動詞約定。

動詞	含義	返回值
can	判斷是否可執行某個動做(權限)	函數返回一個布爾值。true：可執行；false：不可執行
has	判斷是否含有某個值	函數返回一個布爾值。true：含有此值；false：不含有此值
is	判斷是否爲某個值	函數返回一個布爾值。true：爲某個值；false：不爲某個值
get	獲取某個值	函數返回一個非布爾值
set	設置某個值	無返回值、返回是否設置成功或者返回鏈式對象
load	加載某些數據	無返回值或者返回是否加載完成的結果

8、類 & 構造函數

命名方法：大駝峯式命名法，首字母大寫；例：Person

命名規範：前綴爲名稱。

示例：

class Person {

public name: string;

constructor(name) {

this.name = name;

}

const person = new Person('mevyn');

9、類的成員

類的成員包含：

公共屬性和方法：跟變量和函數的命名同樣。

私有屬性和方法：前綴爲_(下劃線)，後面跟公共屬性和方法同樣的命名方式。

示例：

class Person {

private _name: string;

constructor() { }

// 公共方法

getName() {

return this._name;

}

// 公共方法

setName(name) {

this._name = name;

}

const person = new Person();

person.setName('star');

person.getName(); // ->'star'

10、註釋規範

js 支持三種不一樣類型的註釋：行內註釋、單行註釋和多行註釋：

行內註釋

說明：行內註釋以兩個斜線開始，以行尾結束。
語法：code // 這是行內註釋
使用方式：//(雙斜線)與代碼之間保留一個空格，而且//(雙斜線)與註釋文字之間保留一個空格。

命名建議：

// 用來顯示一個解釋的評論
// -> 用來顯示錶達式的結果，
// >用來顯示 console 的輸出結果，

示例：

function test() { // 測試函數

console.log('Hello World!'); // >Hello World!

return 3 + 2; // ->5

}

單行註釋

說明：單行註釋以兩個斜線開始，以行尾結束。
語法：// 這是單行註釋
使用方式：單獨一行：//(雙斜線)與註釋文字之間保留一個空格。

示例：

// 調用了一個函數；1)單獨在一行setTitle();

多行註釋

說明：以 /* 開頭， */ 結尾
語法：/* 註釋說明 */
使用方法：若開始/和結束/都在一行，推薦採用單行註釋。若至少三行註釋時，第一行爲/，最後行爲/，其餘行以開始，而且註釋文字與保留一個空格。

示例:

/** 代碼執行到這裏後會調用setTitle()函數* setTitle()：設置title的值

setTitle();

函數(方法)註釋

說明：函數(方法)註釋也是多行註釋的一種，可是包含了特殊的註釋要求，參照JSDoc

語法：

/** * 函數說明 * @關鍵字

經常使用註釋關鍵字：(只列出一部分，並非所有)

註釋名	語法	含義	示例
@param	@param 參數名 {參數類型} 描述信息	描述參數的信息	@param name {String} 傳入名稱
@return	@return {返回類型} 描述信息	描述返回值的信息	@return {Boolean} true:可執行;false:不可執行
@author	@author 做者信息 [附屬信息：如郵箱、日期]	描述此函數做者的信息	@author 張三 2015/07/21
@version	@version XX.XX.XX	描述此函數的版本號	@version 1.0.3
@example	@example 示例代碼	演示函數的使用	@example setTitle(‘測試’)

/*** 合併Grid的行

* @param grid {Ext.Grid.Panel} 須要合併的Grid

* @param cols {Array} 須要合併列的Index(序號)數組；從0開始計數，序號也包含。

* @param isAllSome {Boolean} ：是否2個tr的cols必須完成同樣才能進行合併。true：完成同樣；false(默認)：不徹底同樣

* @return void

* @author polk6 2015/07/21

* @example

* _________________ _________________

* | 年齡 | 姓名 | | 年齡 | 姓名 |

* ----------------- mergeCells(grid,[0]) -----------------

* | 18 | 張三 | => | | 張三 |

* ----------------- - 18 ---------

* | 18 | 王五 | | | 王五 |

* ----------------- -----------------

function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {

// Do Something

}

11、手機設計稿規範

設計稿的寬度通常狀況下爲寬度750px,在手機端頁面編寫的過程，將頁面的最大寬度設置爲750px，最小寬度爲375xp，寬度爲100%；即min-width:375px；max-width:750px；width100%；這樣一來的話寬度在375到750之間是自適應的，當頁面小於375時出現水平滾動條，當頁面大於750時頁面居中佈局。