前端编码规范

引言

“无规矩不成方圆”，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的图片

.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