网页前端开发规范

标准：使用谷歌国际标准代码规范。

书写规范：增强语义化，增强阅读性。

1. 只用小写字母

所有的代码都用小写字母：适用于元素名，属性，选择器，特性。

<A HREF="/">HomeA>

<img src="google.png" alt="Google">

2. 增强语义

根据HTML各个元素的用途而去使用它们,使用语义化标签。
使用元素要知道为什么去使用它们和是否正确。 例如，用heading元素构造标题， p 元素构造段落, a 元素构造锚点等。
禁止用行内元素包裹块级标签，最好不要在p标签内嵌套别的标签

1. 
   <div onclick="goToRecommendations();">All recommendationsdiv>
   
   <a href="recommendations/">All recommendationsa>

3. HTML结构、CSS样式、JS分离

尽量确保HTML中只包含HTML结构， 把所有CSS都放到样式表文件里，把所有JS都放到脚本文件里。

DOCTYPE html>
<title>HTML suckstitle>
<style type='text/css'>
   p{background:red;}
style>
<h1 style="font-size: 1em;">HTML sucksh1>
<p>I’ve read about this on a few sites but now I’m sure:p>
<u>HTML is stupid!!1u>
<script type="text/javascript">
   document.getElementsByTagName("u").innerHtml = 'HTML is stupid!!2';
script>

DOCTYPE html>
<title>My first CSS-only redesigntitle>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesignh1>
<p>I’ve read about this on a few sites but today I’m actuallyp>
<script src="default.js" type="text/javascript">script>

格式规范：禁止看到参差不齐的格式

1. HTML格式

每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。
独立元素的样式，将块元素、列表元素或表格元素都放在新行。
另外需要缩进块元素、列表元素或表格元素的子元素（统一两个空格缩进，不要使用 Tab 或者 Tab、空格混搭）。

1. 
   <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前面）。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

代码块内容缩进，它能够提高层次结构的清晰度。

1. @media screen, projection {
     html {
        background: #fff;
        color: #444;
     }
   }

声明完结，所有声明都要用“;”结尾。

1. /* 不推荐 */
   .test {
     display: block;
     height: 100px
   }
   /* 推荐 */
   .test {
     display: block;
     height: 100px;
   }

规则分行，每个规则独立一行，两个规则之间隔行

html {
  background: #fff;
}
.
body {
  margin: auto;
  width: 50%;
}

命名规范：严禁特简化命名

1. ID和class的命名规范

为ID和class取通用且有意义的名字

/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
/* 不推荐: 表达不具体 */
.button-green {}
.clear {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.video {}
/* 推荐: 通用 */
.aux {}
.alt {}

2. ID和class命名风格

非必要的情况下，ID和class的名称应尽量简短；但也要传达ID或class是关于什么的。

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

3. 类型选择器

非必要的情况下不要使用元素标签名和ID或class进行组合;出于性能上的考虑避免使用父辈节点做选择器.

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

4. 属性缩写

写属性值的时候尽量使用缩写；CSS很多属性都支持缩写shorthand （例如 font 、background） 尽量使用缩写，甚至只设置一个值。

/* 不推荐 */
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

1. .test {
     margin: 0;
     padding: 0;
     font-size: .8em;
   }

6. ID和class命名的定界符

ID和class名字有多单词组合的用短破折号“-”分开。

/* 不推荐：“demo”和“image”中间没加“-” */
.demoimage {}
/* 不推荐：用下划线“_” */
.error_status {}
/* 不推荐：用驼峰命名 */
.errorStatus {}
/* 推荐 */
#video-id {}
.ads-sample {}

Js语法规范：严格按照此中语言的语法要求进行编码

1. 变量

小驼峰式命名法由小写字母开始，后续每个单词首字母都大写

// 不好的命名方式
var max_count = 10;
var TableTitle = 'LoginTable';
// 好的命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';

2. 函数

小驼峰式命名法由小写字母开始，后续每个单词首字母都大写

// 是否可阅读
function canRead() {
  return true;
}
// 获取名称
function getName() {
  return this.name;
}

3. 常量

名称全部大写，使用大写字母和下划线来组合命名，下划线用以分割单词

var MAX_COUNT = 10;
var URL = 'http://www.baidu.com';

4. 构造函数

大驼峰式命名法，首字母大写，后续每个单词首字母都大写

function Student(name) {
  this.name = name;
}
var st = new Student('tom');

5. 类

公共属性和方法：跟变量和函数的命名一样。
私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。

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私有变量的值

6.空格

二元运算符必须有一个空格，一元运算符与操作对象之间不允许有空格

  var a = !arr.length;
  a++;
  a = b + c;

用作代码块其实的左花括号 “{“ 前必须有一个空格

  if (condition) {
      //code
  }
  function funName() {
      //code
  }

关键词if/else/for/while/function/switch/do/try/catch/finally后，必须有一个空格

  if (condition) {
      //code
  }
  while (condition) {
      //code
  }
  (function () {
      //code
  })();

在对象创建时，属性中的 “:”之后必须有空格，”:”之前不允许有空格

  var obj = {
      a: 1,
      b: 2,
      c: 3
  };

函数声明、具名函数表达式、函数调用中，函数名和 “(“ 之间不允许有空格

  function funName() {
      //code
  }
  var funName = function funName() {
      //code
  };
  funName();

“,” 和 “;”前不允许有空格。如果不位于行尾， “,”和”;”后必须跟一个空格

  callFunc(a, b);

行尾不允许有多余的空格

5. 换行

每个独立语句结束后必须换行
每行不得超过120个字符（超长的不可分割的代码允许例外，比如复杂的正则表达式，长字符串不在例外之列）
运算符处换行时，运算符必须在新行的行首

  if (user.isAuthenticated()
      && user.isInRole('admin')
      && user.hasAuthority('add-admin')
      || user.hasAuthority('delete-admin')
  ) {
      //code
  }
  var result = number1 + number2 + number3
      + number4 + number5;

在函数声明、函数表达式、函数调用、对象创建、for语句等场景中，不允许在 “,” 或 “;” 前换行

  var obj = {
      a: 1,
      b: 2,
      c: 3
  };
  foo(
      a,
      b,
      callback
  );

6. 语句

不得省略语句结束的分号
在if/else/for/do/while语句中，即使只有一行，也不得省略块{…}

if (condition) {
  callFunc();
}

函数定义结束不允许添加分号

function funName() {
}

如果是函数表达式，分号不能省略

var funName = function () {
};

注释

推荐多写说明注释，HTML模块说明注释、函数方法说明注释和组件用法说明注释

1. HTML

1. 
   <div class="sell">div>
   
   

2. CSS

1. /* CSS推荐注释，左右各空一个空格，区块注释说明 */
   .sell {
     background: #000;
   }
   /* CSS推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释 */
   /*
   .sell p {
     background: #000;
     font-size: 12px;
   }
   */

3. JS

// Js推荐注释，注释符号与注释说明之间空一个空格，单行
var sellEle = document.querySelector('.sell');
// Js推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释
/*
var sellEle = document.querySelector('.sell');
console.log(sellEle);
*/
/**
* 函数说明
* 合并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
}

使用@extends标记类的继承信息
/**
* 描述
*
* @class
* @extends Developer
*/
function Fronteer() {
  Developer.call(this);
}
util.inherits(Fronteer,Developer);

常量注释
/**
* 常量说明
* @const
* @type {string}
*/
var REQUEST_URL = 'myurl.do';