规范文档
1:项目结构
- 项目大致统一结构--结构规范化
|————mangerName //项目名称
|————node_modules //项目依赖包（通过npm i 或者npm install安装）
|————src //项目文件
| |————api //与后端交互接口
| |————config //相关配置文件
| |————page //html页面文件
| |————assets //静态文件
| | |————js //js文件
| | |————css //css文件
| | |————img //图片
|————components //组件
|————plugins //插件
| |————loadsh //js处理数组的插件
|————utils //工具文件
| |————requset.js //requset请求方法的封装
| |————util.js //常用方法模块
| |————md5.js //md5加密方法
2:html
@2-1:语法
1：用两个空格来代替制表符（tab）
2：嵌套元素应当缩进一次（即两个空格）
3：对于属性的定义请使用单引号
4：不要省略可选的结束标签
@2-2：结构
- 合理的结构能够很好的快速了解项目的布局，有利于后期的维护。例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 头部容器 -->
<div class="top-box"></div>
<!-- 内容容器 -->
<div class="content-box">
<!-- 内容标题容器 -->
<h4 class="title-box"></h4>
<!-- 详细相关内容容器 -->
<div class="*-detail-box"></div>
</div>
<!-- 底部容器 -->
<div class="bottom-box"></div>
<!-- 合理的结构减少代码数量 -->
<!-- 错误 -->
<div class="avatar">
<img src="...">
</div>
<!-- 正确 -->
<img src="">
</body>
</html>
容器标签包含-box后缀标识容器标签
@2-3：属性顺序
1:class
2:id,name
3:data-*
4:src,for,type,href
5:title,alt
6:aria-*,role
例子：
<a class='...' id='...' data-modal='toggle' href='#'></a>
<input class='form-control' type='text'>
<img src='....' alt='...'>
@2-4：布尔型属性
H5布尔型属性可以不赋值
<input type='text' disabled>
<input type='checkbox' value='1' checked>
3:css
@3-1:语法
-
分类式命名法(在前端组件化下尤为重要)
- 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
- 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册等
- 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输 入框、loading等！
- 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
- 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）
- javascript(.j-)：.j-将被专用于JS获取节点，请勿使用.j-定义样式
不要使用 " _ " 下划线来命名css
能良好的区分javascript变量名
输入的时候少按一个shift键
-
浏览器兼容性问题（比如使用_tips的选择器命名，在IE6是无效的）
-
id采用驼峰式命名(不要乱用id)
-
相同语义的不同类命名方法：
- 直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
-
命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active） BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。
-
后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；
@3-2: 最佳写法
/* 这是某个模块 */
.m-nav{}/* 模块容器 */
.m-nav li,.m-nav a{}/* 先共性 优化组合 */
.m-nav li{}/* 后个性 语义化标签选择器 */
.m-nav a{}/* 后个性中的共性 按结构顺序 */
.m-nav a.a1{}/* 后个性中的个性 */
.m-nav a.a2{}/* 后个性中的个性 */
.m-nav .z-crt a{}/* 交互状态变化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型后代选择器 */
.m-nav .btn-1{}/* 典型后代选择器扩展 */
.m-nav .btn-dis{}/* 典型后代选择器扩展（状态） */
.m-nav .m-sch{}/* 控制内部其他模块位置 */
.m-nav .u-sel{}/* 控制内部其他元件位置 */
.m-nav-1{}/* 模块扩展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模块扩展（状态） */
@2-3: 最佳写法
- 布局(.g-)
| 语义 | 命名 | 简写 |
|---|---|---|
| 文档 | doc | doc |
| 头部 | head | hd |
| 主体 | body | bd |
| 尾部 | foot | ft |
| 主栏 | main | mn |
| 主栏子容器 | mainc | mnc |
| 侧栏 | side | sd |
| 侧栏子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
- 模块 (.m-)、元件(.u-)
| 语义 | 命名 | 简写 |
|---|---|---|
| 导航 | nav | nav |
| 子导航 | subnav | snav |
| 面包屑 | crumb | crm |
| 菜单 | menu | menu |
| 选项卡 | tab | tab |
| 标题区 | head/title | hd/tt |
| 内容区 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表单 | form | fm |
| 热点 | hot | hot |
| 排行 | top | top |
| 登录 | login | log |
| 标志 | logo | logo |
| 广告 | advertise | ad |
| 搜索 | search | sch |
| 幻灯 | slide | sld |
| 提示 | tips | tips |
| 帮助 | help | help |
| 新闻 | news | news |
| 下载 | download | dld |
| 注册 | regist | reg |
| 版权 | vcopyright | cprt |
| 投票 | vote | vote |
| 结果 | result | result |
| 标题 | title | tt |
| 按钮 | button | btn |
| 输入 | input | ipt |
- 功能(.f-)
| 语义 | 命名 | 简写 |
|---|---|---|
| 清除浮动 | clearboth | cb |
| 左浮动 | floatleft | fl |
| 内联 | inlineblock | ib |
| 文本居中 | textaligncenter | tac |
| 垂直居中 | verticalalignmiddle | vam |
| 溢出隐藏 | overflowhidden | oh |
| 完全消失 | displaynone | dn |
| 字体大小 | fontsize | fz |
| 字体粗细 | fontweight | fs |
- 皮肤(.s-)
| 语义 | 命名 | 简写 |
|---|---|---|
| 字体颜色 | fontcolor | fc |
| 背景颜色 | backgroundcolor | bgc |
| 边框颜色 | bordercolor | bdc |
- 状态(.z-)
| 语义 | 命名 | 简写 |
|---|---|---|
| 选中 | selected | sel |
| 当前 | current | crt |
| 显示 | show | show |
| 隐藏 | hide | hide |
| 打开 | open | open |
| 关闭 | close | close |
| 出错 | error | err |
| 不可用 | disabled | dis |
@3-4. 注意事项
- 一律小写，中划线
- 尽量不用缩写
- 不要随便使用id
- 去掉小数点前面的0： 0.9rem => .9rem 去掉小数点有浏览器兼容问题
- 使用简写：margin： 0 1rem 3rem
4:js
@4-1.变量
- 变量命名
- 变量语义化。
- 使用_连接。例如：time_obj
- 方法名：
- 接口方法使用_API_前缀
- 类方法名首字母大写
- 全局变量
1:少使用全局变量--避免变量污染- (待参考)变量以功能进行模块划分, 一个模块对应一个对象。例如：
let time_obj={
hour:0,
date:'2019-01-01'
}
let time_obj={
name:'一个例子',
listArray:[]
}
2：使用全局变量数组,不能更改原数组，应拷贝一份（适用一维数组）。例如：
多维使用深拷贝
//错误的写法
let test=[0,1,2,3]
let other=test;
//当变量other变化时，test数组会受影响
//正确的拷贝方法
//1:for 循环实现数组的深拷贝
let arr = [1,2,3,4,5]
let arr2 = copyArr(arr)
function copyArr(arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
res.push(arr[i])
}
return res
}
//2:slice 方法实现数组的拷贝
let arr = [1,2,3,4,5]
let arr2 = arr.slice(0)
//3:concat 方法实现数组的拷贝
let arr = [1,2,3,4,5]
let arr2 = arr.concat()
//4:ES6扩展运算符实现数组的拷贝
let arr = [1,2,3,4,5]
let [ ...arr2 ] = arr
3：使用全局变量对象,不能更改原对象，应拷贝一份（适用一维对象）。例如：
多维使用深拷贝
//错误的写法
let test = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
let other=test;
//当变量other变化时，test数组会受影响
//正确的拷贝方法
//1:for 循环实现对象的拷贝
let obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
let obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}
//2:转换成json再转换成对象实现对象的拷贝
let obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
let obj2 = JSON.parse(JSON.stringify(obj))
//3:扩展运算符实现对象的拷贝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var { ...obj2 } = obj
obj2.old = '22'
@4-2.常量
- 命名方法：名称全部大写。
- 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。
@4-3.类
类的成员包含：
① 公共属性和方法：跟变量和函数的命名一样。
② 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。
function Student(name) {
let _name = name; // 私有成员
// 公共方法
this.getName = function () {
return _name;
}
// 公共方式
this.setName = function (value) {
_name = value;
}
}
@4-3.注释
-
普通注释
以 /* 开头，*/ 结尾 -
函数方法注释
说明：函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求。语法：
/**
* 函数说明
* @关键字
*/
/**
* 合并Grid的行
* @param {Grid} grid 需要合并的Grid
* @param {Array} cols 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
* @param {Boolean} isAllSome 是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
* @return void
* @author polk6 2015/07/21
* @example
* _________________ _________________
* | 年龄 | 姓名 | | 年龄 | 姓名 |
* ----------------- mergeCells(grid,[0]) -----------------
* | 18 | 张三 | => | | 张三 |
* ----------------- - 18 ---------
* | 18 | 王五 | | | 王五 |
* ----------------- -----------------
*/
function mergeCells(grid, cols, isAllSome) {
// Do Something
}
常用注释关键字：(只列出一部分，并不是全部)
| 注释名 | 语法 | 含义 | 示例 |
|---|---|---|---|
| @param | @param 参数名 {参数类型} 描述信息 | 描述参数的信息 | @param name {String} 传入名称 |
| @return | @return {返回类型} 描述信息 | 描述返回值的信息 | @return {Boolean} true:可执行;false:不可执行 |
| @author | @author 作者信息 [附属信息：如邮箱、日期] | 描述此函数作者的信息 | @author 张三 2015/07/21 |
| @version | @version XX.XX.XX | 描述此函数的版本号 | @version 1.0.3 |
| @example | @example 示例代码 | 演示函数的使用 | @example setTitle('测试') |
网友评论