web前端开发基础知识教程文件/目录/样式/函数等命名规范_命名新手入门

页面的命名规则统一用翻译的英文命名(推荐)统一用拼音命名(拼音的简化也可)如果文件名过长,企业要提前约定一份缩写的规范,如pro—product例如:首页—index产品列表—prolist产品详细页面—prodetail新闻列表—newslist新闻详细页面—newsdetail发展历史—history关于我们—aboutus联系我们—linkus,con

web前端开发基础知识教程文件/目录/样式/函数等命名规范

页面的命名规则

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

例如:

web前端开发基础知识教程文件/目录/样式/函数等命名规范_命名新手入门

  • 首页—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菜单
#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
    核心文件

海计划公众号
(0)
上一篇 2020/04/05 01:56
下一篇 2020/04/05 01:56

您可能感兴趣的内容