实习总结

发表于 | 分类于 | 阅读次数:

实习总结

做下实习总结和知识的延伸。

对设计稿

PC端

一般来说，PC的设计稿在宽度上会有个安全距离，一般为1000px或1200px，这个宽度为最小宽度，且水平居中。

image.png

然后，再按功能模块划分，对设计稿进行分块布局，模块间的间距用margin撑开。

image.png

最后，在模块内再进行布局。

image.png

移动端

现在一般都是使用rem做移动端自适应。只写一套样式，适配所有移动设备。

2018-06-11更新：例子看这里：基于Vue移动端自适应方案与视网膜1px问题

在这里先讲思路，到时候再总结具体做法：

  1. 获取设备宽度width
  2. 跟据设备宽度设置rem的值（1rem=width/倍数），设置body的font-size即可，即font-size = width/倍数
  3. 设计稿上的px等比换算成rem

举个粗糙的例子。。

假设设计稿定稿的时候，给的宽度是375px，（一般为375px或750px），此时设置body的font-size = 375px/10，此时1rem=37.5px，设计稿给的各个宽度高度，都可以换算成rem。假设有个div宽度为37.5px，那么写的时候可以直接写成width:1rem。这样，在宽度为750px的设备上，这个div的实际宽度为75px，在视觉上达到等比缩放的效果。

现在有比较成熟的方案，就是淘宝使用的方案 :

使用Flexible实现手淘H5页面的终端适配

amfe/lib-flexible

vue-cli 配置flexible

使用媒体查询还是移动端、PC分开？

这个要根据设计稿根据场景而定。如果设计稿PC与移动端差距很大。。那么就直接写2套模板，复用逻辑就可以了。。在这种情况下最好不要试图只写一套模板，写出来的代码真的辣眼睛，没眼看。

Vue

基本使用没什么问题了。。包括element-ui、ivew的配套使用。基本使用没问题，但是还需要总结下原理性的东西。包括：

  • [ ] vue双向绑定原理

  • [ ] diff算法

  • [ ] vuex状态管理

javascript

主要是ES6，其实实习很大的一块目的是想多熟悉ES6语法的。但是其实写到的也不多，还是需要多看看ECMAScript 6 入门。

总结一个印象比较深刻的，async 函数

async 函数

当时的需求是这样子的，写一个电梯导航，但是电梯导航的条目是不确定的，因为组件的数据是后台配置的。一般来讲，电梯导航的思路是获取各个锚点的offsetTop值，然后给导航块增加点击事件就可以了，点击某个电梯块，获取到对应的offsetTop值，调用window.scrollTo(offsetTop)即可。

不过因为数据是配置的，所以思路要换一下，因为要先等后端返回数据，页面渲染完成之后，才能获取到电梯导航的各个条目的锚点。当时出现的情况就是后端返回数据未完成或者页面未完全渲染，就去获取各个锚点的offsetTop值，这样子会导致根本获取不到各个锚点的高，因为页面还没渲染。所以这种情况，思路应该是先获取数据、渲染页面、完成之前的操作之后再去获取各个锚点的高度。大致的代码如下：

1
2
3
4
5
6
7
8
9
//watch中检测到activityedData变化了，就执行下面的代码
watch:{
    activityedData: async function () {
        //先获取数据，渲染页面
        await this.setPageData(this.activityedData);
        //开始生成电梯导航
        await this.setPagePlace();
      },
}

关于async：async是Generator的语法糖。按我的理解，async可以将几个异步操作转化为“同步”状态。通俗一点就是下一个异步操作会等待上一个异步操作返回成功/失败之后，才会执行。相比generator，async有以下几个改进：

  1. 更加语义化：async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
  2. 内置执行器：并不需要手动调用next()函数出发下一个事件。
  3. 返回值是promise：async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

websocket

这个可以看之前做的总结：websocket使用与应用场景

html、css

html

video：这个可以看之前做的总结：H5与PC直播方案

css

css这块，实习阶段算是把基础补上来了，position各种都用过了，flexbox的骰子布局也会了。自适应三栏布局、两栏布局也搞懂了，不过是flexbox实现方式，现在flexbox兼容性做的挺好的了，但老式写法过阵子还是要学学。。什么双飞翼布局，圣杯布局的。。

想到什么再补

webpack使用总结

移动端1px

移动端点击300ms延时

优化加速：cnd加速、webpack压缩