前端代码规范

代码千万行，安全第一行；前端不规范，同事两行泪。

一、命名规范

(一) 项目命名
全部采用小写的方式
以中划线分割
正确命名：mall-management-system (商城管理系统)
错误命名：mall-management-system 或 mallManagementSystem

(二) 目录命名
全部采用小写的方式
以中划线命名
复数时，要采用复数结构
正确命名：sctipts / styles / utils / demo-scripts

(三) JS、CSS、SCSS、HTML、PNG等文件命名
全部采用小写的方式
以中划线命名
正确命名：render-dom.js / signup.css / index.html / company-logo

(四) 命名严谨性
严禁使用 拼音和中文混合的方式

严禁使用中文、中文拼音

正确使用 英文拼写和语法

一些特殊的词语可以采用国际通用的名称

如：河南=henan / 人民币=rmb

正确命名：movie(电影) / employee(员工)

错误命名：dianyin(电影) condition --> condi (×)

二、HTML规范（Vue Template通用）

(二) 缩进
一个tab 使用两个空格
嵌套的节点应该缩进
(三) 分块注释
在每一个块级元素，列表元素 和 表格元素中，加上一对HTML注释，注释格式

<!-- 英文 中文 start -->
 <!-- 英文 中文 end -->

例如：

<!-- header 头部 start -->
  <header>
    <div>
      <a href=""></a>
    </div>
  </header>
  <!-- header 头部 end -->

(四) 语义化标签
HTML5 有很多语义化标签，优先使用这些语义化标签，避免每一个页面都是 div或者 p

(五) 引号
**使用双引号" " **而不是单引号’’

三、CSS 规范

(一) 命名
类名使用小写字母，以中划线分割

.swiper-image { ... }

id 使用 驼峰式命名

#header { ... }

scss中的变量、函数、混合、placeholder采用驼峰命名
class 的命名不要使用 标签名

如：.p .div

(二) 选择器
尽量使用直接子选择器，否则，有时会造成性能损耗

不推荐：

.content .title { ... }

推荐：

.content > .title { ... }

(三) 尽量使用缩写的属性
不推荐：

 border-style: solid;
 border-width: 1px;
 border-color: red;

推荐：

border: 1px solid red;

(四) 每个选择器及属性独占一行
不推荐：

img {
      width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

推荐：

img {
      width: 100%;
      box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

(五) 省略 0 后面的单位

border-width: 0;

(六) 避免使用 ID 选择器及 全局标签污染全局样式
能不用 id选择器 就不要 使用id选择器，避免不是禁止

JS规范

• 每行代码结束必须有分号。
• 变量命名：
  • 驼峰式命名.原生JS变量要求是纯英文字母，首字母须小写;
  • 要求变量集中声明，避免全局变量;
  • 私有属性、变量和方法以下划线 _ 开头;
  • 常量, 使用全部字母大写，单词间下划线分隔的命名方式;
  • 枚举的属性， 使用全部字母大写，单词间下划线分隔的命名方式
  • 类命名：首字母大写，驼峰式命名.如MyVue
  • 函数命名：首字母小写驼峰式命名.如myVue()
  • 命名语义化，尽可能利用英文单词或其缩写。
• 代码结构明了，加适量注释.提高函数重用率。
• 注释 （尽量提高代码本身的清晰性、可读性，合理的注释、空行排版等，可以让代码更易阅读、更具美感）
• 利用缓存存放数据、资源压缩、避免高频刷新页面、静态资源上传cdn

函数/方法注释:

函数/方法注释须包含函数说明，有参数和返回值时必须使用注释标识。；
参数和返回值注释必须包含类型信息和说明；
当函数是内部函数，外部不可访问时，可以使用 @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 2009 Meizu Inc. All Rights Reserved.
 */

图片规范
所有页面元素类图片均放入img文件夹，测试用图片放于demo文件夹。
命名全部用小写英文字母或数字或_的组合，其中不得包含汉字或空格或特殊字符；
尽量用易懂的词汇，便于团队其他成员理解。
另，命名分头尾两部分，用下划线隔开，比如ad_left01.gif或btn_submit.gif。
在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。
运用css精灵图技术集中小的背景图或图标，减小页面http请求，但注意，请务必在对应的精灵图psd源图中划参考线，并保存至img目录下