前端开发规范：命名规范、html规范、css规范、js规范

基本准则

符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

命名

变量命名：

命名方式 : 小驼峰式命名方法命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词类型	小写字母
array	a
boolean	b
function	fn
string	s
object	o

推荐：

const aBtn = document.getElementByClass('btn');
const tableTitle = 'LoginTable';

不推荐：

const getTitle = 'LoginTable';

函数：

命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 ) 命名规则 : 前缀为动词动词	含义	返回值
can	判断是否可执行某个动作 ( 权限 )	函数返回一个布尔值。true：可执行；false：不可执行
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

推荐：

//是否可阅读
function canRead(){
    return true;
}

//获取姓名
function getName{
    return this.name
}

常量：

命名方法 : 全部大写 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。推荐：

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

注释规范：

单行注释 ( // )

单独一行：//(双斜线)与注释文字之间保留一个空格

在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。

注释代码：//(双斜线)与代码之间保留一个空格。

推荐：

// 调用了一个函数；1)单独在一行
setTitle();

var maxCount = 10; // 设置最大量；2)在代码后面注释

// setName(); // 3)注释代码

多行注释 ( / 注释说明 / )

若开始(/和结束(/)都在一行，推荐采用单行注释

若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格。

推荐：

/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();

HTML规范

文档规范：

使用 HTML5 的文档声明类型 : `<!DOCTYPE html>`

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

使用文档声明类型的作用是为了防止开启浏览器的怪异模式。

没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。

如果你的页面添加了<!DOCTYP>那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

脚本加载：

所有浏览器中推荐:

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->

    <script src="main.js" async></script>
  </body>
</html>

ie10+及移动端:

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- body goes here -->
  </body>
</html>

语义化：

使用语义化标签有利于SEO。

语义化是指：根据元素其被创造出来时的初始意义来使用它。

意思就是用正确的标签干正确的事，而不是只有div和span。

alt标签不为空

<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容

结构、表现、行为三者分离

尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。建议：

不使用超过一到两张样式表

不使用超过一到两个脚本

不在元素上使用 style 属性

JS规范

代码规范

代码规范： 遵循ESlint规范及风格。

使用 ECMA Script 6

建议使用 ECMA Script 6 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。

避免全局命名空间污染

尽量不用全局变量，推荐使用IIFE（立即执行的函数表达式）：

(function(){
  'use strict';

  // Code goes here

}());

数组和对象字面量

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错,推荐使用数组及对象的字面量形式。推荐：

// 数组
var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

// 对象
var o = {};

var o2 = {
  a: 0,
  b: 1,
  c: 2,
  'strange key': 3
};

不推荐：

// 数组
// Length is 3.
var a1 = new Array(x1, x2, x3);

// Length is 2.
var a2 = new Array(x1, x2);

var a3 = new Array(x1);

// Length is 0.
var a4 = new Array();
// 对象
var o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;

使用全局等

总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。例如：

(function(){
  'use strict';

  log('0' == 0); // true
  log('' == false); // true
  log('1' == true); // true
  log(null == undefined); // true

  var x = {
    valueOf: function() {
      return 'X';
    }
  };

  log(x == 'X');

}());

三元条件判断（if 的快捷方法）

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。

推荐：

return x === 10 ? 'valid' : 'invalid';

不推荐：

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

CSS规范

id和class的命名

ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称。

推荐：

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}

不推荐：

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

class 必须单词全字母小写，单词间以 - 分隔。

class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

示例：

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

合理的使用ID

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class。推荐： .content .title { font-size: 2em; } 不推荐： #content .title { font-size: 2em; }

css选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。

使用子选择器

推荐：

.content > .title {
  font-size: 2rem;
}

不推荐：

.content .title {
  font-size: 2rem;
}

尽量使用缩写属性

尽量使用缩写属性对于代码效率和可读性是很有用的，比如font属性。

推荐：

.box {
      border: 1px solid #fff;
}

不推荐：

.box {
      border-color: #fff;
      border-width: 1px;
      border-style: solid;
}

属性书写顺序

结构性属性：

1.display 2.position, left, top, right 3.overflow, float, clear 4.margin, padding 表现性属性： 1.background, border 2.font, text

推荐：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

不推荐：

.box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

Joyeuxman / Joyeuxman.github.io

前端规范 #24

前端开发规范：命名规范、html规范、css规范、js规范

基本准则

命名

变量命名：

函数：

常量：

注释规范：

HTML规范

文档规范：

使用 HTML5 的文档声明类型 : `<!DOCTYPE html>`

脚本加载：

所有浏览器中推荐:

ie10+及移动端:

语义化：

alt标签不为空

结构、表现、行为三者分离

JS规范

代码规范

使用 ECMA Script 6

避免全局命名空间污染

数组和对象字面量

使用全局等

三元条件判断（if 的快捷方法）

CSS规范

id和class的命名

class 必须单词全字母小写，单词间以 - 分隔。

class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

合理的使用ID

css选择器中避免使用标签名

使用子选择器

尽量使用缩写属性

属性书写顺序

Joyeuxman / Joyeuxman.github.io

前端规范 #24

前端开发规范：命名规范、html规范、css规范、js规范

基本准则

命名

变量命名：

函数：

常量：

注释规范：

HTML规范

文档规范：

使用 HTML5 的文档声明类型 : <!DOCTYPE html>

脚本加载：

所有浏览器中推荐:

ie10+及移动端:

语义化：

alt标签不为空

结构、表现、行为三者分离

JS规范

代码规范

使用 ECMA Script 6

避免全局命名空间污染

数组和对象字面量

使用全局等

三元条件判断（if 的快捷方法）

CSS规范

id和class的命名

class 必须单词全字母小写，单词间以 - 分隔。

class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

合理的使用ID

css选择器中避免使用标签名

使用子选择器

尽量使用缩写属性

属性书写顺序

使用 HTML5 的文档声明类型 : `<!DOCTYPE html>`