学点前端：要懂得的前端开发规范上期

在深圳，越来越多的企业意识到前端岗位的重要性，高薪聘请前端人才不再少数。因此，想要通过学习个过硬的前端技术以走进前端行业的小伙伴也不断增加。

为了让大家能够更系统学习和了解前端技术，我们也一点点的向大家分享下有关前端的知识点！

除了通过网络上优质的视频课程进行学习。有条件的同学，还是不建议自学的，最好是去全日制的教学机构学习比较系统！

由于前端开发规范的知识点比较多，我们会分上下两个篇幅来分享！

主要从以下几个方面来概述前端的开发规范（上）

1. 目录构建规范

2. 前端命名规范

1. 前端目录构建规范

我们从命名原则、根目录、业务逻辑等方面进行目录构建

1.1 命名原则：

- 简洁明了（如下：）

* src 源代码

* img 图片资源

* js JavaScript脚本

* dep 第三方依赖包

- 不使用复数（如下：）

* 不使用 imgs docs

1.2 根目录（root）结构按职能划分（如下：）

- src 源代码（逻辑）

- doc 文档

- dep 第三方依赖包

- test 测试

1.3 根据业务逻辑进行文件夹的划分（如下：）

- src目录名词解释：

- common 公共资源

- public/static 静态资源

- component 组件

- view/tpl 模板文件

```

src

common 公共资源

img

logo.png

sprites.png

css

reset.css

js

conf.js 项目的配置文件

public/static 静态资源

js

css

tpl

index.html

shopcar.html

img

component 组件

home

shopcar

login

register

user

list

detail

view/tpl 项目模板 tpl 是 template的缩写

```

1.4 总结：

以上目录开发规范有两种使用途径

1. 使用前端工程化工具如webpack、gulp等进行手动打造

2. 利用框架提供的脚手架工具进行修改

2. 前端命名规范

这部分内容我从以下两个方面来进行讲解

· CSS命名规范

o BEM规范

o OOCSS规范

· javaScript编写规范

o jslint

o eslint

2.1 css命名规范

2.1.1 BEM规范

- 概念：

Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。

- BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。

- 由拉丁字母, 数字, -组成css的单个名称.

- Block Element Modifier

- 独立且有意义的实体, e.g. header, container, menu, checkbox, etc.

- Block的一部分且没有独立的意义, e.g. header title, menu item, list item, etc.

- Blocks或Elements的一种标志，可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc.

- Naming

由拉丁字母, 数字, -组成css的单个名称.

- Block

使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。

```css

.block

.header

.site-search

```

- Element

使用__连接符来连接Block 和 Element。

```css

.block__element

.header__title

.site-search__field

```

- Modifier

使用--连接符来连接Block 或 Element 和 Modifier。

```css

.block--modifier

.block__element--modifier

.header--hide

.header__title--color-red

.site-search__field--disabled

```

- 实例

```html

```

```css

.form {}

.form--theme-xmas {}

.form--simple {}

.form__input { }

.form__submit {}

.form__submit--disabled {}

```

- Buttons实例

``` html

Normal button

Success button

Danger button

```

```css

.button {

display: inline-block;

border-radius: 3px;

padding: 7px 12px;

border: 1px solid #D5D5D5;

background-image: linear-gradient(#EEE, #DDD);

font: 700 13px/18px Helvetica, arial;

}

.button--state-success {

color: #FFF;

background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;

border-color: #4A993E;

}

.button--state-danger {

color: #900;

}

```

2.1.2 OOCSS规范

- 概念

Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。

OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。

- 总结：

将重用的东西当做一个对象来看， 然后将不同的属性 放到另一个类名去

```css

.list{

background: #fff;

}

.list--width{

width: 300px;

}

```

2.2 js编写代码规范

· jslint

· eslint

好了，今天有关前端开发规范的知识点，就先讲解到这里。如果觉得好的，不妨关注WX：“千锋深圳”了解更多，下期内容更精彩呢！

有关前端的开发规范下期内容主要包括：

前端工作规范

开发文档的书写规范

有条件的同学最好是能够去参加全日制的学习，多为自己累积项目实战经验。

另外，想要进一步系统掌握前端的技术点，但是又找不到靠谱的视频教程，也可以留言跟我索取哦！