前端项目一些规范（包括vue）
编码规范
1. css规范
1.1 代码缩进
使用4个空格作为一个缩进层级
示例：
.selector {
margin: 0;
padding: 0;
}1.2 选择器
当一个样式规则包含多个 selector 时，每个选择器必须独占一行
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}1.3 属性
属性定义必须另起一行
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }1.4 注释
示例：
/* good */
/* 注释 */
// 注释
/*
* 注释（注意简明扼要）
*/1.5 css及scss开发中注意事项
1.5.1 public文件里面用来存放项目中的公用样式或者公共变量
公共样式函数
示例：
绝对居中
@mixin vertical_center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
边框
&:after {
content: '';
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: #fff;
z-index: 1;
}
公共样式覆盖框架样式
示例：
/*
* 重定义按钮的样式
*/
.ivu-btn {
border-radius: 4px;
&.ivu-btn-small {
width: 40px;
}
&.ivu-btn-primary {
color: #fff;
background-color: $main_color;
border-color: $main_color;
width: 100px;
&.table_content{
width: 90px;
color: $main_color;
background-color: #fff;
border-color: $main_color;
&.selected{
color: #fff;
background-color: $table_tab_data;
border-color: $table_tab_data;
}
}
}
&.ivu-btn-ghost {
color: #fff;
background-color: $ivu-btn-ghost;
border-color: $ivu-btn-ghost;
width: 100px;
}
&.ivu-btn-info {
color: #fff;
background-color: $search;
border-color: $search;
width: 100%;
}
}
// 表示不同类的样式需要有空行
.ivu-table{
}公共样式变量
示例：
颜色变量
$ivu_btn_ghost: #999;
图片路径
$table_edit: "../../../assets/img/table_edit.png";
公共选择器所属样式
示例：
/*
* 位置
*/
.text-l {
text-align: left;
}
.text-r {
text-align: right;
}
.text-c {
text-align: center;
}
// 表示不同类的样式需要有空行
.p-l-5 {
padding-left: 5px;
}
// 表示不同类的样式需要有空行
.mt-2 {
margin-top: 2px;
}
.mr-20 {
margin-left: 20px;
}
.mb-10{
margin-bottom:10px;
}
/*
* 字体
*/
.ft-12 {
font-size: 12px;
}
.noStrong {
color: $font_noStrong
}
.strong {
color: $font_strong
}
1.5.2 不同模块的样式分成不同的文件编写
---菜单B（菜单B的样式）
---菜单B.1(都放菜单B文件夹下面)
---菜单A（菜单A的样式）
---side（侧边栏的样式）
2. html规范
2.1 注释
示例：
2.2 PC端页面规范
示例：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<meta name="format-detection" content="telephone=no" >
<title>移动端HTML模版title>
<link rel="dns-prefetch" href="">
<link rel="stylesheet" href="css/index.css" >
<link rel="stylesheet" href="http://srcPath/index.css" >
head>
<body>
body>
html>2.3 移动端页面规范
示例：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<meta name="format-detection" content="telephone=no" >
<title>移动端HTML模版title>
<link rel="dns-prefetch" href="">
<link rel="stylesheet" href="css/index.css" >
<link rel="stylesheet" href="http://srcPath/index.css" >
head>
<body>
body>
html>参考链接如下
fex-team
aoto-team
3. js规范
3.1 注释
函数注释
示例：
函数注释
/**
* @func
* @desc 一个带参数的函数
* @param {string} a - 参数a
* @param {number} b=1 - 参数b默认值为1
* @param {string} c=1 - 参数c有两种支持的取值1—表示x2—表示xx
* @param {object} d - 参数d为一个对象
* @param {string} d.e - 参数d的e属性
* @param {string} d.f - 参数d的f属性
* @param {object[]} g - 参数g为一个对象数组
* @param {string} g.h - 参数g数组中一项的h属性
* @param {string} g.i - 参数g数组中一项的i属性
* @param {string} [j] - 参数j是一个可选参数
*/
function foo(a, b, c, d, g, j) {
...
}
单行注释
示例：
// 注释内容
多行注释
示例：
/*
* 注释内容
* 注释内容
*/
3.2 命名规范
标准变量命名使用驼峰式命名
示例：
let thisIsMyName;常量全部大写，并使用下划线连接
示例：
const MAX_COUNT = 10;构造函数大写第一个字母
function Person(){
}jquery对象必须以’$’开头命名
// not good
var body = $('body');
// good
var $body = $('body');3.3 项目规范
变量声明尽量提在函数首部，用一个var声明，不允许出现连着的两个var声明(也包括let，const)
示例：
function doSomethingWithItems(items) {
// use one var
var value = 10,
result = value + 10,
i,
len;
for (i = 0, len = items.length; i < len; i++) {
result += 10;
}
}undefind使用规范（永远不要直接使用undefined进行变量判断，使用typeof和字符串’undefined’对变量进行判断。）
示例：
// not good
if (person === undefined) {
...
}
// good
if (typeof person === 'undefined') {
...
}用’===’和’!==’代替’==’, ‘!=’
示例：
// not good
if (a == 1) {
a++;
}
// good
if (a === 1) {
a++;
}请使用字面量值创建对象
示例：
// bad
const a = new Object{}
// good
const a = {}使用对象的方法的简写方式
示例：
// bad
const item = {
value: 1,
addValue: function (val) {
return item.value + val
}
}
// good
const item = {
value: 1,
addValue(val) {
return item.value + val
}
}使用对象的属性简写
示例：
const job = 'FrontEnd'
// bad
const item = {
job: job
}
// good
const item = {
job
}请使用字面量值创建数组
示例：
// bad
const items = new Array()
// good
const items = []使用拓展运算符 … 复制数组
示例：
// bad
const items = []
const itemsCopy = []
const len = items.length
let i
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i]
}
// good
itemsCopy = [...items]3.4 vue中项目规范
每个 vue 页面中的最外层template下面只能有一个标签
示例：
// error
<template>
<div>div>
<div>div>
template>
// right
<template>
<div>div>
template>vue返回上一个页面
示例：
如果用了vue-router的话，this.$router.go(-1)就可以回到上一页。history.go(-1)是回到浏览器上一页，但是由于Vue应用是单页应用，浏览器的访问历史未必和Vue的浏览历史相同。vue 通过路由跳转，传递查询内容
示例：
this.$router.push({
path: "/path",query:{query:queryThings}
})vue 接受路由跳转传递的参数
示例：
let query = this.$route.query.queryThings;click事件如果无法触发，尝试加上native，或者self修饰符
示例：
// 只当事件是从侦听器绑定的元素本身触发时才触发回调
@click.self="showBox"
// 监听组件根元素的原生事件
@click.native="showBox"动态添加一个class
示例：
:class="[MeauShrinkFlag ?'cpack_right':'cpack_right MeauShrink']"render使用
示例：
render: (h, params) => {
return h('div', [
h('span', {
attrs: {
class: "table_details"
},
on: {
click: () => {
this.edit(params.index)
}
}
},),
h('span', {
attrs: {
class: "table_continue"
},
on: {
click: () => {
this.show(params.index)
}
}
},),
h('span', {
attrs: {
class: "table_more no_border_right"
},
on: {
click: () => {
this.remove(params.row.id)
}
}
},),
h('Poptip', {
props: {
title:"项目变更",
content:"项目迁出",
placement:"bottom-end"
},
on: {
'on-ok': () => {
}
}
}, [
h('span', {
attrs: {
class: "table_more no_border_right"
}
})
])
])
}
未完待续