开发文档规范

开发文档规范

前端的开发规范

1. 目录构建的规范

命名原则：

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

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

3. src 源代码（逻辑）
   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的缩写
4. doc 文档
5. dep 第三方依赖包
6. test 测试

• 根据业务逻辑进行文件夹的划分

• 总结：
  以上目录开发规范有两种使用途径

8. 纯手动打造
9. 快速构建工具做 —》 改造

2. 前端命名规范

BEM && OOCSS 针对的都是 css 命名规范
jslint eslint js使用规范
BEM规范

1. 概念：
   Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
2. BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
3. 由拉丁字母, 数字, -组成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