页面的命名规则
- 统一用翻译的英文命名（推荐）
- 统一用拼音命名（拼音的简化也可）
- 如果文件名过长，企业要提前约定一份缩写的规范，如pro—product
例如：
- 首页—index
- 产品列表—prolist产品详细页面—prodetail
- 新闻列表—newslist新闻详细页面—newsdetail
- 发展历史—history
- 关于我们—aboutus
- 联系我们—linkus，contactus
- 信息反馈—feedback留言—leavewords
熊猫办公https://www.wode007.com/sites/73654.html
图片命名规范
图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等
- 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命名参考表：
| CSS样式命名 | 说明 |
|---|---|
| 网页公共命名 | |
| #wrapper | 页面外围控制整体布局宽度 |
| #container或#content | 容器,用于最外层 |
| #layout | 布局 |
| #head, #header | 页头部分 |
| #foot, #footer | 页脚部分 |
| #nav | 主导航 |
| #subnav | 二级导航 |
| #menu | 菜单 |
| #submenu | 子菜单 |
| #sideBar | 侧栏 |
| #sidebar_a, #sidebar_b | 左边栏或右边栏 |
| #main | 页面主体 |
| #tag | 标签 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情连接 |
| #title | 标题 |
| #summary | 摘要 |
| #loginbar | 登录条 |
| #searchInput | 搜索输入框 |
| #hot | 热门热点 |
| #search | 搜索 |
| #search_output | 搜索输出和搜索结果相似 |
| #searchBar | 搜索条 |
| #search_results | 搜索结果 |
| #copyright | 版权信息 |
| #branding | 商标 |
| #logo | 网站LOGO标志 |
| #siteinfo | 网站信息 |
| #siteinfoLegal | 法律声明 |
| #siteinfoCredits | 信誉 |
| #joinus | 加入我们 |
| #partner | 合作伙伴 |
| #service | 服务 |
| #regsiter | 注册 |
| arr/arrow | 箭头 |
| #guild | 指南 |
| #sitemap | 网站地图 |
| #list | 列表 |
| #homepage | 首页 |
| #subpage | 二级页面子页面 |
| #tool, #toolbar | 工具条 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜单 |
| #status | 状态 |
| #scroll | 滚动 |
| .tab | 标签页 |
| .left .right .center | 居左、中、右 |
| .news | 新闻 |
| .download | 下载 |
| .banner | 广告条(顶部广告条) |
| 电子贸易相关 | |
| .products | 产品 |
| .products_prices | 产品价格 |
| .products_description | 产品描述 |
| .products_review | 产品评论 |
| .editor_review | 编辑评论 |
| .news_release | 最新产品 |
| .publisher | 生产商 |
| .screenshot | 缩略图 |
| .faqs | 常见问题 |
| .keyword | 关键词 |
| .blog | 博客 |
| .forum | 论坛 |
| CSS文件命名 | 说明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模块 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主题 |
| columns.css | 专栏 |
| font.css | 文字、字体 |
| forms.css | 表单 |
| mend.css | 补丁 |
| print.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
核心文件