修改前端代码的方法

2020-03-07 本文已影响0人前端人

工作中，大部分情况，我们都面临的不是重头开发一套系统，而是在已有系统上做修改。
那问题就是有什么好的思维方法去修改别人的代码。
我总结一下经验

1.第一步读懂别人的代码，读懂代码后记得写注释，要形成一个好习惯。
2.找到要修改的代码后，在功能未联调提测前，不要把别人的代码删除，最好只是注释掉。方便你需要的时候来参考。因为对于你删除的代码，可能隐藏了一些业务细节，而你没有注意到。接手新系统，最难理解的是别人的业务。可能产品经理都换了几批了，原有的业务细节随着相关人员流失，已经没有人知道了。所以要对老系统的原有代码保持敬畏。一旦以Bug的形式出行时，方便你注意到那些细节
3.添加代码，把自己要写的代码封装起来。可以简单的是一个函数封装起来，也可以是一个class封装起来，也可以搞成一个文件模块封装起来。封装的代码好处很多。容易追责，可以很容易判断是老代码问题，还是你加的代码问题。
很多人增加功能修改别人的代码时，更加喜欢的是在原有的函数里写代码，定义全局变量，就像搞成语接龙，最后一页的代码长达几千行，阅读性很差。

修改css的经验
很多人要修改在某个已有样式基础上要覆盖别人的样式，都是加! important，加Id. 这是不是太简单粗暴了。你这样覆盖后，后面的还如何覆盖。
例如

   <div id='head'></div>  
  <style>
  #head{
    color:red;
   }
 </style>

如果要覆盖color的样式，很多人可能是加内联样式来解决问题。其实这不是一个好主意。应该是改成

 <div id='head'></div>  
  <style>
  #head{
    color:red;
   }
 div#head{
 color:black;
   }
 </style>

这样就可以覆盖样式了。这要求大家了解样式权重的叠加规则。
现在简单总结一下
1.本地内联样式(<stlye></style>)大于导入样式（Link或@import）
2.样式选择符权重大小排序 !import>内联>id>(class,属性选择符，伪类)>(标签选择器 ,伪元素）>通配类型的选择器(*,结构选择，前面一个，子类，后代，邻居)
3.用户设置>创作者>浏览器自带样式

一般我们要掌握2就够了。另外记住权重是可以叠加的。

彩蛋一个

promise中finally的代码在then或catch的回到执行完成后才会执行。
微信小程序中，

 initConfirmOrder(params) {
return request
  .Post(xxx, params)
  .then(({ errcode, data }) => {
    wx.hideLoading({
      complete: function() {
        console.log('complete 被执行');
        console.log('complete 被执行');
        console.log('complete 被执行');
        console.log('complete 被执行');
      },
    }); 
  })
  .finally(function() {
    console.log('测试代码 finally被执行');
    console.log('测试代码 finally被执行');
    console.log('测试代码 finally被执行');
  });

}

这样的代码中 comlete里回调代码会在finally执行完成后才执行

原理我不太清晰，但是事实是这样。这样有时候可能产生一些你意料之外的Bug，请同胞们注意。

修改前端代码的方法

猜你喜欢

热点阅读