JS规范

1.HTML/CSS文件命名

确保文件命名总是以字母开头而不是数字，且字母一律小写，以驼峰格式命名，如：

<!-- HTML -->
fs.html
fsList.html
fsDetail.html
<!-- SASS -->
fs.scss
fsList.scss
fsDetail.scss

2.className命名

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “-” 连接

<!-- 这个是全站公用模块，祖先模块允许直接出现中线 -->
<div class="mod-info">
    <div class="mod-info-son"></div>
    <div class="mod-info-son"></div>
</div>

在jq或原生开发中，当某个className需要作为选择器使用时，className必须以‘js-’开头

<div class="mod-info js-click-box">
    <div class="mod-info-son"></div>
    <div class="mod-info-son"></div>
</div>

模块命名
全站公共模块：以 mod- 开头

<div class="mod-yours"></div>

业务公共模块：以 业务名-mod- 开头

<div class="paipai-mod-yours"></div>

3.ID的命名规范

当需要命名id时，下面事例是新增按钮的id命名

<div id="add-btn"></div>

4.className常用命名推荐

• about 关于
• account 账户
• arrow 箭头图标
• article 文章
• aside 边栏
• audio 音频
• avatar 头像
• bg,background 背景
• bar 栏（工具类）
• branding 品牌化
• crumb,breadcrumbs 面包屑
• btn,button 按钮
• caption 标题，说明
• category 分类
• chart 图表
• clearfix 清除浮动
• close 关闭
• col,column 列
• comment 评论
• community 社区
• container 容器
• content 内容
• copyright 版权
• current 当前态，选中态
• default 默认
• description 描述
• details 细节
• disabled 不可用
• entry 文章，博文
• error 错误
• even 偶数，常用于多行列表或表格中
• fail 失败（提示）
• feature 专题
• fewer 收起
• field 用于表单的输入区域
• figure 图
• filter 筛选
• first 第一个，常用于列表中
• footer 页脚
• forum 论坛
• gallery 画廊
• group 模块，清除浮动
• header 页头
• help 帮助
• hide 隐藏
• hightlight 高亮
• home 主页
• icon 图标
• info,information 信息
• last 最后一个，常用于列表中
• links 链接
• login 登录
• logout 退出
• logo 标志
• main 主体
• menu 菜单
• meta 作者、更新时间等信息栏，一般位于标题之下
• module 模块
• more 更多（展开）
• msg,message 消息
• nav,navigation 导航
• next 下一页
• nub 小块
• odd 奇数，常用于多行列表或表格中
• off 鼠标离开
• on 鼠标移过
• output 输出
• pagination 分页
• pop,popup 弹窗
• preview 预览
• previous 上一页
• primary 主要
• progress 进度条
• promotion 促销
• rcommd,recommendations 推荐
• reg,register 注册
• save 保存
• search 搜索
• secondary 次要
• section 区块
• selected 已选
• share 分享
• show 显示
• sidebar 边栏，侧栏
• slide 幻灯片，图片切换
• sort 排序
• sub 次级的，子级的
• submit 提交
• subscribe 订阅
• subtitle 副标题
• success 成功（提示）
• summary 摘要
• tab 标签页
• table 表格
• txt,text 文本
• thumbnail 缩略图
• time 时间
• tips 提示
• title 标题
• video 视频
• wrap 容器，包，一般用于最外层
• wrapper 容器，包，一般用于最外层

3. 图片命名

图片业务（可选） +（mod_）图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）

• 图片业务：
• pp_：拍拍
• wx_：微信
• sq_：手Q
• jd_：京东商城
• …

图片功能类别：

• mod_：是否公共，可选
• icon：模块类固化的图标
• logo：LOGO类
• spr：单页面各种元素合并集合
• btn：按钮
• bg：可平铺或者大背景
• …

图片模块名称：

• goodslist：商品列表
• goodsinfo：商品信息
• userava tar：用户头像
• …

图片精度：

• 普清：@1x
• Retina：@2x | @3x
• …

公共模块：
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 

非公共模块：
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png

4.js变量命名

引入的第三方库以——连接，自己本地的以驼峰式命名