前端规范提纲

前端

1. 模块目录结构说明

1. 模块根目录同项目mod文件夹同一目录
2. 划分components(页面组件)、plugins(插件)、styles(scss&css公用库)、templets(HTML模板库)四大块

结构说明

页面组件按功能划分：layouts(UI层组件库)、widgets(UE层组件库)、modules(业务逻辑组件库)。
UI层组件库：仅对常用的UI结构和布局做封装，可小(列表、表格)可大(整体可复用布局)，不涉及逻辑数据和交互处理；
UE层组件库：对交互逻辑的封装，类似交互插件；
业务逻辑组件库：对业务常用交互模块封装，如转盘、老虎机、猜大小等。

样式styles包含base、dev(work)文件夹，包含常用的布局模块的sass&css资源。

2. JS代码编码说明

编码格式

Javascript脚本文件编码格式统一使用UTF-8，使用Tab缩进，并且设置一个Tab符等于4个空格符。

声明

推荐使用var 及ES6的 const、let、class及结构赋值的方法声明常量/变量。

语句

1. 分号

'''每一语句或函数表达式都要加上分号，且每一条语句要换行，变量声明除外。'''

如果不加分号JS解释器也会按隐式分隔的标准去执行，但那样调试、压缩、合并的时候容易造成很多不必要的问题。
var method = function() {
    return 5;
}
(function() {
    // 一个匿名函数，在这里会被错误解析当作参数调用导致报错
})();
//这段程序执行时，浏览器会报错误提示："TypeError: number is not a function"

2. 大括号

1.推荐使用大括号跟在起首句的后面。
2.条件判断语句也最好添加{}，即便只有一条执行语句。

//不推荐
function method() 
{
    //code
}
//推荐的写法
function method() {
    //code...
}
if (a) b(); c();
//原意可能是:
if (a) {
    b();
    c();
}
//实际就会变成
if (a) {
    b();
}
c();

3. 字符串

单引号（'）比双引号（"）更好。

使用单引号（'）比双引号（"）更好，特别是当创建一个HTML代码的字符串时候：
var msg = '<div class="text">This is some HTML</div>';

JSON对象

规范定义JSON对象，需补全双引号，它可以避免在编码过程中出现不必须要的错误。

var data = {
    name: 'json' //不推荐的写法
};
var data2 = {
    "name": 'json' //推荐写法
};

注释

1. 类的注释

对功能和类型的描述，还有一些参数和原型描述等信息。

/**
 * 圆类.
 * @param {Number} x 圆的x轴坐标.
 * @param {Number} y 圆的y轴坐标.
 * @param {Number} r 圆的半径.
 * @constructor
 */
function Circle(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
}

2. 方法/函数的注释

应有参数和返回值的描述，且方法描述要以使用者的身份去写。

/**
 * 获取圆的面积
 * @return {Number} 圆面积的值
 */
function getArea() {
    return this.r * 2 * 3.14;
}

3. 属性、变量和常量的描述

/**
 * 圆周率常量
 * @type {Number}
 * @const
 */
var PI = Math.PI;
function Circle(x, y, r) {
    /* 圆的x轴坐标 */
    this.x = x;
    /* 圆的y轴坐标 */
    this.y = y;
    /* 圆的半径 */
    this.r = r;
}

3. 命名规范

命名原则
1. 任何人一目了然文件的意义和作用。
2. 有序。即当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
3. 尽量按照约定俗成的中英文名称命名。

1. 文件、资源命名

统一采用 小驼峰命名法 命名。
backbone框架活动css文件统一命名：appid.theme.css，杜绝添加版本号(及其特殊情况除外)。

2. CSS选择器命名

统一采用 小写字母+中划线/连接符 命名，并统一作为当前vue模板文件名作为命名空间的后代。如：get-round .banner{}

3. JS变量命名

1. 常量(const)全部字母大写，如： COPYRIGHT，PI 。
2. 变量(var/let)、json、函数使用 小驼峰命名法，使用英文字母、数字和下划线的组合
3. 函数名称命名建议采用：动词+名词(fGetData)、形容词+名词(fMainAnim)，意思明了，一目了然。
4. 对象/类名使用 大驼峰命名法。
5. juqery对象命名建议采用 $+小驼峰命名法，与dom对象区别开来，一目了然。

4. 中英文对照表

通用于：文件命名、css命名、js函数命名。

目录

组件/零件 component

部件 widget

模块 module

插件 plugin

工具 tool

样式 style

布局 layout

开发 develop/dev

正式/生产 production/prod

容器

头部/顶部 header

主容器/外框 container/wrapper

主内容区域/主体 content/main

内容容器 box

尾部/底部/页脚 footer

导航/导航栏 nav/navbar

标签 tab

子导航 subnav

菜单 menu

子菜单 submenu

侧栏/边导航 sidebar

左侧/右侧导航 leftsidebar/rightsidebar

栏目/竖栏 column

左/右/中栏 leftCol/rightCol/middleCol

列表 list

项目/子项目 item

面板 panel

组 group

信息

标志/头像 logo

图标 icon

图片 img/pic

缩略图 thumb

分割线 divider

广告通栏 banner

广告 ad

进度条 progress/progressbar

新闻 news/scrollNews

信息 info/scrollInfo

信息标签 label/tag

提示信息 msg/message

奖励 award

按钮 btn

规则/活动规则 rule

排行榜 rank

小技巧 tip

注释/备注 note

标题 title

子标题 subtitle

描述 desc/description

摘要 summary

胶囊 pill

热点 hotspot

版权 copyright

指南 guild

服务 service

默认 default

警告 warning

危险 danger

徽章/红点 badge

下载 download/dl

链接 link

组件/功能

登陆 login

注册 regsiter

登录条 loginbar

登陆框 loginWrap

搜索 search

搜索框 searchWrap

弹框 dialog

阴影 shadow

遮罩 mask

转盘 turntable

老虎机 slotmachine

猜大小 guesssize

动作

下拉 dropdown

上拉 dropup

弹出 popup

弹出浮层 popover

跳转 jumpto

滚动监听 scrollspy

切换 toggle

折叠 accordion

状态

状态 status

当前 current/cur

激活/选中/绑定 active/on

不可操作/解绑 disabled/off

高亮 light

灰质 grey

隐藏 hidden