前端规范

HTML

基础规范

1.为每个HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。(Line1)
2.html根元素指定lang属性，从而为文档设置正确的语言。(Line2)
3.声明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。根据页面内容和需求填写适当的keywords和description。(Line4)
4.每个页面必须有且仅有一个title元素。(Line5)
5.在引入CSS和JavaScript文件时一般不需要指定type属性，因为text/css和text/javascript分别是它们的默认值。(Line6/7)

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Sample page</title>
        <link rel="stylesheet" href="css_example_url" />
        <script src="js_example_url"></script>
    </head>
    <body>
    </body>
</html>

Tip:
IE 支持通过特定的<meta>标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

资源引入

不要指定引入资源的具体协议
当引入资源时，所指向的具体路径，不要指定协议部分（http:/https:）。其作用是，在请求资源协议无法确定时，可根据当前页面所用协议自动填充，避免所用协议冲突。

1
2
3
4
<!-- 推荐 -->
<script src="//cdn.com/foundation.min.js"></script>
<!-- 不推荐 -->
<script src="http://cdn.com/foundation.min.js"></script>

属性顺序

class用于标识高度可复用的组件，排在首位。id用于标识具体的组件，应当谨慎使用。

  • class
  • id、name
  • data-*
  • src、for、type、href
  • title、alt
  • aria-*、role

    Tip:属性定义全部使用双引号。

id/class命名规则

遵循“内容优先，表现为辅”的基本原则
首先根据内容命名，如header、footer。若根据内容无法找到合适的命名，再结合表现进行辅助，如col-main、blue-box。

一律小写，多个单词以“-”连接
不能使用下划线和驼峰命名法，如main-nav。可基于最近的父元素名称作为前缀。

在不影响语义的情况下，可适当使用缩写
缩写只用来表示结构，如col、nav、btn等，不可自造缩写。

使用以“J_”开头的钩子形式命名需要与js交互的元素
使用在class中时，应放在最前，如class=“J_tab-content” some-mode-content。另外注意css中，不可选用钩子命名进行样式定义。

避免广告拦截词汇
ad、ads、adv、banner、sponsor、gg、guangg、guanggao等，页面中尽量避免采用以上词汇来命名。

减少标签的数量

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。

图片

必不可少的图片使用<img>引入，可有可无的装饰性图片可以通标签的style引入。

自闭合标签

对于自闭和标签，虽然没有强制的规定，但为了更好的规范性，必须添加“/”来标明标签的结束。常见的自闭和标签有img、input、link、meta、br、hr等。

1
2
3
4
<!-- 推荐 -->
<img src="demo.png" alt="demo" />
<!-- 不推荐 -->
<img src="demo.png" alt="demo">

注释规范

页面中使用注释划分结构块，注意与css中的注释达成统一格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 头部 -->
<div class="g-hd">
    <!-- LOGO -->
    <h1 class="m-logo"><a hred="#">LOGO</a></h1>
    <!-- /LOGO -->
    <!-- 导航 -->
    <ul class="m-nav">
        <li><a hred="#">NAV1</a></li>
        <li><a hred="#">NAV2</a></li>
    </ul>
    <!-- /导航 -->
</div>
<!-- /头部 -->

CSS

属性顺序

1.位置属性(position、top、right、z-index、display、float等)；
2.大小(width, height, padding, margin等)；
3.文字系列(font、line-height、letter-spacing、color、text-align等)；
4.背景(background、border等)；
5.其他(animation、transition等)。

属性使用缩写

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

  • padding
  • margin
  • font
  • background
  • border
  • border-radius
    另外，对于#aabbcc形式的颜色值也可简化为#abc，这样精简代码同时又能提高用户的阅读体验。

    Tip: 不使用rgb()定义颜色，涉及到alpha时，可使用rgba()，同一项目中颜色值大小写一致。

文本编排

字体族名称使用英文
如含空格，须放置在引号中。同一项目中，family-name统一大小写。

1
2
3
h1 {
    font-family: "Microsoft YaHei";
}

font-family书写顺序
遵循西文在前、中文在后，以及效果佳在前、效果次在后的原则，最后必须指定一个通用字体族（serif/sans-serif）。

1
2
3
h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

a标签伪类书写顺序

按照规范，正确的书写顺序应为：link-visited-hover-active，这样能避免在各个浏览器上的兼容问题。

媒体查询（Media query）的位置

媒体查询放在相关规则后面或者统一放在文档底部，若统一放在文档底部的时候，顺序应按照正常样式进行排布且注释统一。

带前缀的属性

当使用带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，便于多行编辑。

1
2
3
4
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

去掉小数点前的“0”

当数值为0-1之间的小数时，省略整数部分的0。

优化选择器

注：该部分原理来自于参考文档中的第三篇。
选择器书写
1.每个选择器独占一行；
2.在每个声明块的左花括号前添加一个空格，声明块的右花括号单独成行；
3.>、+、~选择器的两边各保留一个空格；
4.每条声明独占一行，其中的:后插入一个空格，所有声明语句都应当以分号结尾；
5.属性选择器中的值必须用双引号包围。

避免为id或class选择器添加类型限定

1
2
3
4
5
6
7
8
9
10
/* 推荐 */
#error,
.danger-message {
    font-color: #c00;
}
/* 不推荐 */
dialog#error,
p.danger-message {
    font-color: #c00;
}

避免使用多层标签选择器和子选择器
选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。可使用class选择器或继承来加以替换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 推荐 */
.treecell-mailfolder {
    padding: .5px;
}
#bookmarkMenuItem {
    list-style-image: url(blah);
}
/* 不推荐 */
treeitem[mailfolder="true"] > treerow > treecell {
    padding: .5px;
}
treehead treerow treecell {
    padding: .5px;
}
#bookmarkMenuItem > .menu-left {
    list-style-image: url(blah);
}

JS

命名规则

文件命名

文件夹和文件的命名应能代表代码功能，与后端一致为佳。

变量命名

基本规范
变量命名采用匈牙利命名法，都以类型前缀+有意义的单词组成，单词首字母都需要大写。例如：sUserName、nCount。

前缀规范
每个局部变量都需要有一个类型前缀，按照类型可以分为以下几种。

  • s：表示字符串。例如：sName、sHtml;
  • n：表示数字。例如：nPage、nTotal;
  • b：表示逻辑。例如：bChecked、bHasLogin;
  • a：表示数组。例如：aList、aGroup;
  • r：表示正则表达式。例如：rDomain、rEmail;
  • f：表示函数。例如：fGetHtml、fInit;
  • o：表示以上未涉及到的其他对象，例如：oButton、oDate;

例外情况
1.作用域不大临时变量可以简写，比如：str、num、obj、arr等。
2：循环变量可以简写，比如：i、j、k等。

函数命名

以f为前缀标明函数，统一使用动词或者动词[+名词]形式，例如：fGetVersion()、fSubmitForm()、fInit()，涉及返回逻辑值的函数可以使用is，has等表示逻辑的词语代替动词。
如果有内部函数，使用_f+动词[+名词]形式，内部函数必需在函数最后定义。

1
2
3
4
5
6
7
8
9
10
11
function fGetNumber(nTotal) {  
    if(nTotal < 100){  
        nTotal = 100;  
    }  
    return _fAdd(nTotal);    
    function _fAdd(nNumber) {  
        nNumber++;  
        return nNumber;  
    }  
}

编码规则

空格的使用
关键词、条件括弧后面、运算操作符两侧、语句分隔符‘,’后面，使用空格。

1
2
3
4
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
    // code
}

引号的使用
统一使用单引号(‘)，不使用双引号(“)。这在创建HTML字符串时非常有好处。

过长的单行予以换行
换行应选择在操作符和标点符号之后。

1
2
3
4
5
if (oUser.nAge < 30
    && oUser.bIsChecked === true
    || oUser.sName === 'admin') {
    // code
}

用数组和对象字面量来代替数组和对象构造器
数组构造器很容易让人在它的参数上犯错，如new Array(1, 2, 3)会生成数组[1, 2, 3]，但
new Array(3)只会生成长度为3的空数组。
对象构造器不会有类似的问题，但是为了可读性和统一性，我们应该使用对象字面量。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 推荐
var a1 = [x1, x2, x3];
var a2 = [x1];
var o = {
  a: 0,
  'strange key': 3
};
// 不推荐
var a1 = new Array(x1, x2, x3);
var a2 = new Array(x1);
var o = new Object();
o.a = 0;
o['strange key'] = 3;

循环的使用
在循环中，尽量使用变量先获取到相关数值，在放入循环中进行判断，否则非常影响性能。

1
2
3
4
5
6
7
8
// 推荐
for (var i = 0, max = $('#id').children().length; i < max; i++) {
    // code
}
// 不推荐
for (var i = 0; i < $('#id').children().length; i++) {
    // code
}

注释规范

函数注释

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 简述
 *
 * 功能详细描述
 *
 * @param <String> arg1 参数1
 * @param <Number> arg2 参数2，默认为0
 * @return <Boolean> 判断xxx是否成功
 */
 function fooFunction (arg1, arg2) {
    // code
 }

语句注释

单行注释
1.单独一行：//(双斜线)与注释文字之间保留一个空格；
2.在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格；
3.//(双斜线)与代码之间保留一个空格。

1
2
3
4
// 调用了一个函数；1)单独在一行
setTitle();
var maxCount = 10; // 设置最大量；2)在代码后面注释
// setName(); // 3)注释代码

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

注释内容

在对代码进行注释时，应注意不要写你的代码干了些什么，最好能写出为什么这么写代码，写出背后的考量。

代码检查

推荐使用JSHint或JSLint。

目录结构

约定由于配置。

参考

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

喜欢音乐 看书 旅行<br>偶尔玩设计<br>以及 只爱写JS的程序媛一枚