前端開發規范-基本原則

前端開發規范

注：本文參考W3Cschool 前端開發規范

1.基本原則

結構樣式行為分離

盡量確保文檔和模板只包含  HTML  結構，樣式都放到樣式表里，行為都放到腳本里。

縮進

統一兩個空格縮進（總之縮進統一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼

使用不帶 BOM 的utf-8編碼

• 在HTML中制定編碼 <meta charset="utf-8"> ；
• 無需使用 @charset  制定樣式表的編碼，它默認UTF-8

一律使用小寫字母

省略外鏈資源URL協議部分

省略外鏈資源（圖片及其他媒體資源）URL中的 http  / https協議，使URL成為相對地址。其他的如：ftp的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);
}

統一注釋

html注釋

• 模塊注釋

  <!-- 文章列表列表模塊 -->
  <div class="article-list">
  ...
  </div>

• 區塊注釋

  <!--
  @name: Drop Down Menu
  @description: Style of top bar drop down menu.
  @author: Ashu([e-mail])
  -->

   

css注釋

組件快和子組件快以及聲明塊之間使用一空行分隔，子組件之間三空行分隔；

/* ==========================================================================
   組件塊
 ============================================================================ */

/* 子組件塊
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子組件塊
 ============================================================================ */
.selector-secondary {
  display: block; /* 注釋*/
}

.selector-three {
  display: span;
}

javascript注釋

• 單行注釋：必須獨占一行，// 后跟一個空格，縮進與下一行被注釋的代碼一致。
• 多行注釋：避免使用/*...*/ 這樣的多行注釋，有多行注釋內容時，使用多個單行注釋。

　　　　（1）函數/方法注釋

　　　　（2）函數/方法注釋必須包含函數說明，有參數和返回值時必須使用注釋標識。

　　　　（3）參數和返回值注釋必須包含類型信息和說明。

　　　　（4）當函數是內部函數，外部不可訪問時，可以使用@inner標識。　　

**
 * 函數描述
 *
 * @param {string} p1 參數1的說明
 * @param {string} p2 參數2的說明，比較長
 *     那就換行了.
 * @param {number=} p3 參數3的說明（可選）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

• 文件注釋

　　　文件注釋用於告訴不熟悉這段代碼的讀者這個文件中包含哪些東西，應該提供文件的大體內容，它的作者，依賴關系和兼容性信息。

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author [e-mail] (Firstname Lastname)
 * Copyright 2015 Meizu Inc. All Rights Reserved.
 */