页面的命名规则

1. 统一用翻译的英文命名（推荐）
2. 统一用拼音命名（拼音的简化也可）
3. 如果文件名过长，企业要提前约定一份缩写的规范，如pro—product

例如：

• 首页—index
• 产品列表—prolist产品详细页面—prodetail
• 新闻列表—newslist新闻详细页面—newsdetail
• 发展历史—history
• 关于我们—aboutus
• 联系我们—linkus，contactus
• 信息反馈—feedback留言—leavewords

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

• banner：放置在页面顶部的广告，装饰图案等长方形的图片
• logo：标志性的图片
• button：在页面上位置不固定，并且带有链接的小图片
• menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
• pic：装饰用的图片

例子：

• banner_sohu.gif, banner_sina.gif
• menu_aboutus.gif,menu_job.gif
• title_news.gif
• logo_police.gif
• pic_people.gif

css样式命名  

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部 

DIV+CSS命名参考表：

js函数命名规范  

函数命名：统一使用动词或者动词+名词形式 ---- fnInit()

对象方法命名使用fn+对象类名+动词+名词形式   fnAnimateDoRun() 

某事件响应函数命名方式为fn+触发事件对象名+事件名或者模块名  fnDivClick()

附常用的动词列表：

get 获取/set 设置, add 增加/remove 删除
create 创建/destory 移除 start 启动/stop 停止
open 打开/close 关闭, read 读取/write 写入
load 载入/save 保存, create 创建/destroy 销毁
begin 开始/end 结束, backup 备份/restore 恢复
import 导入/export 导出, split 分割/merge 合并
inject 注入/extract 提取, attach 附着/detach 脱离
bind 绑定/separate 分离, view 查看/browse 浏览
edit 编辑/modify 修改, select 选取/mark 标记
copy 复制/paste 粘贴, undo 撤销/redo 重做
insert 插入/delete 移除, add 加入/append 添加
clean 清理/clear 清除, index 索引/sort 排序
find 查找/search 搜索, increase 增加/decrease 减少
play 播放/pause 暂停, launch 启动/run 运行
compile 编译/execute 执行, debug 调试/trace 跟踪
observe 观察/listen 监听, build 构建/publish 发布
input 输入/output 输出, encode 编码/decode 解码
encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩
pack 打包/unpack 解包, parse 解析/emit 生成
connect 连接/disconnect 断开, send 发送/receive 接收
download 下载/upload 上传, refresh 刷新/synchronize 同步
update 更新/revert 复原, lock 锁定/unlock 解锁
check out 签出/check in 签入, submit 提交/commit 交付
push 推/pull 拉, expand 展开/collapse 折叠
begin 起始/end 结束, start 开始/finish 完成
enter 进入/exit 退出, abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集

常用的文件命名

• rc，source
  源代码，用src居多

• test，__tests__
  测试文件，也经常用__test__，facebook的测试框架jest默认的测试文件目录就是__test__

• docs
  文档

• lib
  库文件，library的缩写

• dist
  用来放打包编译后的文件，应该是distribution的缩写

• build，scripts
  构建脚本

• utils，tools，helpers
  工具代码

• controllers，views，middlewares，models
  MVC对应的models，views，controllers，还有中间件middlewares

• router
  路由

• server
  用来放服务端代码

• adapters
  适配器，适配器模式是一种很常用的设计模式
  
  

• legacy
  一般用来放兼容历史版本或兼容旧浏览器的代码
  
  

• config
  配置文件

• benchmarks
  benchmarks测试，又叫基准测试或性能测试。用来测试版本的性能变化

• unit，spec
  单元测试，一般在test目录下

• e2e
  端对端测试，一般在test目录下

• assets，vendor
  资源，一般用来放图片或css文件

• static
  静态资源

• examples，demo
  示例

• component
  组件

• plugins
  插件

• bin
  命令脚本，命令行工具经常会用到
  

• common
  公用的文件

• packages
  很多项目会打包出多个npm包，用来减小体积，一般会用packages来放不同的包

• misc
  杂项，miscellaneous的缩写
  

• core
  核心文件

链接: https://www.fly63.com/article/detial/442