马蜂窝的前端火了!遇到冲突不怕怼,强制提交就是干
相信大家都在世界杯期间有意无意地看到过马蜂窝的洗脑广告,短短的15秒,品牌名就出现了6次。“旅游之前,为什么要先上马蜂窝”,这些不断重复的广告词让人犹如魔咒般印象深刻。
正文开始前,先来回顾下这条病毒式广告:
有不了解的小伙伴可以上他们家的官网大概看下,马蜂窝,一家从事旅游行业的新锐互联网公司。
背景铺垫完毕之后,让我们进入今天的正题。
「 正文 」
最近马蜂窝移动端的某个线上页面出现了明显的BUG,截图在某技术社区疯传,献上页面截图供大家瞻仰一下:
前端圈里的潜规则就是,好事不出门,好玩事儿传千里。瞬间马蜂窝的前端在码农圈子里火了,爱凑热闹的程序猿们纷纷留言:
马蜂窝的前端老哥666,能跑起来也是牛逼
遇到冲突不怕怼,强制提交就是干!!!
请问贵公司还缺前端吗?我就喜欢这样自由任性的开发氛围~
人生不如意之事十之八九,合并分支往往也不是一帆风顺的
我写的代码不会有问题!报错根本不影响页面功能!ie 用户根本不用管!玛德,被开除了…
这要是搁我司,还不得被技术经理diss,一口盐汽水喷死我都是极有可能的!
领导的脑袋嗡嗡嗡...
......
其实仔细想想,发生在马蜂窝身上的这种bug在我们开发环境中很常见,并不稀奇。只要是在前端团队里呆过的码农都知道,这不就是提交代码合并分支发现冲突了,然而并没有解决就直接发布了么。
首先要想清楚一个问题,在类似马蜂窝的前端团队中,为什么git提交代码会出现冲突?
当两条分支对同一个文件的同一个文本块进行了不同的修改,并试图合并时,Git不能自动合并的,称之为冲突(conflict)。解决冲突需要人工处理。
那么让我来带领大家解读下上面截图中马蜂窝出现的bug事故分析:
<<<<<<<标记冲突开始,后面跟的是当前分支中的内容。
HEAD指向当前分支末梢的提交。
=======之后,>>>>>>>之前是要merge过来的另一条分支上的代码。
>>>>>>>之后的dev是该分支的名字。
对于简单的合并,手工编辑,然后去掉这些标记,最后像往常的提交一样先add再commit即可。
这其中就涉及到了公司前端团队协作开发的流程问题,以及git解决代码冲突的实际问题,让我们以马蜂窝的bug事故为引子,来继续深入聊聊团队协作的那些事儿。
「 git解决代码提交冲突 」
现在大部分一线互联网公司都是采用git作为公司内部版本迭代的工具,它可以敏捷高效地处理任何或小或大的项目,自然在前端团队日常协作开发的过程,出现代码提交冲突就很常见了,这也是很多刚入行的前端新人小白们在工作中经常会碰到的比较棘手的问题。
代码提交冲突一般分为两种,树冲突和内容冲突。
文件名修改造成的冲突,称为树冲突。
比如,A同事把文件改名为A.C,B同事把同一个文件改名为B.C,那么B同事将这两个commit合并时,会产生冲突。
如果最终确定用B同事的文件名,那么解决办法如下:
1git rm A.C
2
3git rm origin-name.C
4
5git add B.C
6
7git commit
如果最终确定用A同事的文件名,那么解决办法如下:
1git rm B.C
2
3git rm origin-name.C
4
5git add A.C
6
7git commit
总结一下:
当Git无法自动合并分支时,就必须首先解决冲突。解决冲突后,再提交,合并完成。
解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容,再提交。
用git log --graph
命令可以看到分支合并图。
「 前端协作流程 」
下面来说说我对前端协作流程的一点理解。
项目的可维护性第一。我们并不是一个人在做事,项目的维护和二次开发可能是直接或间接的团队合作。好的可维护性可以从四个方面获得:
代码的松藕合,高度模块化,将页面内的元素视为一个个模块,相互独立,尽量避免耦合过高的代码,从HTML,CSS,JavaScript三个层面考虑模块化。 良好的注释。 注意代码的弹性,在性能和弹性的选择上,一般情况下以弹性为优先考虑条件,在保证弹性的基础上,适当优化性能。 严格按照规范编写代码。
「 如何避免提交冲突 」
很多童鞋都把git当作个人代码备份工具,没有涉及多人提交代码到中央版本库。但是在多人使用时,不能简单地再延续原来个人使用时的习惯。如何提交才能避免版本冲突呢?
1. 首先在本地 clone 项目源码回来之后,只有一个默认分支master,不要直接在上面工作。
a.建立一个自己的分支,如取名working: git branch working
b.切换到这个新分支: git checkout working
c.现在可以自由修改代码并保存了。
2.确保你修改的代码都是自己负责项目下,或者说你的两次提交之间,没有其他人来改相同项目下的代码,如果不能避免,你就要在下面的merge步骤手工处理冲突了。
3.提交代码时按下面的步骤:(可以将下面的脚本保存在你的每个项目之下,每次只修改提交一个项目)
1git checkout working --force #确保使用的是工作分支
2git add .
3git commit -m"$1" -a #提交代码到本地,工作分支增加一个版本,这里的$1是运行脚本的第一个参数
4
5git checkout master
6git pull origin master #切换回默认分支,并将默认分支和中央最新版本合并
7git merge working #在本地合并你的这次修改到默认分支
8git push origin master #提交到中央版本库,接下来还是要切换回工作分支的
9git checkout working --force
- 对比cp和scp命令 将数据从一台linux服务器复制到另一台linux服务器
- laravel—用Migration的操作数据库
- 有货移动Web端性能优化探索实践
- webpack打包速度和性能再次优化
- MySQL 清除表空间碎片
- 解决ios不支持按钮:active伪类的方法
- HTTP-FLV直播初探
- BZOJ1058: [ZJOI2007]报表统计
- React数据流和组件间的通信总结
- react+redux+webpack教程4
- 洛谷P2391 白雪皑皑(并查集)
- BZOJ4514: [Sdoi2016]数字配对(费用流)
- 3.2数据结构之指针和链表 1748:约瑟夫问题
- 2017值得一瞥的JavaScript相关技术趋势
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP 正则表达式 获取富文本中的 img标签的src属性
- 浙大版《C语言程序设计(第3版)》题目集 习题2-2 阶梯电价
- 浙大版《C语言程序设计(第3版)》题目集 习题2-3 求平方与倒数序列的部分和
- 浙大版《C语言程序设计(第3版)》题目集 习题2-4 求交错序列前N项和
- 二十五块DIY 带屏幕可远程的温湿度传感器
- 浙大版《C语言程序设计(第3版)》题目集 习题2-5 求平方根序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 习题2-6 求阶乘序列前N项和
- 案例:ADG环境遇到redo日志member路径有误以及RMAN-6571错误
- 浙大版《C语言程序设计(第3版)》题目集 练习3-2 计算符号函数的值
- 浙大版《C语言程序设计(第3版)》题目集 练习3-3 统计学生平均成绩与及格人数
- 浙大版《C语言程序设计(第3版)》题目集 练习3-4 统计字符
- SQL 语句单引号、双引号的用法
- 浙大版《C语言程序设计(第3版)》题目集 练习3-5 输出闰年
- 浙大版《C语言程序设计(第3版)》题目集 练习3-7 成绩转换
- 浙大版《C语言程序设计(第3版)》题目集 练习3-8 查询水果价格