在公司Vue项目中使用的前端编码规范【仅供参考】

喜欢撸猫的帅伟
1,082 阅读3分钟

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

项目背景

  • 前端框架： Vue2全家桶
  • UI框架： Element

前端规范

  • 缩排 2 格（tab／空白）
  • 双引号/单引号(看个人习惯一般推荐单引号)
  • 大括号、分号都要写
  • 能换行就换行，一行不要拖太长
  • 路径用 @ 开头（从 /src 下开始算）不要写相对路径 ../../

命名

  • 驼峰（API 来的栏位可保留底线）
  • 尽量不简写（每个人习惯不同，可能会看不懂）
  • views/、components/ 档名大写开头：FileName.vue
  • （css）自定义的 class 可以命名为 项目名称-xxx 跟UI组件的 class 做区别
  • 变量名称尽量写清楚、标明意义，避免出现 data、payload、result... 通俗的单词
  • bool 用 isXxx、hasXxx、canXxx、shouldXxx
  • function 用动词＋名词（若用名词＋过去式动词，比较像在监听某件事已完成的状态） function举例:
  • fetch：从远端（API）获取资料
    ex：fetchCourses()
  • load：从本地端加载资料
    ex：loadLanguage()
  • calculate：计算后的结果
    ex：calculateScore()
  • show：显示物件
    ex：showModal()、showDialog()
  • get：（从 store）取资料
  • set：写资料（进 store）
  • create：创建资料
  • update：更新资料
  • edit：编辑资料
  • remove：将资料之间的关系移除，资料本身还是存在
  • delete／destroy：将资料删除
  • on：监听子层事件

范例档案

views/_ViewExample.vue
components/_ComponentsExample.vue

@/views/_ViewExample.vue 
<template>
  <div class="container"></div>
</template>

<script>
/*eslint-disable no-unused-vars */
import { mapState, mapGetters, mapActions } from "vuex";
/*eslint-enable */
export default {
  metaInfo() {
    return {
      title: ""
    };
  },

  components: {},

  mixins: [],

  props: [],
  
  data() {
    return {};
  },
  
  computed: {},
  
  watch: {},

  mounted() {},

  methods: {}
};
</script>

@/components/_ComponentsExample.vue
<template>
  <div>Component Example</div>
</template>

<script>
/*eslint-disable no-unused-vars */
import { mapState, mapGetters, mapActions } from "vuex";
/*eslint-enable */

export default {
  components: {},

  mixins: [],

  props: [],
  data() {
    return {};
  },
  computed: {},
  watch: {},

  mounted() {},

  methods: {}
};
</script>

<style scoped></style>

  • 新增档案时可复制粘贴这两个文件 保持 components、mixins、props、data… 这些属性顺序一致，维护时比较好找

  • style 一律加 scoped，样式只用于同一个 .vue 文件
    若要下全局 class，请放在 App.vue（这个不加 scoped）或 @import scss／css

其它

  • 判断式v-if尽量用肯定句

  • 判断式 v-if、显示与否 v-show、重要的属性 type等、逻辑相关、事件写前面，样式＆其他往后放，修改时比较好找

<el-menu :default-active="menuIndex" mode="horizontal" router>
  <el-menu-item
    v-for="(menu, index) in menuList"
    :key="index"
    :route="menu.route"
    :index="String(index + 1)"
    class="hidden-sm-and-down"
  >
    某某功能
  </el-menu-item>
  <el-menu-item v-if="isLogin" @click="logout" index="6">
    <el-button type="success" class="ivy-xxx xxx">
      登出
    </el-button>
  </el-menu-item>
</el-menu>
  • 切换路径给路径赋值name，不要写字串 "/xxx" ，页面跳转请使用name（路径可能会改、但 name 通常不太会变）
this.$router.push({
  name: "Home",
});

  • 资料初始化的时候，数字可以给 0、字串给 ""、数组给 []...（类型对应一下）

  • 表单资料可建一个 xxForm 把资料装好，以区分画面上其他资料

export default {
  data: {
    // xx表单资料
    xxForm: {
      name: "",
      account: "",
      password: "",
    },

    // 课程列表
    courseList: [],
    // 新闻列表
    newsList: [],
  },
};
  • 表单范例如下
    submit 可触发原生 HTML 的检查机制、多一层保障，当然我们还是要再详细 validate
    这样做就不用再特地绑 enter 事件（会走原生的机制但被拦截）
<el-form @submit.prevent.native="submit">
  <el-input v-model="form.name" required></el-input>
  <el-button native-type="submit">
    submit
  </el-button>
</el-form>

export default {
  data() {
    return {
      form: {
        name: "",
      },
    };
  },

  methods: {
    submit() {
      // validate
      // call API
    },
  },
};

  • if else 太多时改用 switch case

  • 非同步可使用 async／await 把程式码摊平

Git

commit 时可加个类别，让小伙伴有心理准备、知道要用什么观点来查看这个改动

以下仅供参考

  • feature: 新增／修改功能
feature: 登入页面＆功能串接
  • document: 文件、注解
document: 补充 README.md
  • fix: 修改小 bug
fix: 变量 name
  • adjust: 小调整（内部调整，修改后基本没差别）
  • refactor: 大调整（可能改动到接口）、重构、改善

Vuex

  • 尽量都加上 namespaced 拆干净
  • 按照 state、getters、mutations、actions 的顺序放，维护时比较好找
  • 只能透过 mutations 改变 state
  • 在 views 和 components 只能 dispatch actions、不要直接 commit mutations
  • 以 mapState/mapGetters/mapActions 取代 this.$store.state/return this.$store.getters/this.$store.dispatch
  • ...mapState/...mapGetters/...mapActions 写在 computed／methods 最前面，才不会没注意到

API 统一管理

放在 @/apis 下，可依据后端 controller 拆档

// 举例 user.js
import ApiService from "@/common/api.service";

export default {
  login(email, password) {
    return ApiService.post("login", {
      email,
      password,
    });
  },

  logout() {
    return ApiService.post("logout");
  },
};
  • 若使用在 vuex 的 actions 中（资料有共用的话）
// 举例 user.modules.js
import userApi from "@/apis/user";

const actions = {
  async logout({ commit }) {
    await userApi.logout();

    JwtService.destroyToken();

    commit("setToken", null);
  },
};
  • 若使用在一般 views 或 components 中 （独立资料可以放在 data 就好）
// 举例某个列表页
import xxxApi from "@/apis/xxx";

async mounted() {
  const res = await xxxApi.getList();

  this.list = res.data;
}

总结

在项目开始之前我们一定要和小伙伴们花时间整理出一份前端的代码规范, 这样小伙伴们看到彼此的代码就会一目了然，大大的提升了工作效率和减少了维护的成本，之后新来的小伙伴看到这份详细的编码规范，上手更快。
统一的代码规范是一个项目茁壮成长的基础，希望大家编写的项目都能长成参天大树，bug少少。
Thanks♪(･ω･)ﾉ

avatar
文章
阅读
粉丝