如何定义命名相关格式?
命名相关格式
待命名对象 | 推荐名称 |
---|---|
图片 | 小写字母,‘-’或者‘_’ 分割 |
css(class,id) | ‘-’ 分割 |
文件,变量 | 小驼峰命名 |
js类(class) | 大驼峰命名 |
常量 | 大写字母,‘_’ 分割 |
临时变量,私有变量 | ‘_’ 开头,驼峰命名 |
HTML命名
命名 HTML 命名之前,先说下布局的三个概念:模块( module )和元件( unit )。
模块:各种常见的网页内容模块,通常可以重复使用的较大的整体,比如导航、菜单、幻灯、图文列表等。命名前面建议带有 m-
元件:各种常见的网页内容元件,比如按钮、标题、输入框等。命名前面建议带有 u-
两者关系,模块包含元件,元件组成模块。
整个弹窗,当成一个模块。可以把标题,提示内容,按钮当做元件。
HTML 代码就如下,CSS , JS 代码就不贴了。模块就带 m- ,元件就带 u-
代码如下:
<div class="m-alert"> <div class="m-box"> <div class="m-box-inner"> <div class="u-title">提示2</div> <div class="u-content">这里是提示内容2</div> </div> <div class="m-box-buttons"> <span class="u-btn-success">确定</span> </div> </div> </div>
JavaScript命名
在js命名里面,应该只有四种命名方式:小驼峰(productList),大驼峰(ProductList),大写字符,下划线分割(PRODUCT_LIST),下划线开头+小驼峰(_productList)
1.按照类型命名
小驼峰:变量,函数一般而言都是使用小驼峰命名
大驼峰:关于class的命名规范,应该很多人都是习惯用大驼峰命名
常量:建议还是使用大写字符+下划线命名
私有变量:建议使用下划线开头+小驼峰命名方式
2.按职责命名
函数命名,一般都是动词开头。
获取值:如果函数是为了获取值(函数最后会返回一个值的),函数前面建议带有get
设置值:如果函数是为了设置值(函数最后会返回一个值的),函数执行就是为了给某一个变量赋值,函数前面建议带有set
处理动作:如果函数是为了处理一些操作,比如登录,注册,渲染列表等。那么就建议命名前面带有handle
目录,文件,图片命名
写法:统一小驼峰命名法
目录,文件 | 建议命名 |
---|---|
首页 | index,index.html |
搜索页面 | search,search.html |
产品列表 | productList,productList.html |
产品详细页面 | productDetail,productDetail.html |
新闻列表 | newslist,newslist.html |
新闻详细页面 | newsdetail,newsdetail.html |
评论列表 | commentList,commentList.html |
关于我们 | about,about.html |
图片命名规范
如果是通用性质的图片,例如LOGO,菜单,侧边栏,背景等,就直接使用小写字母命名。比如:logo.jpg ,menu.jpg,aside.jpg,bg.jpg。
如果不是通用的图片,就建议根据类别-模块-功能的格式。使用小写字母,‘-’或者‘_’分割
图片名称 | 意义 |
---|---|
btn-submit-comment.jpg | 提交评论的按钮 |
bg-product-list.jpg | 产品列表模块的背景 |
icon-views.png | 浏览数的图标 |
icon-btn-vote.png | 投票按钮 |
ad-news-aside.jpg | 在新闻侧边栏的广告图片 |