实习生活2

今天又是周末,又来根据自己的记忆记录一下前面的实习生活吧。

组件化

刚到公司的前面几天,我都是在学习公司的代码。我刚看到代码印象最深刻的就是:这组件化好彻底呀。他分有三种类型的组件:1.全局通用自己封装的组件,放置在src目录下。2.全局通用二次封装的组件,放置在src目录下。3.个别页面的通用组件,放置在改页面下的component中。

为什么会觉得组件化对我印象深刻呢。主要是因为自己在学校只有组件化,但是并没有太多的去使用,在课程设计上和同学一起完成的项目里面,有效果一样的东西,就是prop传入的值不同,如果当时也具有这种组件化那么彻底的想法,小组的成员就不需要写很多重复的东西。但是当时我们完全相当于自己写了很多类时的页面了。

在实习中,我们的UI设计图中,需要一样的展示界面,展示数据都一样,不一样的就是子元素的宽度和父元素的边距。在首页需要这个样式的宽度是有边距的,而在具体的页面中,这个展示是铺满整个宽度的。如果还是在学校的思想,我肯定会写两次。但是现在学习企业级的代码,我就会去用组件去解决,写一个公用的组件,prop传入宽度,边距这些不一样的值即可,此时,在首页和具体的展示页面就是两个样式,但是由于自己相对于学校提升的组件化思想,少写了很多重复性的代码。

全局样式

刚看代码的时候,还有很多的.scss文件,但是我刚开始并没有很重视这些文件,我觉得这就是一样样式文件,但是后面也认识到了全局样式的重要性。

刚开始我的任务就是修改一些版本迭代需要更改的样式,然后涉及到一些颜色问题,因为我的不重视,我就去figma中查找16进制颜色代码,我就直接用了这个16进制代码,后面提交代码的时候,导师就过来查看,他就和我说,你知不知道scss的是干啥的。我说知道,是定义一些全局通用样式的可以使用变量去定义样式,还可以进行选择器的迭代。然后导师又说那你这个颜色你这么写死,以后万一要改变不是要一个一个改,你看一下我们在.scss文件里面是不是定义了颜色的样式这样后面我们修改就很方便。然后导师又指导了一些知识。然后我把.scss文件看了一次,发现不知定义了颜色,字体这些,还有一些常用的布局比如flex的水平垂直居中,排列方向是交叉轴等等,定位有相对,绝对,固定等等。这样就更方便了,只需要在class中写上这个定义好的布局名字,用到的样式也不用每次都写上各种属性,更有利于开发了。

经过导师的指导,确实是我在学校里面虽然学习一些知识,也练习过一些demo,但是我确实还是太懂得去运用,所以实习是很重要的,更让人把学到的知识更好的运用。

样式问题

刚开始上手代码时候,就是让我修改一些样bug,还有一些新的迭代版本样式。
印象深刻一个是,在电脑端小程序开发者工具运行出来是正常的,不过测试他们测试的时候,他们发现了在手机端那个按钮是不居中的,然后我导师把修改的任务交给我了。刚开始我是没有头绪的,因为我也觉得奇怪,小程序开发者工具运行是居中的,在手机测试显示不正常,看了代码之后,他们之前写使用了定位去定位这个按钮。不过头像框和这个按钮都是以最外层的view的相对定位去定位的。我觉得应该是这样计算定位不太准确,然后我在头像框里面嵌套了一个view,这个view也会填满整个头像框,我把这个新的view作为按钮的定位点再去计算,这样能保证这个按钮始终在头像框正中间。
另一个是,结算时候的按钮,有三行金额,第二行为0时,结算的明目不对齐,他是把明目和金额放在一个view里面了。我把明目和金额分开就行,我也想了一下如果以前在学校我肯定会用浮动布局来弄成以右边展示,但是经过我前面的学习代码,发展基本都没有使用到浮动布局。使用了flex然后设置交叉轴方向就可以让他右边展示。越来越觉得flex永远的神,怪不得基本面试官都会提问flex布局的知识点。

对象的设置

测试检查出来,有一个界面外面是有这些信息的展示的,但是点击进去的时候,有某几个物品的具体信息没显示出来,我就开始检查,找到对应的组件,找到prop值,发展并没有在方法区找到这个请求后台数据的方法,也没看到vuex的使用,但是我看到了mixin,果然不出我所料,他把请求放在了mixin里面,然后,我打印请求的数据,得到的对象确实不是完全的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值