编码规范

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端页面规范

示例：

<!DOCTYPE html>
<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>

<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 
<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->
<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->
</head>
<body>
</body>
</html>
2.3 移动端页面规范

示例：

<!DOCTYPE html>
<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>

<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 
<!-- S 线上样式页面片，开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->
<!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->
</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有两种支持的取值</br>1—表示x</br>2—表示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"
                }
            })
        ])
    ])
}

未完待续

# 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue