前端命名的一点建议

时间 2019-12-08

标签前端命名一点 1点建议繁體版

原文原文链接

1.前言

以前因为都是独立开发因此对前端命名不是很看重，命名过于随意，致使后期同事维护满脸怨言，不是不想好好命名无奈英语实在不好，多数中英文混搭命名，现整理一些常见命名的字段贴桌面供参考。css

（一）常见单词词汇

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体布局宽度：wrapper
左右中：leftright center
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情连接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合做伙伴：partner

(二)css注释的写法:

/内容区/ html

Html注释的写法：<!--header头部-- >

(三)id的命名:

(1)页面结构

容器:container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体布局宽度：wrapper
左右中：leftright center

(2)导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsideba
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能

标志：logo
广告：banner
登录：login
登陆条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合做伙伴：partner
友情连接：link
版权：copyright

class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red {color: red; }
.f60 { color: #f60;}
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’做为名称,如

.font12px{ font-size: 12px; }
.font9pt{font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left {float:left; }
.bottom {float:bottom; }

常见class关键词：

布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其余语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

(4)标题栏样式,使用’类别+功能’的方式命名,如

.barnews { }
.barproduct { }
主要的 master.css
模块module.css
基本共用base.css
布局，版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css

目录结构和文件命名规则

scss文件最好根据不一样页面分为common.scss和当前页面的scss文件，并将相同复用部分放入common.scss中前端

通用规范git

命名以小写英文单词命名，多个单词命名时如下划线分隔，尽可能不用缩写（除非是约定俗成或通用的缩写）github

项目命名npm

所有采用小写方式，如下划线分隔。例：my_project_name设计模式

CSS, SCSS文件命名浏览器

参照项目命名规则。例：retina_sprites.scssbash

HTML文件命名app

参照项目命名规则。例：error_report.html

二，js命名规范

变量命名

命名方法：小驼峰式命名

命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)

命名建议：尽可能在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

示例

// 好的命名方式 var minCount = 10;var tableTitle = 'tableTitle';
// 很差的命名方式 var setCount = 'setCount';var getTitle = 1111;
复制代码

函数命名

命名方法：小驼峰式命名法

命名规范：前缀应当为动词

命名建议：可以使用常见动词+函数所要表达含义的的名词组成（这个须要英语好，英语很差的同窗用百度翻译吧）

js常量命名

命名方法：名称所有大写

命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

示例

var MIN_COUNT = 10;var URL = 'http://www.baidu.com';
复制代码

三，常见文件夹命名

src，source 源代码，用src居多
test，tests 测试文件，也常常用__test__，facebook的测试框架jest默认的测试文件目录就是__test__
docs 文档
lib 库文件，library的缩写
dist 用来放打包编译后的文件，应该是distribution的缩写
build 构建脚本
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 核心文件

四， CODELF

最后推荐一个命名变量的神奇网站 CODELF 这个网站能够根据你输入的关键词，给出不少变量命名的推荐。而且支持中文。 CODELF