Loading... > @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(原子层、分子层、应用层/有机层)](https://kitaikuyo.one/index.php/archives/14/ "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 ```  最后修改：2024 年 11 月 27 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
1 条评论
对生命本质的追问充满哲学思辨。