@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