前端入门必知开发规范

本文主要从以下几个方面来概述前端的开发规范
1. 目录构建规范
2. 前端命名规范
3. 前端工作规范
4. 开发文档的书写规范
我们从命名原则、根目录、业务逻辑等方面进行目录构建
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.