如何编写可维护、健壮的前端代码？——前端编码规范制定

最新推荐文章于 2023-05-26 15:49:02 发布

(´ꑣ｀)走啊，去学习

最新推荐文章于 2023-05-26 15:49:02 发布

阅读量185

点赞数

分类专栏：自学前端

原文链接：http://percywang.top/#/article/80

版权

自学前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文分享了一套Vue编码规范，强调了代码质量和可读性的重要性。推荐使用camelCase和大驼峰式命名，遵循BEM样式规范，合理利用vue组件通信方式，避免滥用vuex，使用严格相等运算符，以及优化v-for和v-if的使用。提倡使用scss预处理器并善用其特性，如变量、mixin和@extend。此外，建议详细说明函数参数，使用const代替var，以及按需加载组件以提高性能。

摘要由CSDN通过智能技术生成

前言

我认为代码不只是为了实现某个需求，更是给别的人看的。团队制定一个好的编码规范，能让大家更清晰的去理解代码。只有高质量的代码，才能有优化的可行性。更利于项目的版本迭代和拓展。前段时间为公司制定了编码规范，在这里分享一下

如果感觉文章对你有帮助的话，留个赞再走吧~
js（vue）写法推荐

变量和普通使用camelCase小驼峰式命名(tableData,isVisible)，构造函数使用大驼峰式命名

vue文件命名

对于展示类的、无逻辑的或无状态的基础组件可以单独放在一个文件夹中管理，和父组件紧密耦合的子组件应该以父组件名作为前缀命名。编辑器通常会按字母顺序组织文件，而自动补全让长命名的代价非常之低，尽量使组件命名完整。

components/
base
BaseButton.vue
BaseTable.vue
BaseIcon.vue
todoList
TodoList.vue
TodoListItem.vue
TodoListItemButton.vue
searchSidebar
SearchSidebar.vue
SearchSidebarNavigation.vue

函数式编程，通过语义就知道代码大概要干些什么。

// 获取年龄大于20学生的姓名
const students = [{
age: 21,
sex: 2,
name: ‘李小花’
},
{
age: 18,
sex: 1,
name: ‘李二蛋’
},
{
age: 22,
sex: 1,
name: ‘王强强’
},
]
// 推荐
let studentNames_1 = students.filter(student => student.age > 20).map(student => student.name)
// 不推荐
let studentNames_2 = []
for (let i = 0; i < students.length; i++) {
if (students[i].age > 20) {
newStudents.push(students[i].name)
}
}

最小函数准则，即一个函数只做一件事情。复用性强，拓展性高。

面向对象的思想。例如在对一张表的增删改查，而那个表就是一个对象。以及合理的运用解构赋值，阅读性强且效率更高(不推荐：row.name，row.price…)

let book = {
isAdd: false,
isModalShow: false,
name: “”,
count: 0,
price: 0,
}
function editBookModalShow(row) {
const { name, counts: count, salePrice: price} = row
book = {
isAdd: false,
isModalShow: true,
name,
count,
price,
}
}
editBookModalShow({
name: ‘红楼梦’,
counts: 42,
salePrice: 60
})

var，let和const的选择

var因为变量提升，重复定义等问题不推荐使用。而任何语言定义常量的开销总是比变量小的。所以，在不需要更改值的情况下只推荐使用const

props是子父组件传递数据的通道。数据的准确性可以说是尤为重要

// 推荐
props: {
type: {
type: String,
default: “primary”,
validator: value => [“primary”, “success”,“danger”].includes(value) // 甚至可以这样去限制参数值
},
size: {
type: String,
default: “large”
}
},
// 不推荐
props: [“size”,“type”]

如何设计一个组件这篇文章讲的非常好

组件通信及状态管理
    该怎么通信就怎么通信，千万不要去滥用vuex，甚至可以不用
    遵守单向数据流，不要使用parent，children

    子父组件：props emit 兄弟组件：eventBus 祖孙组件：provide / inject，attrs/$listeners
    多组件共享状态：vuex
    本地持久化：localStorage sessionStorage

v-for的key值

使用item的 id 来作为key值，而不是index。在数组插入中间值时会出现bug

永远不要把 v-if 和 v-for 同时用在同一个元素上

因为v-for 比 v-if 具有更高的优先级

<ul>
  <li>
    {{ user.name }}
  </li>
</ul>
// 将会经过如下运算：
this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})
// 这样会造成不必要的遍历 我们可以将users通过计算属性filter出avtiveUsers，再提供给v-for渲染

尽量不要使用watch

watch对性能的开销大，大部分情况computed是你更好的选择

websocket，webwoker，定时器等在不使用的时候记得关闭

除非迫不得已不要去操作DOM元素

按需加载（利用 import() 语法进行code splitting）

在不使用懒加载，不分离业务代码时。webpack会把所有的代码打包成一个文件。如果在进入首页时，这个文件过大，会极大的影响首屏加载速度。所以说，在生产环境中的code splitting是十分重要的，在对应的页面只加载需要的代码。分离业务代码和第三方库则需要进行webpack配置，而使用import语法在编码时可以注意

// router.js
{
path: ‘/404’,
component: () => import("@/views/404.vue"),
}
// 注册组件
components: {
TodoList: () => import("@/components/todoList/TodoList.vue")
TodoListItem: () => import("@/components/todoList/TodoListItem.vue"),
}

template中合理使用{{}}表达式

尽量在template只使用简单的表达式。我们只用关心模板中{{}}需要展示的东西，而数据是如何计算出来的可以写在computed和methods里。在使用el-table时这样去处理一些状态值的字段是不是更舒服呢

// 推荐写法
  orderStatus: {
      0: "待发货",
      1: "已发货",
      2: "货物中转"           // 也可以将这些状态统一放在一个文件，方便管理
    }

  <el-table-column prop="status" label="订单状态">
    <template slot-scope="{row}">{{orderStatus[row.status]}}</template>
  </el-table-column>

// 糟糕的写法
   <el-table-column prop="status" label="订单状态">
    <template slot-scope="{row}">
   	 {{row.status==='0'?'已发货':row.status==='1'?'待发货':''}}
    </template>
  </el-table-column>

使用严格等进行两数比较，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰

==：运算符称作相等，用来检测两个操作数是否相等，这里的相等定义的非常宽松，可以允许进行类型转换
===：用来检测两个操作数是否严格相等

尽量把函数的入参说明详细

/**

@param props.dateTable 模板数组
@param props.handleItemClick item点击事件
@param props.self 父组件作用域
*/
const RenderDateTemplate = (props) => {
const { dateTable, handleItemClick, self } = props;
return (

{
dateTable.map((item, index) => {}
}

)
}

样式写法推荐

为每个.vue文件加上scoped，避免污染全局

遵守BEM规范(即block-name__element-name–modifier-name)

但要注意block 嵌套的层次要尽量少（一个层次能搞完的就不要嵌套）.
各大组件库(Element AntDesign)的BEM实践，提供了很大的参考性

m-button__label, m-button__label–danger, m-button__label–success

在使用css预处理器，如scss。嵌套功能和父选择器标识符 & 解决BEM冗长问题

.m-button{
margin: 0px;
&__label{
font-size: 14px;
}
&–success{
background-color: #029627;
}
}

scss中变量 $ 使用

一些整个应用的会常用的颜色 大小 宽高 图片路径等，可以放在一个scss文件中定义。可以做到更改一处，从而进行全局更改，从而实现“换肤”的功能。

$color-primary: #3ecacb;
$color-success: #4fc48d;
$color-main: #f3d93f;

scss中巧用@mixin和@extend可复用一大段规则

@extend继承属性

.common-mod {
  height: 250px;  
  width: 50%;  
  background-color: #fff;  
  text-align: center;
}
&-mod { 
  @extend .common-mod;  
  float: right;
}
&-mod2 { 
  @extend .common-mod;
}

@mixin——可传递参数的继承

@mixin paneactive($image, $level, $vertical) { 
  background: url($image) no-repeat $level $vertical;  
  height: 100px;  
  width: 30px; 
  position: relative;  
  top: 50%;
}
&--left-active {  
  @include paneactive($btn-flip, 0, 0);
}
&--right-active { 
  @include paneactive($btn-flip, 0, -105px);
}

转载链接 http://percywang.top/#/article/80