2024年最新一篇文章，教你学会Git(2)，2024年最新前端页面嵌入第三方页面

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

| git add [dir] | 添加指定目录到暂存区，包括子目录 |

| git add [file1] | 添加指定文件到暂存区 |

commit

image

commit相关命令也很简单，主要实现将暂存区的内容提交到本地仓库，并使得当前分支的HEAD向后移动一个提交点。

| git commit -m [message] | 提交暂存区到本地仓库,message代表说明信息 |

| — | — |

| git commit [file1] -m [message] | 提交暂存区的指定文件到本地仓库 |

| git commit --amend -m [message] | 使用一次新的commit，替代上一次提交 |

branch

image

涉及到协作，自然会涉及到分支，关于分支，大概有展示分支，切换分支，创建分支，删除分支这四种操作。

| git branch | 列出所有本地分支 |

| — | — |

| git branch -r | 列出所有远程分支 |

| git branch -a | 列出所有本地分支和远程分支 |

| git branch [branch-name] | 新建一个分支，但依然停留在当前分支 |

| git checkout -b [branch-name] | 新建一个分支，并切换到该分支 |

| git branch --track [branch][remote-branch] | 新建一个分支，与指定的远程分支建立追踪关系 |

| git checkout [branch-name] | 切换到指定分支，并更新工作区 |

| git branch -d [branch-name] | 删除分支 |

| git push origin --delete [branch-name] | 删除远程分支 |

关于分支的操作虽然比较多，但都比较简单好记。

merge

image

merge命令把不同的分支合并起来。如上图，在实际开放中，我们可能从master分支中切出一个分支，然后进行开发完成需求，中间经过R3,R4,R5的commit记录，最后开发完成需要合入master中，这便用到了merge。

| git fetch [remote] | merge之前先拉一下远程仓库最新代码 |

| — | — |

| git merge [branch] | 合并指定分支到当前分支 |

一般在merge之后，会出现conflict，需要针对冲突情况，手动解除冲突。主要是因为两个用户修改了同一文件的同一块区域。如下图所示，需要手动解除。

image

rebase

image

rebase又称为衍合，是合并的另外一种选择。

在开始阶段，我们处于new分支上，执行git rebase dev，那么new分支上新的commit都在master分支上重演一遍，最后checkout切换回到new分支。这一点与merge是一样的，合并前后所处的分支并没有改变。git rebase dev，通俗的解释就是new分支想站在dev的肩膀上继续下去。rebase也需要手动解决冲突。

rebase与merge的区别

现在我们有这样的两个分支,test和master，提交如下：

D—E test

/

A—B—C—F master复制代码

在master执行git merge test,然后会得到如下结果：

D--------E

/ \

A—B—C—F----G test, master复制代码

在master执行git rebase test，然后得到如下结果：

A—B—D—E—C’—F’ test, master复制代码

可以看到，merge操作会生成一个新的节点，之前的提交分开显示。而rebase操作不会生成新的节点，是将两个分支融合成一个线性的提交。

如果你想要一个干净的，没有merge commit的线性历史树，那么你应该选择git rebase

如果你想保留完整的历史记录，并且想要避免重写commit history的风险，你应该选择使用git merge

reset

image

reset命令把当前分支指向另一个位置，并且相应的变动工作区和暂存区。

| git reset —soft [commit] | 只改变提交点，暂存区和工作目录的内容都不改变 |

| — | — |

| git reset —mixed [commit] | 改变提交点，同时改变暂存区的内容 |

| git reset —hard [commit] | 暂存区、工作区的内容都会被修改到与提交点完全一致的状态 |

| git reset --hard HEAD | 让工作区回到上次提交时的状态 |

revert

image

git revert用一个新提交来消除一个历史提交所做的任何修改。

revert与reset的区别

image

• git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit。

• 在回滚这一操作上看，效果差不多。但是在日后继续merge以前的老版本时有区别。因为git revert是用一次逆向的commit“中和”之前的提交，因此日后合并老的branch时，导致这部分改变不会再次出现，减少冲突。但是git reset是之间把某些commit在某个branch上删除，因而和老的branch再次merge时，这些被回滚的commit应该还会被引入，产生很多冲突。关于这一点，不太理解的可以看这篇文章。

• git reset 是把HEAD向后移动了一下，而git revert是HEAD继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容。

push

上传本地仓库分支到远程仓库分支，实现同步。

| git push [remote][branch] | 上传本地指定分支到远程仓库 |

| — | — |

| git push [remote] --force | 强行推送当前分支到远程仓库，即使有冲突 |

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-6BtulPAY-1715723090361)]

前端视频资料：
[外链图片转存中…(img-RnOqMEgU-1715723090361)]