前端开发文档

1. 前端的开发规范

1. 目录构建的规范

• 命名原则：

1. 简洁
   比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
2. 不使用复数
   比如： 不使用 imgs docs

• 根目录（root）结构按职能划分
  比如：

1. src 源代码（逻辑）
2. doc 文档
3. dep 第三方依赖包
4. test 测试

• 根据业务逻辑进行文件夹的划分
  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. 纯手动打造
2. 快速构建工具做 —》 改造
   2. 前端命名规范
   BEM && OOCSS 针对的都是 css 命名规范
   jslint eslint js使用规范
   BEM规范
3. 概念：
   Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
4. BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
5. 由拉丁字母, 数字, -组成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
   使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。

e.g.
.block
.header
.site-search
Element

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

e.g.
.block__element
.header__title
.site-search__field
Modifier

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

e.g.
.block--mo