前端开发规范

注：本文参考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(Aaaaaashu@gmail.com)
-->

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 user@meizu.com (Firstname Lastname)
 * Copyright 2015 Meizu Inc. All Rights Reserved.
 */

前端开发规范-基本原则