web前端开发_文件/目录/样式/函数等命名规范

更新日期: 2018-02-26阅读: 5.7k标签: 命名

页面的命名规则

  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菜单
#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
    核心文件


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

这些 CSS 命名规范将省下你大把调试时间

CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具。尽管如此,CSS 写得越多,你越容易发现一个巨大的弊端。因为维护 CSS 真是老大难。

CSS命名规范_常用的CSS命名规则

CSS命名规范(规则)常用的CSS命名规则 ,注意事项:1.一律小写; 2.尽量用英文; 3.不加中横和下划线;  4.尽量不缩写,除非一看就明白的单词。 

JS的解析与执行过程—全局预处理阶段之命名冲突的处理策略

不论var f 与function f 的先后顺序如何,该代码执行的结果总是弹出function f 的字符串,为什么呢?像这种函数与变量命名冲突时JS的处理原则又是什么?

如何看待CSS中BEM的命名方式?

BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一种CSS Class命名方法。但至少他可以使我们命名的时候达到一定的统一,我们可以学习其优秀的方面将其纳为己用。

BEM的命名规范

CSS 的命名规范又叫做BEM规范,为的是结束混乱的命名方式,达到一个语义化的CSS命名方式。 BEM是三个单词的缩写:Block(块)代表更高级别的抽象或组件,Element(元素) Block的后代,以及Modifier(修饰) 不同状态的修饰符

常用的CSS命名规则

应该很多人都会有PO这种东西,但是对刚学CSS的人真的很重要,尤其像我这种英文不好的人,这些是必背的的单字喔^^,这些数据只是我在学习的时候,参考别人的数据之后用自己的思考整理出来的,像参考书写的真的都看不懂

是否需要重新命名 JavaScript?

最近,LinkedIn 的 JavaScript 组提出了一个有趣的问题:是否需要重新命名 JavaScript?众所周知,JavaScript 与 Java 无关。数十年来,这使非技术经理和招聘人员感到困惑。

前端BEM命名方式的思考

思考来源于要给切图网 qietu.com 改一次版,作为前端开发服务商,我觉得应该要有自己的一款前端CSS框架,并且这个框架不应该只是随便写写,最好能够用在官网上,拿官网做背书,于是在研究了火狐

大驼峰命名规则是什么?

大驼峰命名规则又称骆驼式命名法(Camel-Case),是电脑程式编写时的一套命名规则(惯例)。是指混合使用大小写字母来构成变量和函数的名字。

小驼峰命名规则是什么?

骆驼式命名法(Camel-Case)又称驼峰式命名法,是电脑程式编写时的一套命名规则(惯例)。正如它的名称CamelCase所表示的那样,是指混合使用大小写字母来构成变量和函数的名字。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!