前端开发文档_软件开发文档模板

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/2982.html