引言
“无规矩不成方圆”,HTML、CSS、JavaScript作为前端开发的主要语言,也有一定的编码规范。本文参考了各个网站的编码规范,经过加工提炼,总结出了一套前端编码规范,规范的基本准则如下:
- 符合web标准,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保证最快的解析速度
- 项目的维护和二次开发可能是直接或间接的团队合作,所以创建易维护的代码是一个项目成功与否的关键,易维护的代码意味着具有如下特性:
- 阅读性好:如良好的注释和命名规范,有文档
- 具有一致性:看起来如同一个人编写
- 代码的松耦合,高度模块化:将页面内的元素视为一个个模块,相互独立,尽量避免耦合过高的代码,从html,css,js三个层面都要考虑模块化
html 规范
- img标签要写alt属性
<img src="user-head.jpg" alt="Bolynga Team">
- 单标签不要写闭合标签
<img src="test.jpg"><br>
<input type="email" value="">
- 自定义属性要以data-开头
<div data-count="5"></div>
- 使用section标签增强SEO
- html要保持简洁,不要套太多层
- 样式要写在head标签里
- 要在head标签靠前位置写上charset的meta标签
- 特殊符号使用html实体
©
- img空src的问题
<img src="about:blank" alt>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
- 不要在https的链接里写http的图片
<img src=”//static.chimeroi.com/hello-world.jpg”>
- 属性值必须用双引号包围
- 在 head 中引入页面需要的所有 CSS 资源
- JavaScript 应当放在页面末尾,或采用异步加载
- 有文本标题的控件必须使用 label 标签将其与其标题相关联
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
- 使用 button 元素时必须指明 type 属性值
- 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时,应当注意格式
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<video width="100" height="50" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="100" height="50" data="video.mp4">
<embed width="100" height="50" src="video.swf">
</object>
</video>
css 规范
- 文件名规范
文件名建议用小写字母加中横线的方式
- 属性书写顺序
布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float(包括clear)、position(相应的 top,right,bottom,left)、display、visibility、overflow等;自身属性主要包括: width &; height &; background &; border; 文本属性主要包括:font、color、text-align、text-decoration、text-indent等;其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等
- 类的命名应当使用它所表示的逻辑意义,如signup-success-toast、request-demo、agent-portrait、 company-logo等等
- 不要使用hack
- 选择器一般不要写超过3个
- 减少覆盖
- 少用!important
- 属性值规范
如果值是0,通常都不用带单位
色值用十六进制,少用rgb
- 不要设置太大的z-index
- 合并属性
.banner{
background: url(test.jpg) 0 0 no-repeat;
}
- 注意float/absolute/fixed定位会强制设置成block
- CSS动画规范
不要使用all属性做动画
使用transform替代position做动画
偏向于使用CSS动画替代JS动画
- 不要设置图标字体font-family
- 正确使用background和img
显示一张图片有两种方式,可以通过设置CSS的background-image,或者是使用img标签,究竟什么时候用哪种呢?
如果是头图等直接展示的图片还是要img标签,如果是做为背景图就使用background,因为使用img可以写个alt属性增强SEO,而背景图那种本身不需要SEO。虽然background有一个一个background-position: center center很好,但是头图那种还是使用img吧,自己去居中吧,不然做不了SEO。
- 响应式的规范
响应式开发最不好不要杂合使用rem,文字字号要么全部使用rem,要么不要用,也不要使用transform: scale去缩小,因为被缩小的字号看起来会有点奇怪,别人都是14px,而你变成了13.231px,小了一点。响应式的原则一般是保持中间或者两边间距不变,然后缩小主体内容的宽度。
- 少用absolute定位
- 适当使用:before/:after
- 少用inline-block布局
- 移动端提高可点区域范围
- 不要设置input的line-height
- 移动端弹框要禁止body滑动
因为IOS Safari切换输入框的时候会页面会弹闪得很厉害,因为你在切的时候它会先把键盘收起来,然后再弹出来,这个时间很短,给人感觉页面弹闪了一下,但如果把body禁止滑动了就不会有这个问题,这有两个解决办法,第一种是把body fixed住,第二种设置body overflow: hidden,相对来说第二种比较简单一点。IOS10完全不会闪,IOS9以下还是会闪。
- 对于渐变的处理
有时候UI里面会有一些渐变的效果,无法复制CSS出来,这个时候可以用一个在线的工具,生成渐变的CSS:www.cssmatic.com/gradient-ge…,但是这个需要自己手动调一个和UI一模一样的效果,或者可以直接给UI调一个它理想的效果,它会生成兼容性很强的CSS
- 行内元素可以直接设置margin-left/margin-right
js编码规范
- 变量命名
首字母小写,驼峰式命名,匈牙利命名
- 声明变量时要赋值
- 函数的返回值类型要确定
- 不要给变量赋值undefined
- 使用===代替==
- 不要让代码暴露在全局作用域下运行
- 使用箭头函数取代简单的函数
- 注意避免执行过长时间的JS代码
- 函数的注释
@namespace:这里用于命名包含以上对象的全局引用的名称
@class:这里有些命名不当,他实际意思是指对象或者构造函数
@method:定义对象中的方法和方法名
@param:列举函数所使用的参数。其中将参数类型用大括号括起来,并在其后注释参数名及描述。
@return:类似于@param,这里用于描述返回值的,并且该方法没有名称。
@constructor:表明这个“类”实际上是一个构造函数
@property和@type描述了对象的属性。
- 代码不要嵌套太深
- on事件之前需要的时候才off
- 对DOM节点较少的不要使用委托
- 对于常用的属性进行缓存
- 尽量不要在JS里面写CSS
- 在必要的地方添加非空判断
- 分号规范
- 使用location跳转需要先转义
let searchContent = encodeURIComponent(form.search.value.trim());
window.location.href = `/search?key=${searchContent}`;
- 不要直接使用localStorage
Data.hasLocalStorage = true;
try{
window.localStorage.trySetData = 1;
}catch(e){
Data.hasLocalStorage = false;
}
setLocalData: function(key, value){
if(Data.hasLocalStorage){
window.localStorage[key] = value;
}
else{
util.setCookie("_LOCAL_DATA_" + key, value, 1000);
}
},
getLocalData: function(key){
if(Data.hasLocalStorage){
return window.localStorage[key];
}
else{
return util.getCookie("_LOCAL_DATA_" + key);
}
}
- 使用简便的转换
把字符串转整型可以使用+号
把小数去掉尾数转成整型,可以使用 >> 0
转成boolean值用!!
- 使用Object.assgin简化数据赋值
- 调试完去掉无关的console
- 使用正则表达式做字符串处理
- 保持复用模块的观念
- 注意label事件会触发两次
- 在需要以{}闭合的代码段前增加换行,如:for if
- 使用Function进行类的定义,不推荐继承,如需继承采用成熟的类库实现继承
- 使用空格
在分开for循环的各个部分的分号之后:例如,for (var i = 0; i < 10; i +=1){…}
在for循环中初始化多个变量(i和最大值等):for (var i = 0, max = 10; i < max; i += 1){…}
在限定数组项的逗号后面:var a = [1, 2, 3];
对象属性的逗号之后和将属性名和属性值分开的冒号之后:var o = {a: 1, b: 2};
分隔开函数中各个参数的逗号之后:myFunc(a, b, c)
在函数声明的大括号之前:function myFunc() {}
在匿名函数表达式之后:var myFunc = function () {};
- 空格的另外一个很好的用途是用来分隔所有的操作符和操作,这也就是意味着在 +, -, *, =, <, >, <=, >=, ===, !==, &&, ||, += 等之后使用空格
//大量空格,并且使用一致,是的代码可读性更好
//允许在阅读的时候不用一口气读下去
var d = 0,
a = b +1;
if ( a && b && c) {
d = a % c;
a += d;
}
//反模式
//缺少空格或空格使用不一致,使得代码比较混乱
var d= 0;
a =b+1;
if (a&& b&& c) {
d=a %c;
a+= d;
}
文件
- 文件命名规则
图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如:广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名: banner标志性的图片取名为: logo在页面上位置不固定并且带有链接的小图片我们取名为 button 在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu 装饰用的照片我们取名: pic不带链接表示标题的图片我们取名: title 范例:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg鼠标感应效果图片命名规范为”图片名+_+on/off”。例如:menu1_on.gif menu1_off.gifc
- 文件存放位置规范
cn 存放中文HTML文件 en 存放英文HTML文件 flash 存放Flash文件 images 存放图片文件 imagestudio 存放PSD源文件 flashstudio 存放flash源文件 inc 存放include文件 library 存放DW库文件 media 存放多媒体文件 project 存放工程项目资料 temp 存放客户原始资料 js 存放JavaScript脚本
- 文件常用命名
命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right 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
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单: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/
-常用动词
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 聚集
参考文献
https://www.cnblogs.com/lvhw/p/7451351.html
https://blog.csdn.net/xllily_11/article/details/51249029
http://xuanfengge.com/fedoc/index.html
https://www.aliyun.com/jiaocheng/676792.html