laravel改代码没变化_这外包代码写的真烂，这次坑惨我了！

说到外包的代码有多烂，突然想到之前自己做外包项目时候的代码有多烂。作为一个野生的前端工程师，做项目也没啥规范，所以当入职之后，发现之前自己写的代码一个字，烂。

要逻辑没逻辑，要规范没规范，bug 后期上线一大些，都是因为没有形成良好的代码规范造成的。而且之前代码团队更没有什么协作规范，基本一个项目五六种代码风格，想想就感觉好笑。

直到入职之后，突然老大让我改一个官网的 bug，如下：

上述问题就是我们公司官方网站在切换到移动端时出现闪烁问题，而且首页并没有做移动端的适配。

所以就开始定位问题解决bug，去仓库拉取代码，看看里边的逻辑是啥，是什么原因造成了这个问题，刚接触项目肯定是一头雾水的，一点点找吧。

开始读代码，找到问题了，是使用的第三方库的一个属性造成了移动端闪烁问题，只要删除这个属性就 OK。

因为问题就这么简单的解决了，就愉快了和老大说，问题解决了，删除一行属性就行了。

过了一会，老大过来说，你这不行，删除了一行代码，但是 PC 端又出现问题了，所以要搞一下兼容性问题。我整个人突然傻了，然后继续看代码，要做 PC 端和移动端的适配肯定要判断当前屏幕是移动端还是 PC 端喽，突然发现了这么一段代码。

CSS 样式如下：

我就感到很奇怪，这个 DIV 里边啥都没有，而且弄了个全屏的固定布局的样式，看到这发现，这个写代码的人是用判断固定布局 div 来做适配的。

明明可以判断窗口，为何写个这东西？我心想肯定是公司哪位大神些的，后来把这个问题和老大说了下，原来之前的官网是外包出去的，现在在自己进行重构。

我这才松了口气，这种东西只有外包公司干得出来的吧，因为当年我也干过这样的事，哈哈哈。

别慌，这还没有完，找到问题，轻轻松松改了通过判断窗口大小来适配。那么另一个问题又来了，移动端，横向滚动怎么也滚动不了。起初以为是首页的大屏第三方库插件导致的屏幕不能同时监听自动滚动和用户的触摸。

后来怎么改都不行，然后去问老大商量怎么解决，老大也跟着跳进了这个坑，其实不是第三方库的问题，还是那个 fixed 导致的不能直接横向滑动 body。

其实已经到了第二天了，才发现这个问题，原本这个项目不是我们自己公司写的，所以里边大体什么代码结构，排解问题也麻烦。行吧，只能删除掉了这段代码。

那么问题又来了，发现移动端又开始闪烁，不是删除掉了吗？适配 PC 窗口大小项目中引用了第三方库，我们一般用 window.onresize，项目中用了一个第三方库，监听的不是窗口，而是 dom（上边的 div），只要这个 div 在变化，就说明窗口动了，WC！这是什么套路，从来没见过呀。

这代码写的，让我产生了人生的大思考，为啥会闪烁呢，一开头说了，是第三方库的一个属性，但是在 PC 端我们要开启这个属性，移动端关闭这个属性。那么代码监听的是 dom，dom 变化，就会触发该函数，该函数其实又改变了这个属性，也改动了 dom，此时的 dom 又变了，造成了一个死循环。

秒啊，分析的很完美，此时已经是第二天下午了。发现用 clientWidth 监听窗口大小是不行的，因为那个第三方库的原因，导致了窗口移动端和 PC 端宽度和高度是在变化，而且不是真实的高度。

想到这我就明白了，当时写代码那个人为什么不用监听窗口大小变化来适配屏幕了，因为他获取不到真实的窗口宽高，所以才想出了此法子，造成了接二连三的问题。

后来想到了两种方法解决掉了这个问题，第一种是使用一个对于第三方库不影响窗口变化的 windows.outerWidth/outerHeight 来监听。另一种方法就是找到第三方库在获取真实窗口宽高之前就要存储当前窗口的真实宽高，那么肯定使用 Vue 中 nextTick 来解决。

回到家，做了下总结，终于知道当年为什么上线的项目总是不断的改 bug，而且越改越多，就是因为不规范性养成了不好的代码习惯，这一点之前始终没有注意到，所以这篇文章可以说是提醒了大家。

尽管你可能目前的工作代码不是非常的规范的，但是一定想办法让自己的代码规范起来，因为后期项目上线或者需求改动，你才不会吃亏，到时候你可以轻松的说，别人加班，让自己无班可加！

这个外包项目的代码，可坑惨我了，但同时给了我不少警示和收获