web前端开发_⽂件⽬录样式函数等命名规范页⾯的命名规则
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命名参考表：
CSS样式命名说明
⽹页公共命名
#wrapper页⾯外围控制整体布局宽度
#container或#content容器,⽤于最外层
#layout布局
#head, #header页头部分
#foot, #footer页脚部分
#nav主导航
#subnav⼆级导航
#menu菜单
web前端开发技术第三版pdf
#submenu⼦菜单
#sideBar侧栏
#sidebar_a, #sidebar_b左边栏或右边栏
#main页⾯主体
#tag标签
#msg #message提⽰信息
#tips⼩技巧
#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
核⼼⽂件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。