实习日记---构建一个可以自动伸缩高度的组件

一、先说感悟

        这是我实习中第一次做一个c端的项目，是在原有的旧项目上，添设一个页面来作为导入口，将用户引导进入旧项目的首页中，来完成导流进而用户裂变。

        首先，我必须说，我很感谢我的主管，他能给我这样一个机会，我真的很感谢，尤其是我这样一个转行（想知道什么行，可以私信我~~）自学前端，没有任何真正的互联网项目经验，在做这个项目之前，我来到公司也已经一个月，主管王哥（下面为了亲切点，老说主管有点生疏，hhh，就叫王哥~~）为了让我熟悉Vue（入职前，自学的是react，Vue没学过hhh~~~感觉现在回头看好丢人~~），并且明白git操作流程（对，你没看错，野生的程序员真的~~~不会），工作时的前后端交流，与设计和产品的沟通，等等，所以先让我做了后台的项目，也就是在原有项目上，自己一边熟悉流程，一边自学Vue，然后实操到项目上。

        还好也就是，我在找实习之前，自己用react照猫画虎写过一个权限管理系统，所幸的是让我接手的项目也差不多是一个后台管理项目，代码逻辑上还是比较清晰，就是不会Vue的语法，而且是给内部人员用的，所以可能在css样式上要求不高，用公司原有写好的Vue组件，花了一点时间，静下心来理解了各个参数的意义，参照其他用过这个组件的页面，虽然过程比较艰辛，但是还是完成了交给我的任务，我觉得那一个月我的成长真的是每天的肉眼可见~~~啊啊啊。

        在慢慢熟悉了公司的流程之后，以及一系列的铺垫之后，正好那段时间项目多，组里其他的大佬们腾不出手，王哥就安排我和另一位实习生，去做我今天要将讲的这个项目，说实话我当时还是挺激动的，毕竟是第一次做一个真正的项目，而且还是联合某国际大品牌的全国所有线下店一起做的活动，我当时一想，回去又能和女票、兄弟们吹一波了！！！，狂笑~~~skr~。

        第一次写CSDN，突然一看标题，淦，有点偏，赶紧回归主题！！！

二、设计的起因

        做任何事情，说实话，就是某个大聪明的那句，我从哪来，我到哪去。

        这句话对应到制作一个组件我觉得也就是两句话，你为啥要做这个组件，你要啥效果。

2.1、为啥设计这个组件

        第一，节省后续的时间成本，第二，代码可复用，提高协作效率，第三也可以减少一部分css中background-img的url请求。

2.1.1、 节省后续的时间成本

        这一点，我真的是后知后觉，我也是现在回想起来，才对组件化有了很深的感知，在设计之初，当然要自己想很多，dom的结构以及与Vue语法的结合，设不设置props来接受参数，进而通过js来控制组件的高度（说白了就是js来计算得出高度，这个后面详细来说，当时的设计思路与难处）等，所以当时做的时候，还是比较疑惑的，觉得自己和设计商量一下，让设计小姐姐切一张底图，虽然每一个页面，每一个状态的底图可能宽高不一致，但是比较给一个div，加上一组background-img，repeat，size也可以很好的解决，就是多写点css，但是王哥给了我很大的帮助与鼓励，让我去尝试写，一方面锻炼自己，一方面真的就是我后来在使用中才发现，真香。

        当我写好了这个Frame组件后，并且以这个frame为基础，扩展出了一个固定头部的组件以及一个可以使用者自己传入avatar的AvatarFrame。这一下，就是三个组件，并且由于与设计小姐姐的沟通，在统一一个基本的样式之后，这三个组件就已经全部覆盖了所有需要替换底图的新页面与旧页面，极大的节省与设计沟通的时间，降低了设计突然更换样式后，还需要全部换底图的风险与时间成本。

        这样的一个基本Frame框架，再依次为基础，发展出了可以放用户头像的AvatarFrame以及换了头部但是固定的SelectFrame等等Frame类组件，节省了大量时间。

        在后面的使用中，与我的小伙伴们，进行简单的沟通之后，就可以让使用者很快地上手，而不用为了一张张的底图去和设计商量，宽高等，很浪费时间，也很消耗效率和开发体验！！

2.1.2、 代码复用，提升效率

        对于我这样的一个新手来说，对于业务的不理解，对于原来代码的阅读的恐惧，还有就是比较拉跨的就是，毕竟其实也就是刚刚接触前端半年，Vue满打满算也就是一个月，所以编程的效率很低，而能够提前完成一个之后可以完全放心复用的组件，真的可以让你很放心，而且其他小伙伴在开发其他页面时，可以先跳过带有底图边框的部分，进行开发，等我做好以后直接放进去，也对于团队协作的效率有很大的提高。

2.1.3、 减少一部分css中background-img的url请求

        这个应该是我的粗鄙之见，前端优化，一直是一个热门的话题，减少url请求，就是其中优化的一部分，当时在工作中要的底图都是切好后，内部网站进行处理并且压缩后发给你一个url，你来请求它，如果，是多个不同url，浏览器就会多次请求，而如果是同一个Frame下的url都是一样，并且我们都知道get请求url，会缓存起来，如果相同的请求发生后，会直接走缓存，也算是意外的优化吧！！！

2.2、 组件的效果

<div class="container">
  <div class="header"></div>
  <div class="mid">
     <slot></slot> <!-- 这是放入需要底图内部内容 -->
  </div>
  <div class="down"></div>
</div>
// 这是Frame组件

<style lang="sass" scoped>
  .container {
    position: relative;
    .header {
      position: relative;
      padding-top: 22%;
      background-size: 100% 100%;
      background-image: url(//你的图片地址);
    }
    .mid {
      // 中间放置一px的线就好了，通过slot可以自动撑开
      position: relative;
      background-repeat: repeat-y;
      background-image: url(//你的图片地址);
      z-index: 2; // 这个是为了你插入的元素块设置 上下margin时 不被上下的dom盖住
    }
    .down {
      position: relative;
      padding-top: 22%;
      background-size: 100% 100%;
      background-image: url(//你的图片地址);
    }
  }
 // Frame的css
</style>

        在高度方面，我设计的是上图的dom结构，当Frame中传入一个大的div（里面放入你需要的结构），可以自动撑开这个Frame，原因是.mid的div没有设置height由其中的子元素撑开。当然，如果与设计小姐姐的沟通没有到位（~~~怕被打）或者是底图中的头部元素中必须包含一部分无法剪切的部分，导致传给你的header与footer的上底图与下底图的原始高度比较高也就是paddingTop的百分比要很大，会导致出现一种上底图与下底图的高度很高，就会显得很傻，这时候就可以给class为mid这个dom设置margin-top，margin-bottom为负值，来控制中间部分与上顶部、下底部的距离，如此基本上就可以实现高度的自动适应。而宽度，由于.container的width的default值为auto（没有设置border、padding、margin），也就是给这个Frame包一个div，并且设置其宽度就可以间接控制Frame组件的宽度！！！

        只要使用者把事先写好的一个div放入，就可以通过一个依据你的内容的height+你的内容的margin-top、bottom的负值或者（没有也可以，如果你的Frame组件的中header、footer的底图高度比例很合理，看着不怪）来控制你的高度。

        而宽度直接可以通过你的包裹的width来控制。

<div class="你的包裹">
  <Frame> <!-- 你的Frame -->
    <div class="你的内容"></div>
  </Frame>
</div>

三、最后

        感觉还是实习快乐啊，而且学东西就能用得上，就算是不会，也必须硬着头皮上，虽然这个过程你可能头皮发麻，四肢发冷，腰部发酸，但是做出来了之后的感觉还真是非常的好啊！不能再打字了，为了打字，总结，分享，女朋友的视频电话忘接了，估计一会，又不免一场王老师大课堂了！！！

        希望大家都可以快乐学习，快乐工作呀！！！加油！