如何定义命名相关格式?

命名相关格式

待命名对象推荐名称
图片 小写字母,‘-’或者‘_’ 分割
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 在新闻侧边栏的广告图片
posted @ 2018-09-28 11:21  心无引擎,眼无流派  阅读(366)  评论(0编辑  收藏  举报