2017.10.17~2018.4.28

为即将结束的盛大实习生活记录一下

记得刚来上海的时候内心充满了不安，担心学校学的知识够不够我来这边实际开发……事实证明确实是不够的，带着忐忑的心情就开始了实习&学习的生活

技术方面

1. 性能优化

记得来盛大的第二天，前辈给了我一个神无月活动页的psd，让我切出来。没接触过实际开发的我，到网上找设计稿上的字体，把奖励道具都一个个单独的切出来再用弹性布局完成布局。

当时也没有viewport的概念，只知道跟着之前别人做的代码把width设置成640。甚至没有给包裹页面的div加上overflow:hidden导致后面给页面的slogan加上动效，页面在初始化加载的时候发生抖动。

历经千辛万苦做完以后，没有把页面上传到服务器的我当时就傻了，又不敢问同事这个是怎么弄的，但想着这样下去不是办法呀，于是就尴尬的去问了同事，第一次把html,css，js文件传到svn，第一次把图片传到ftp上面，第一次在手机上打开自己做的页面。当时真的觉得成就感很大，然而之前自己给自己挖的坑这个时候也仿佛在对我说不要高兴的太早一样。

第二天把页面的链接发到了部门的讨论组里面，被前辈一句“性能太差，想办法优化”打趴了，说实话但是觉得特别委屈，做了三天的东西一下就被否了，但同时也发现自己做的页面实在性能太差，之前自己下的字体，一个就有2~3M，两个字体将近7M……这要是性能能好起来也算是奇谈了，一鼓作气，去问了同事关于性能问题，他告诉我静态的部分就不用单独切出来，而且字体文件太大，根本没有必要这样做。当时心情是复杂的，甚至有些烦躁，于是重新开了一个目录，全部从头开始做：静态部分用一张jpg代替，动态有交互的部分再单独切出来，能用css实现的效果尽量用css实现，用雪碧图处理小图标……反而这次的制作时间只花了一天不到的时间，带着复杂的心情再次把链接贴了上去……但是这次大家都给了我很好的评价。

我觉得努力就会成功，毕竟我也不是天才，我是地才。

2. jQuery提供的ajax方法以及swiper的使用

神无月活动页结束之后，一个礼拜都是闲来无事的状态，自己在网上找了很多css样式的东西自己来练练手，突然某一天前辈又传来两个psd，原来这是楼上的h5需求，被告知要求做上下翻页式的页面，到最后一页的时候点击按钮要弹出弹窗，用户输入信息实现预约功能……

当时整个人都惊了，后台交互什么的，完全不会呀！上下翻页倒是可以理解，做个上下滚动的轮播？？正当我迷茫中，同事安利给了我一个插件，这也是我目前用得最多的一个插件——swiper，妈妈再也不用担心轮播效果做得慢了：引个js，css，在js里面初始化一下就能用了！不要太方便，还可以定义划入的效果，略略看了一下他的api就开始用起来了，抱着最后再受死的心态，先把样式什么的写好吧，后台交互随缘吧哈哈（并不会）。

样式写好，老实去问接口怎么用，被嘲讽以后知道jquery（谁能想到我之前用的还是jquery mobile）有写好的函数，直接拿来用就是了，可是拿来用以后 报！错！了！五雷轰顶了简直，那时候已经早上七点多了，下班之前就要……马上求助同事，原来是楼上写的接口没有解决跨域问题，只需要把type改成jsonp就可以了（第一次确切接触到jsonp的使用，牛逼），终于在不懈努力下，又做完了一个h5。

3. rem

以前在学校，老师倒是讲过rem的好处，当时的想法是：还要用媒体查询来控制html的font-size也太麻烦了吧！直到我在网上看到一段根据页面宽度自动计算字体大小的js代码，新世界从此打开……

1rem的大小就是html上的font-size的大小，把自动计算根元素上的font-size的js文件--flexible.js放在最前面的位置，确保页面在刚开始加载样式之前就能将字体大小属性加到根元素上，同时，根据页面宽度的变化也能及时的改变根元素上的字体大小，所有的元素都是根据设备屏幕的大小等比缩放，浏览器对于rem的兼容性如下：

不同浏览器对于rem的兼容

可见，绝大部分的浏览器都对rem有良好的兼容，目前手机淘宝就是用的rem做单位来开发（跟着大佬的做法做肯定不会错是吧嘻嘻），不过最近也了解到了vm，vh的概念，后续会研究一下。

4. Vue

vue是作为个人兴趣学习的，接触下来发现框架还是好用啊，以下是我这段时间对于vue的理解：

4.1. 虚拟dom

vue将dom树以js的形式保存下来，当页面中的数据发生变动后，在js中找到相应变化的部分再映射到实际的dom树上，对真实的dom最小化的修改,提升了页面的性能。

4.2 组件复用

在vue中，可以编写组件，就目前的使用下来，我个人觉得组件复用节约了很多的时间啊。原来想要通过后台传来的数组来渲染列表，还要写一个个for循环，再添加到字符串里，再把字符串作为innerHTML塞到dom里面，而vue里面只需要在调用组件的时候使用vue自带的遍历指令--v-for，将组件所需的参数传过去就行了，以前冗余的代码现在只需要几行就能搞定了~每个组件也有自己的数据，组件的数据以函数的形式返回，在组件内也能定义组件的事件，十分方便。除此之外，组件之内还能放插槽，只要在模板内放进插槽，后续调用的时候把坑补上就行了（当然也能设置默认的值）。

4.3 路由

路由（Router）在vue中也发挥着至关重要的作用，虽然是后续跟着angular的英雄教程一步步做下来才粗略的了解到路由的作用...路由能够通过用户的点击自动跳转至不同的板块（通过控制不同板块的display），并且可以在跳转至不同模块的时候执行开场及离场动画，增加页面的交互性，之前神无月就有一个h5的小游戏，是同事用vue写的（我觉得做的还是很好的，星星眼~）。

5. .net写接口

那时候前辈是想让我往全栈方向走的，他一直用的都是.net，如果我也学.net的话，有不懂的也可以问他。我答应会了解一下的，没想到没过几天就有一个活动领取礼包的接口要让我来写。没接触过实际接口编写的我，再一次不淡定了。。。不过好在一些微信登录，调用用户id和头像的功能已经写好了，我要关注的主要就是一些逻辑的编写以及数据库的操作（还好以前在学校学过sql语句），这不禁让我松了一口气。中间也是有一些曲折，好在最后成功上线了。上线之后想着那些用户访问的页面接口是我写的就一阵暗爽（笑）。

6.three.js

接触threejs可以说是必然也可以说是巧合。说必然是因为刚到盛大的时候，前辈就给了我一本threejs的教程让我自己研究，然而我当时的心思都在于提升自己js,css的技能上了，直到当时的市场部门想要做一个类似于ar抽卡的h5页面，当时第一的想法就是用threejs来做3d的部分再加上webrtc调用手机的摄像头（只有安卓才能用……），所以就开始看官方的文档和之前的书了。接触下来感觉跟以前在学校学的opengl有些类似：都是场景，摄像机的概念。拜托美术部的同事导出人物的模型，发现全部都乱掉了，到后来尝试多种格式的模型，发现还是json格式的模型最好用。

总结

大的部分就是以上的内容了，剩下的就是关于代码管理的工具——svn的使用，在盛大实习的期间，设计的项目基本都是静态的，展示型的页面，即使是这样，对于刚刚参与实际开发的我也是一种很大的锻炼。昨天完成了学校的毕业答辩，填好了各种表格，跟老师同学一起吃了饭，和关系好的伙伴一起吃烧烤……一切大学中发生的事都历历在目……现在坐在北京回上海的高铁上，对于即将入职的新公司，即将面对的新同事，即将使用的新技术……都抱着期望的态度，希望自己能逐步提升，争取以后做大佬哈～