前端开发规范文档- 校招VIP

转载声明：文章来源：https://blog.csdn.net/PIOnly/article/details/122448515

一、命名规范
(一) 项目命名
全部采用小写的方式

以下划线分割

// 正确命名：
debug_system_front
 
// 错误命名：
debug-system-front
debugSystemFront

(二) 目录命名
全部采用小写的方式

以下划线命名
复数时，要采用复数结构

// 正确命名：
scripts / styles / utils / demo-scripts

(三) JS、CSS、SCSS、HTML、PNG等文件命名
全部采用小写的方式

以下划线命名

// 正确命名：
render_dom.js / signup.css / index.html / company_logo

(四) 组件命名首字母一定要大写，若无插槽传递子组件情况下建议单标签闭合

// 好例子
<MointorIcon
    :class="icon"
/>
 
// 反例
<mointorIcon
    :class="icon"
>
</mointorIcon>

(五) 命名严谨性
严禁使用拼音和中文混合的方式
严禁使用中文、中文拼音
正确使用英文拼写和语法
尽量使用英文单词，单词过长的时候可以使用简写
一些特殊的词语可以采用国际通用的名称
如：河南=henan / 人民币=rmb

// 正确命名：
movie(电影) / employee(员工)
 
// 错误命名：
dianyin(电影) condition --> condi (×)

二、HTML规范
(一) 缩进
推荐一个tab 使用四个空格，嵌套的节点应该缩进
推荐理由：编写有序，有层次感代码，给人一种一看就有阅读的兴趣，编写有层层递进感，还容易分清父子层以及排错

(二) 分块注释
在每一个块级元素，列表元素和表格元素中，加上一对HTML注释，注释格式

<!-- header 头部 start -->
 
<header>
 
    <div>
 
        <a href=""></a>
 
    </div>
 
</header>
 
<!-- header 头部 end -->

(三) 语义化标签
HTML5 有很多语义化标签，优先使用这些语义化标签，避免每一个页面都是 div或者 p

(四) 引号
使用双引号" " 而不是单引号''

// 好例子
<div id="test"></div>
 
// 反例
<div id='test'></div>

(五) 每个标签元素包含三个以上的属性需要换行编写
清晰直观表明每个标签包含的属性以及属性的value,也更加便于后期的维护。

// 好例子
<el-input
    type="text"
    placeholder="请输入"
    v-model="search_value"
    size="samall"
/>
 
// 反例
<el-input type="text" placeholder="请输入" v-model="search_value" size="samall" />

三、CSS 规范
(一) 命名
类名使用小写字母，以下划线或中横线分割，但一个文件使用同一种命名规范
.swiper_image { ... }
id 使用驼峰式命名
scss中的变量、函数、混合、placeholder采用驼峰命名
class 的命名不要使用标签名
如：.p .div

(二) 选择器
尽量使用直接子选择器，否则，有时会造成性能损耗

// 不推荐：
 
.content .title { ... }
 
// 推荐：
 
.content > .title { ... }

(三) 尽量使用缩写的属性
展开式属性写法并不会帮助我们清空所有相关其他属性，从而干扰到我们想要达到的效果

// 不推荐：
 
border-style: solid;
 
border-width: 1px;
 
border-color: red;
 
// 推荐：
 
border: 1px solid red;

(四) 每个选择器及属性独占一行
独占一行主要不利于git生成有效的 diff，不能快速使用快捷键注释

// 不推荐：
 
img {
 
    width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
 
}
 
// 推荐：
 
img {
 
    width: 100%;
 
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
 
}

(五) 省略 0 后面的单位
省略会减小CSS文件，对带宽优化有帮助。但特殊设备或适配多设备可以预留单位方便把握值的数量级

border-width: 0;

(六) 避免使用 ID 选择器及全局标签污染全局样式
页面中的该元素无法重用，id选择器样式权重更大导致为了要重载一个优先级很高的规则，必须给它设置添加再高的优先级（如! important）造成样式权重越来越高的恶性循环。能不用id选择器就不要使用id选择器，避免不是禁止

(七) 尽量避免写内联样式
内联样式只能作用于单个标签，不可重复使用造成过多的冗余代码，并且内联样式每次请求页面都会重新渲染，过多内联样式降低加载速度

// 好例子
<input 
    style="width:100px; height:100px"
/>
 
// 反例
<div style="width:100px; height:100px" >
    <input 
        style="width:100px; height:100px"
    />
</div>

四、LESS 规范
(一) 避免嵌套等级过多
将嵌套深度限制在 4 级，否则后代选择器会增加样式权重，造成样式权重越来越高的恶性循环

// 不推荐：
 
.main {
    .title {
        .name {
            color: #fff;
        }
    }
}
// 推荐：
.main-title {
    .name {
        color: #fff;
    }
}

五、Javascript规范
(一) 命名
1) 采用小写驼峰命名 lowerCameCase或下划线命名,但一个文件使用同一种命名规范，vue中建议统一使用驼峰式，因为在dom做赋值时比较友好，有意义的变量声明便于后期的维护
2) 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格

// 正确命名：
localValue / getHttpMessage()/ explain_close / explain_close()
 
// 错误命名：
localvalue / gethttpmessage()/ explainclose / explainclose()

3) 方法名必须是动词或者动词+名词形式

增删查改，统一使用如下 5 个单词

add / update / delete / get / detail

// 函数常用方法的动词：
 
get 获取       / set 设置        / add 增加       / remove 删除
 
create 创建    / destory 移除        / start 启动     / stop 停止
 
open 打开      / close 关闭        / read 读取      / write写入
 
load 载入      / save 保存        / begin 开始     / end 结束
 
backup 备份    / restore 恢复        / import 导入    / export 导出
 
split 分割     / merge 合并        / inject 注入    / extract 提取

4) 常量全部大写，单词之间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
例: const PIE = 3.141592653
5) 全局变量考虑用大写字母表示变量名

(二) 代码格式
使用四个空格进行缩进
不同逻辑，不同语义，不同业务之间插入一个空行分隔
表示区块起首的大括号，不要另起一行。

return {
    key : value
};

(三) 字符串
统一使用单引号''，不使用双引号""，这对创建HTML字符串非常有好处

let str = 'foo';
 
let testDiv = '<div id="test"></div>'

(四) 对象声明
使用字面量创建对象

// 推荐：
 
let user = [];
 
// 不推荐：
 
let user = new Object();

使用字面量来代替对象构建器

// 推荐：
 
let user = {
 
    age: 0
 
}
 
// 不推荐：
 
let user = new Object();
 
user.age = 0;

(五) 优先使用ES6、ES7、ES8的语法
简化程序，使代码更加灵活和可复用
1.let取代var，变量应该只在其声明的代码块内有效，var命令做不到这一点；var命令存在变量提升效用，let命令没有这个问题。let和const之间，建议优先使用const，const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化
2.使用数组成员对变量赋值时，优先使用解构赋值
3.使用扩展运算符（...）拷贝数组，可以替换concat方法，合并数组，与解构赋值结合生成数组
4.箭头函数，因为这样更简洁，而且绑定了this
5.模块语法

(六) 括号
下列关键词必须有大括号（即使代码只有一行）:if / else / for / while / try / catch / finally / with

// 推荐：
 
if (isTrue) {
 
    doSomeThing();
 
}
 
// 不推荐：
 
if (isTrue) doSomeThing();

(七) undefined判断
永远不要直接使用undefined进行变量判断；使用typeof 和字符串 'undefined'对变量进行判断

推荐：
 
if (typeof person === 'undefined') {
 
    ...
 
}
 
不推荐
 
if (person === undefined) {
 
    ...
 
}

空数组（[]）和空对象（{}）对应的布尔值，都是true。

(八) 条件判断和循环最多三层
条件判断能使用三目运算符和逻辑运算符的，就不要使用条件判断。
如果超过三层的，抽成函数，并写清楚注释

if(type == 1){
    // to do ...
} else if (type == 2) {
    // to do ...
} else if (type == 3) {
    // to do ...
} else if (type == 4) {
    // to do ...
}
// 过多条件判断建议改用switch方法，switch比if性能更好并且比较时使用是全等操作符，不会发生类型转换的损耗
switch(a) {
    case 1: ;break;
    case 2: ;break;
    case 3: ;break;
    case 4: ;break;
    case 5: ;break;
    default : ;
}
// 最好还是使用表查询，也就是通过数组和对象来查询
// 通过 map 映射
function getColor(c) {
    return {
        'blue': 'blue的rgba值',
        'block': 'block的rgba值',
        'yellow': 'yellow的rgba值',
        'green': 'green的rgba值',
    }[c]
}

(九) this的转换命名
对上下文 this的引用只能使用 _this, that，self来命名
let self = this;

(十) 慎用 console.log
对 console.log会有性能问题，生产环境下请清除console.log

(十一) 结构清晰
异步执行时采用promise, async awaite 方式.尽量不出现函数多层嵌套;
单一性:一个函数做一件事,保证结构清晰

(十二)可复用性
具有相同功能且样式一样或者功能样相同样式上有稍微不同的模块进行组件封装，达到组件复用效果。避免冗余代码，便于维护。

(十三) 以下划线区分接口函数与普通函数
推荐理由：调用的接口函数与普通函数作区分，后期便于维护

// 好例子
_getTableData() {
   getTableData().then(res=>{
       
   } 
}
 
// 反例
_getData() {
   getTableData().then(res=>{
       
   } 
}

(十四) 变量声明key与value值之间增加一个空格

// 好例子
data(){
    return {
        obj: {
            key: value,
        }
    }
}
 
// 反例
data(){
    return{
        obj:{
            key:value,
        }
    }
}

(十五) 文件分类管理
通用组件请放在components文件夹下，并且非全局使用的组件请按需引入，不要在main.js里面进行全局引入。便于区别组件与页面的管理，合理进行组件的封装以及重用，优化页面加载效率

(十六) main.js文件建议将全局通用的组件、样式、方法在这里引用，非全局的一律按需引入
推荐理由：优化加载效率，做到按需加载资源

六、VUE规范（官方风格指南文档https://cn.vuejs.org/v2/style-guide/）
（一）组件名为多单词，首字母大写
组件名应该始终是多个单词，根组件App以及<transition>、<component>之类的Vue内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

// 反例
Vue.component('todo', {
    // ...
})
export default {
    name: 'Todo',
    // ...
}
// 好例子
Vue.component('todo-item', {
    // ...
})
export default {
    name: 'TodoItem',
    // ...
}

（二）组件的data必须是个函数
当在组件中使用data property的时候（除了new Vue外的任何地方），它的值必须是返回一个对象的函数。因为如果直接是一个对象的话，子组件之间的属性值会互相影响。

// 反例
Vue.component('some-comp', {
    data: {
        foo: 'bar'
    }
})
export default {
    data: {
        foo: 'bar'
    }
}
// 好例子
Vue.component('some-comp', {
    data: function () {
        return {
            foo: 'bar'
        }
    }
})
// In a .vue file
export default {
    data () {
        return {
            foo: 'bar'
        }
    }
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
    data: {
        foo: 'bar'
    }
})

（三）prop的定义应该尽量详细，
至少需要指定其类型，这样容易看懂组件的用法，且在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

// 反例
// 这样做只有开发原型系统时可以接受
props: ['status']
// 好例子
props: {
    status: String
}
// 更好的做法！
props: {
    status: {
        type: String,
        required: true,
        validator: function (value) {
            return [
                'syncing',
                'synced',
                'version-conflict',
                'error'
            ].indexOf(value) !== -1
        }
    }
}

（四）总是使用key配合v-for
默认情况下，vue会尽可能的复用已存在的DOM元素，从而提高渲染性能，但会导致有状态的列表无法正确更新

// 反例
<ul>
    <li v-for="todo in todos">
        {{ todo.text }}
    </li>
</ul>
// 好例子
<ul>
    <li
        v-for="todo in todos"
        :key="todo.id"
    >
        {{ todo.text }}
    </li>
</ul>

（五）避免v-if和v-for同时用在同一元素上
哪怕我们只渲染出一小部分的元素，也得在每次重渲染的时候遍历整个列表，不论元素是否发生了变化

// 反例
<ul>
    <li
        v-for="user in users"
        v-if="user.isActive"
        :key="user.id"
    >
        {{ user.name }}
    </li>
</ul>
<ul>
    <li
        v-for="user in users"
        v-if="shouldShowUsers"
        :key="user.id"
    >
        {{ user.name }}
    </li>
</ul>
// 好例子
<ul>
    <li
        v-for="user in activeUsers"
        :key="user.id"
    >
        {{ user.name }}
    </li>
</ul>
<ul v-if="shouldShowUsers">
    <li
        v-for="user in users"
        :key="user.id"
    >
        {{ user.name }}
    </li>
</ul>

（六）每个页面或者组件的顶层父级需要添加一个唯一的类名，并为组件样式设置作用域

设置一致的作用域会确保你的样式只会运用在它们想要作用的组件上，避免造成样式的全局污染以及便于后期的维护。

// 反例
<style>
.btn-close {
    background-color: red;
}
</style>
 
// 好例子
<template>
    <div class="menu-header">
    </div>
</template>
<!-- 使用 `scoped` attribute -->
<style scoped>
    .button {}
</style>
<!-- 使用 CSS Modules -->
<template>
    <button :class="[$style.button]">X</button>
</template>
<style module>
    .button {}
</style>
<!-- 使用 BEM 约定 -->
<template>
    <button class="c-Button">X</button>
</template>
<style>
    .c-Button {}
</style>

（七）script 标签内部结构顺序

components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods