前端開發規範

前端開發規範

備註：實際開發請以本公司的規範爲標準。

一.普通規範

二.HTML\CSS規範

三.Javascript規範

四.UI框架及css預處理器規範

五.腳手架、插件選擇規範

---

普通規範

• 基本原則：

  • 結構、樣式、行爲分離
  • 縮進（建議IDEA格式化）
  • 文件編碼（統一 UTF-8 ) <meta charset="utf-8">
  • 一律使用小寫字母

  	<!-- one -->
  	<!-- Recommended -->
  	<img src="google.png" alt="Google">
  
  	<!-- Not recommended -->
  	<A HREF="/">Home</A>
  	
  	/* two */
  	/* Recommended */
  	color: #e5e5e5;
  
  	/* Not recommended */
  	color: #E5E5E5;
  

  • 省略外鏈資源 URL 協議部分：
    省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成爲相對地址，減小文件字節數。

  <!-- Recommended -->
  <script src="//www.w3cschool.cn/statics/js/autotrack.js"></script>
  
  <!-- Not recommended -->
  <script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
  

  /* Recommended */
  .example {
    background: url(//www.google.com/images/example);
  }
  
  /* Not recommended */
  .example {
    background: url(http://www.google.com/images/example);
  }
  

  • 統一註釋
    • 模塊註釋
    • 區塊註釋
  • CSS 註釋：
    組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
  • JavaScript 註釋：
    • 模塊註釋
    • 區塊註釋
  • 媒體查詢：
    • 媒體查詢（Media query）的位置
      將媒體查詢放在儘可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部
  • 不要使用 @import
    與 相比，@import 要慢很多，不光增加額外的請求數，還會導致不可預料的問題。
    替代辦法：
    * 使用多個 元素；
    * 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯爲一個文件；
    * 其他 CSS 文件合併工具；

---

JavaScript規範

• JavaScript命名規範：
  • 變量, 使用 Camel 命名法。

    	let loadingModules = {};
    

  • 私有屬性、變量和方法, 以下劃線 _ 開頭。

    	let _privateMethod = {};
    

  • 常量, 使用全部字母大寫，單詞間下劃線分隔的命名方式。

    	let HTML_ENTITY = {};
    

  • 其它
    • 函數, 使用 Camel 命名法。
    • 函數的參數, 使用 Camel 命名法。

      	function stringFormat(source) {}
      
      	function hear(theBells) {}
      

    • 類, 使用 Pascal 命名法
    • 類的 方法 / 屬性, 使用 Camel 命名法

      	function TextNode(value, engine) {
      		this.value = value;
      		this.engine = engine;
      	}
      
      	TextNode.prototype.clone = function () {
      		return this;
      	};
      

    • 枚舉變量 使用 Pascal 命名法。
    • 枚舉的屬性， 使用全部字母大寫，單詞間下劃線分隔的命名方式。

      	var TargetState = {
      		READING: 1,
      		READED: 2,
      		APPLIED: 3,
      		READY: 4
      	};
      

• JavaScript命名語法
  • 類名，使用名詞。

    	function Engine(options) {}
    

  • 函數名，使用動賓短語。

    	function getStyle(element) {}
    

  • boolean， 類型的變量使用 is 或 has 開頭。

    	let isReady = false;
    	let hasMoreCommands = false;
    

  • Promise 對象用動賓短語的進行時表達。

    	let loadingData = ajax.get('url');
    	loadingData.then(callback);
    

---

UI框架及css預處理器規範

• PC端Vue項目UI框架：ElementUI（優先）、iView
• 移動端Vue項目UI框架：mint-ui（優先）、vant
• sass/scss、less、stylus ???
  推薦less：less相對比sass更簡潔，而stylus的語法靈活性開放性過大，不利於團隊協作開發。

---

腳手架、插件選擇規範

• 腳手架vue-cli2.0 OR vue-cli3.0
  推薦vue-cli2.0：團隊中熟悉2.0版本腳手架的人居多，腳手架是一個工具類的存在。
  有條件選擇vue-cli3.0
• 網絡請求：axios
• 時間格式化插件：momentjs
• 富文本編輯器：ueditor
• 圖片剪裁插件：cropperjs
• 圖表：echarts