简介

- 新人刚开始工作代码通常不是很规范
- 大厂的前端代码规范通常写的很多，对新人来说大部分在代码里也用不到
- 整理了一下我认为前端项目了比较常用的规范，方便新人规范代码，提交代码

命名

样式命名

class、id都需小写
命名使用英文，禁止使用特殊字符
样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽
名称间隔使用-符号
涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱
禁止使用层级过深的选择器，最多3级
除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
类名命名需要语义化，参考下面的示例：

 .wrap{}                 //外层容器
 .mod-box{}              //模块容器
 .btn-start{}            //开始
 .btn-download-ios{}     //ios下载
 .btn-download-andriod{} //安卓下载
 .btn-head-nav1{}        //头部导航链接1
 .btn-news-more{}        //更多新闻
 .btn-play{}             //播放视频
 .btn-ico{}              //按钮ico
 .btn-lottery{}          //开始抽奖
 .side-nav{}             //侧栏导航
 .side-nav-btn1{}        //侧栏导航-链接1 
 .btn-more{}             //更多

图片命名

图片名称必须小写，禁止使用特殊字符、中文
使用英文或拼音缩写，禁止特殊字符
名称间隔使用-符号

命名需要能体现图片的大概用途

常用示例：

 bg.jpg          //背景图片
 mod-bg.jpg      //模块背景
 sprites.png     //精灵图
 btn-start.png   //开始按钮
 ico-play.png    //修饰性图片

文件目录命名

图片文件夹：ossweb-img
CSS文件夹：css
JS文件夹：js
include页面片段文件夹：inc

文件命名

所有文件名统一使用小写，首页命名为index.html html内页，有明显分类的，参考使用以下示例命名，无明确意义的，可用page01.html、page02.html，禁止使用特殊字符，统一使用小写字母
常用命名：

专题名称	描述
index.html	引导页&首页
main.html	首页
news.html	资讯页
newsdetail.html	资讯详情页
raiders.html	攻略页
raidersdetail.html	攻略页详情页
download.html	下载页面
actlist.html	活动列表页面
video.html	视频
cdkey.html	CDKEY兑换页
wallpaper.html	壁纸页面

vue组件命名-参考Vue官网风格指南

单文件组件文件名的大小写强烈推荐

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

js代码命名

* “骆驼式命名法（Camel-Case）又称驼峰式命名法
* 每一个单词的首字母都采用大写字母的命名格式*，被称为“*Pascal命名法*”，源自于Pascal语言的命名惯例，也有人称之为“大驼峰式命名法”（Upper Camel Case），为驼峰式大小写的子集。

`变量` 使用 `Camel命名法`

var loadingModules = {};

`常量` 使用 `全部字母大写，单词间下划线分隔` 的命名方式

var HTML_ENTITY = {};

`函数` 使用 `Camel命名法`

function stringFormat(source) {
}

函数的 `参数` 使用 `Camel命名法`

function hear(theBells) {
}

`类` 使用 `Pascal命名法`

function TextNode(options) {
}

`类名` 使用 `名词`

function Engine(options) {
}

`函数名` 使用 `动宾短语`

function getStyle(element) {
}

注释

* 对于有复杂逻辑的方法或代码片段，一定要加注释

函数/方法注释

[强制] 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。

解释：

当 return 关键字仅作退出函数/方法使用时，无须对返回值作注释标识。

[强制] 参数和返回值注释必须包含类型信息，且不允许省略参数的说明。

[建议] 当函数是内部函数，外部不可访问时，可以使用 `@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
    };
}

[强制] 对 Object 中各项的描述，必须使用 `@param` 标识。

常量注释

常量必须使用 `@const` 标记，并包含说明和类型信息。

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

/**
 * 函数描述
 *
 * @param {Object} option 参数描述
 * @param {string} option.url option项描述
 * @param {string=} option.method option项描述，可选参数
 */
function foo(option) {
    // TODO
}

代码风格

缩进

使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。

// good
switch (variable) {

    case '1':
        // do...
        break;

    case '2':
        // do...
        break;

    default:
        // do...

}

// bad
switch (variable) {

case '1':
    // do...
    break;

case '2':
    // do...
    break;

default:
    // do...

}

换行

每个独立语句结束后必须换行。
每行不得超过 120 个字符。

解释：超长的不可分割的代码允许例外，比如复杂的正则表达式。长字符串不在例外之列。

运算符处换行时，运算符必须在新行的行首。

// good
if (user.isAuthenticated()
    && user.isInRole('admin')
    && user.hasAuthority('add-admin')
    || user.hasAuthority('delete-admin')
) {
    // Code
}

var result = number1 + number2 + number3
    + number4 + number5;


// bad
if (user.isAuthenticated() &&
    user.isInRole('admin') &&
    user.hasAuthority('add-admin') ||
    user.hasAuthority('delete-admin')) {
    // Code
}

var result = number1 + number2 + number3 +
    number4 + number5;

css 属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

其他

每个vue组件文件代码总行数不要超过 400行

建议vue组件不要超过400行，既然是组件化开发，那么如果一个组件文件体积太大，存在几十个方法、几十个 data数据，那就说明这个组件大概率包含的功能点太多，是可以被继续细化出多个单一功能的子组件

每个函数不要超过 100行

不要让一个方法函数包含过多的逻辑功能，函数包含过多逻辑，容易混乱，遵循函数功能单一原则

git使用

type: commit 的类型

feat: 新功能、新特性
fix: 修改 bug
perf: 更改代码，以提高性能
refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改（例如分号修改）
test: 测试用例新增、修改
build: 影响项目构建或依赖项修改
revert: 恢复上一次提交
ci: 持续集成相关文件修改
chore: 其他修改（不在上述类型中的修改）
release: 发布新版本

使用习惯

一次代码提交只完成一件事情

一次代码提交只完成一件事情。这和咱们平时讲的程序设计的单一职责原则相似。代码千万不能攒一大堆再提交。比如说修改 bug，我习惯于每一个 bug 修复都是一次单独的提交。bug 一个一个改，改完一个验证一个，验证完一个提交一个。

不提交不相关代码

不提交不相关代码。比如一些日志打印，一些调试代码，一些增加了又被注释掉的代码，一些格式化后引起变化的代码。

及时提交代码

每当完成一个小的完整的单元的时候，都习惯性的提交代码不要每次修改一个文件都要提交一次；除非明确修复了某个bug或者完成了某个功能；

前端代码规范

简介

命名