前端组内开发技巧（xiaoxiaoxuan个人总结版）

我的博客原文

@author: 郭瑞峰

@createTime: 2023/10/09

@updateTime: 2023/10/10

恭喜大家顺利过完2023年所有假期，现在就准备好上班上到明年吧 /(ㄒoㄒ)/~~

对了，国庆回来后要过三个周一，兴奋不？？(反正我特难受) X﹏X

好了，不多说了，开始总结一下我板砖两年的经验教训吧

git 相关的

git 相关的什么拉分支、提交记录、更新分支、提交分支之类的原理或者操作都可以掘金掘到，我说多了没意义。

更何况很多操作可以通过可视化软件完成，比如说Fork、Sourcetree软件，或者 GitLens 插件。所以说这里介绍一些我开发时候遇到的其他情况所需要的其他指令。

rebase 合并多个提交记录

这里提到 合并多个提交记录 用于以下情况： 1、项目commit有严格记录 ，必须使用特定编号 2、当前开发任务被迫暂停 ，需要切换至其他分支 开发 3、当前功能/模块开发需要经过多个节点回溯

这里以第二个情况为例，介绍一下这个怎么操作(我最讨厌突然救火的行为了(╬▔皿▔)╯)。

~~第零步，被抓去救火~~
第一步，记录commit这个功能/模块/bug修复，不推远程

第二步，在代码暂停处 注释一行 开发进度、开发思路或者~~你的不满~~，再提交一个新的记录commit，建议以临时提交：开头：

第三步，回来继续开发，开发完成后提交记录commit，建议开头以临时提交：开发完成，注意这里必须把所有的文件提交了，如果有其他的代码不能提交在这里面，请以忽略文件或者其他文件提交

第四步，记录合并

先获取你第一次提交 记录前一个的ID

再在控制台输入git rebase -i <前一个记录的ID>，进入选择列表

按i进入编辑，将临时提交前面的pick改为s，按esc退出编辑，再输入:x或者:wq保存这里有确认修改内容，确认无误后输入:x或:wq保存

保存后，临时提交就合并在一个commit记录上了

及时清理已经合并的本地分支

已经合并的分支可以在开发主分支上看见合并记录，远程分支可以在合并时移除，但本地分支只有手动移除，记得及时清理对应的本地分支。

项目层级管理

不管是前端还是后端开发，代码层级结构管理会影响代码维护、二次开发和新人上手 ，这里介绍一下我自己总结到的层级管理，要是有更好的方法记得在评论区教我，谢谢啦。 (除了hooks和utils外里面全部都是vue组件，包括img目录，emmm，要不重构吧......)

客户端渲染工程文件管理

这里指的是传统意义上的后台系统或者说是"一个html完成所有功能"的项目统称。

公共组件规划一般是UI组件库进行二次开发，或是对使用率草果三成的功能组件进行导出，一般建议直接以/XXX.vue、/XXX.tsx、XXX/index.jsx方式管理，若是功能组件庞大，建议以目录名 + index方式管理，内部代码能导出就导出，导出原理也是以组件名或目录名 + index。

这里以我之前开发的公共搜索表单为例子，搜索表单每个类型的选项都是单独导出成目录名 + index，至于其他细节的代码，若体量很小就以组件名方式命名，体量大的依旧是目录名 + index方式管理。

路由对应的组件管理

一般都是用react-router/react-router-dom、vue-router注册后使用，所以说可以在注册的目录存放别的组件。

这里以角色管理页面为例，公共部分如权限树写在component里面(因为只有一个，所以说没加s)，其他的弹窗类操作全部导出成组件，若组件过于复杂如Create,Edit，一样以功能名称目录 + index方式管理。

服务端渲染工程文件管理

这里指的是以next/nuxt为例的服务端渲染工程文件，它与上述客户端渲染 不一样，src/pages是路由，所有路由必须写在src/pages，并且写在src/pages的组件都会默认生成以目录 + 文件名称的路由，所以说就不能像上面客户端那样管理路由组件

这边可以将components划分，比如说划分为atoms、molecules、organisms、hooks，前三个是组件层，最后一个是用于复用组件逻辑的代码层

atoms：只用于展示的最基础的组件，或者对UI组件库 进行二次封装 ，展示内容或二次封装过多时，一样使用目录名称 + index方式管理，atoms可以不设置index文件
molecules：多个atoms组合而成，用于生成自定义的公共组件，如公共搜索表单、echarts图表等
organisms：将molecules和atoms组合的更复杂的组件，用于实现pages所需的复杂组件，如弹窗表单组件、抽屉表单组件、门户展示组件等

可以看看我之前写的Vue2划分 atoms、molecules、organism(原子层、分子层、应用层/有机层)（欢迎大佬教我做人）

文件代码建议

组件

组件文件不易太大，最好能控制在 200 行内，太多会影响维护和二次开发。建议是能导出的方法就导出，能拆分组件就拆分，静态配置类的代码(如columns列配置)全部导出，再引入，再不济就写个函数，返回静态配置项。总之，一定要控制组件行数，便于阅读。

这是个反面例子，是个大佬写的拓扑图，能直接使用，但也只能使用，里面没有做任何的代码导出。像这样的代码不利于后续维护以及二次开发。

弹窗相关逻辑优化

一般自学网站或者其他的大佬建议将弹窗的内容导出，这个没毛病，但如果弹窗类东西多了的话，会让父组件臃肿起来，所以说我个人建议将弹窗和按钮导出成一个组件，减少父组件相关逻辑。

组件内就可以写弹窗类相关逻辑，例子在下面，可以参考一下。

vue2

html 复制代码

<template>
<!-- vue2 每个组件只能有一个根标签，且不能是空标签
     所以说就只能将弹窗套在按钮里面
-->
    <Button type="primary" @click={open}>
	  创建
	   <Modal title="创建" :visible="visible" @ok={close} @cancel={close}>
	     {{/* 这里面写弹窗内容 */}}
        </Modal>
	</Button>
</template>
<script>
import { Button, Modal } from 'ant-design-vue'

export default {
  name: 'CreateButton',
  components: { Button, Modal },
  data () {
    return: {
	  visible: false
	}
  },
  methods: {
    open: () => { this.visible = true }
    close: () => { this.visible = false }
  }
}
</script>

vue3

html 复制代码

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref<boolean>(false)
const open = () => { visible.value = true }
const close = () => { visible.value = false }
</script>
<template>
    <Button type="primary" @click={open}>
	  创建
	</Button>

	 <Modal title="创建" :open="visible" @ok={close} @cancel={close}>
	   {{/* 这里面写弹窗内容 */}}
     </Modal>
</template>

react

ts 复制代码

import React, { useState } from 'react'
import { Button, Modal } from 'antd'

export interface CreateButtonProps {}

const CreateButton: React.FC<CreateButtonProps> = (props) => {
  const [visible, setVisible] = useState<boolean>(false)
  const open = () => { setVisible(true) }
  const close = () => { setVisible(false) }
  return (<>
    <Button type="primary" onClick={open}>创建</Button>
	 <Modal title="创建" open={visible} onOk={close} onCancel={close}>
	 // 这里面写弹窗内容
      </Modal>
  </>)
}

CreateButton.displayName = 'CreateButton'
export default CreateButton