自我介绍

面试官您好，我是吴思慧，来自北京邮电大学，是计算机科学与技术专业应届生。我刚进入大学就参与到了项目开发团队，活跃在各大创新创业比赛中。我对前端充满热情，较为熟悉Vue框架，但是同时也意识到框架和封装语言带来的便捷性使得自己对底层实现较为生疏，于是近期在恶补有关JS的细节知识，从ES5开始进行一点一点的积累并且通过各类网站学习收集一些博文知识。可能这样大面积撒网查漏补缺的效率还是有些低下一些细节可能记不大清楚，但有句古话叫人生在勤,不索何获，相信进行不断的梳理巩固再加上阅读量和知识储备量的拓展，不熟悉会变成有印象会变成得心应手，我正朝着这个阶段不断努力。我个人兴趣爱好比较广泛，平时喜欢看书看动画，做MMD动画，以及动效设计，重拾底层以后近期开始用JS原生语言进行动效实现。

项目经历

键盘音乐派对

这是我参与的第一个项目，我们的定位目标是做一个PC端，使用键盘就可以自由创作音乐的软件。我在项目中主要负责图形化界面设计和实现、功能设计、代码模块化管理。

JFUGUE库

JFugue一个用于音乐制作的Java API。利用JFugue来制作音乐不需要涉及复杂的MIDI。

MIDI是英语Music Instrument Digital Interface 的缩写，翻译过来就是“数字化乐器接口”，也就是说它的真正涵义是一个供不同设备进行信号传输的接口的名称。

jfugue里用MusicString来表示曲谱。
CDEFGAB分别代表：哆来咪发索拉西
R代表 ：休止符
sharp 升音符  用#表示
flat 降音符  用b表示
duration 音长
whole    w
half    h
quarter    q
eighth    i
sixteenth    s
thirty-second    t
sixty-fourth    x
one-twenty-eighth    o

Pattern的运用
Pattern其实就是为了避免重复的乐谱复制粘贴，《两只老虎》里面每段乐谱都重复2遍。所以用了4个Pattern来简化代码。

MIDI定义了128种乐器，用来表现不同的音色。要使用乐器，在MusicString里用I[]表示,其中中括号中是乐器的号码，它是从0开始编号的，所以是0~127

Player player = new Player();
//两只老虎
Pattern pattern1 = new Pattern("I[40] C5q D5q E5q C5q");//数字是音阶
//跑得快
Pattern pattern2 = new Pattern("E5q F5q G5h");
//一只没有眼睛
Pattern pattern3 = new Pattern("G5i A5i G5i F5i E5q C5q");
//真奇怪
Pattern pattern4 = new Pattern("C5q G4q C5h");

// Put all of the patters together to form the song
Pattern song = new Pattern();
song.add(pattern1, 2); // Adds 'pattern1' to 'song' twice
song.add(pattern2, 2); // Adds 'pattern2' to 'song' twice
song.add(pattern3, 2); // Adds 'pattern3' to 'song' twice
song.add(pattern4, 2); // Adds 'pattern4' to 'song' twice

// Play the song!
player.play(song);

图形化

在图形化上运用到了JFrame、JPanel、JLabel进行绘制。
JFrame是一个顶层的框架类，好比一个窗户的框子。也是一个容器类。这个框子可以嵌入几个玻璃窗。

JPanel是一个容器类，相当于一大玻璃窗。

JLabel等是一些基础组件，它必须置于某个容器里，类似于窗花、剪纸，必须置于窗户的表面。

JFrame自带了一个玻璃窗。可以通过语句　Container c=getContentPane(); 获得该内容窗格。

也可以定制一个新的玻璃面板替换原来的自带的玻璃窗,代码如下：

JPanel jp=new JPanel();

this.setContentPane(jp);

JFrame

java的GUI程序的基本思路是以JFrame为基础，它是屏幕上window的对象，能够最大化、最小化、关闭。

他们都是 Java图形用户界面(GUI)工具包swing中的面板容器类，包含在javax.swing 包中。Swing 的三个基本构造块：标签、按钮和文本字段；但是需要个地方安放它们，并希望用户知道如何处理它们。JFrame 类就是解决这个问题的——它是一个容器，允许程序员把其他组件添加到它里面，把它们组织起来，并把它们呈现给用户。

项目难点

那时候我们并没有框架化结构化的相关概念，全部是利用原生JAVA进行实现，也缺乏前后端分离的概念，一开始只是对功能进行分工，而没有一个统一的接口路径。基于后期代码越发庞大的问题，我提出重构代码的方案，将音乐区调用模块、键盘响应模块、图形化模块、编码转换模块进行拆分，而不是针对某次键盘输入就进行转换输出。同时对连续键盘输入进行节流处理，保证程序的稳定性。

在作品基本成型时，我们遇到了性能问题，这个软件太过于消耗内存。我向团队提出了几个优化方法，譬如在Java中，程序员需要通过关键字new为每个对象申请内存空间 (基本类型除外)，所有的对象都在堆 (Heap)中分配空间。应该封装监控每一个对象的运行状态，包括对象的申请、引用、被引用、赋值等。当该对象不再被引用时，释放对象。

项目收获

在这个项目中我最大的收获便是对效率进程掌控的认识，我们的项目最终是在大一的雏燕比赛中获得了全校第一名的成绩，一个重要原因是我们组是唯一一组达成了所有预期指标的team，我们完成了所有预期功能实现（录谱、键盘设计、***设计等）、包括一个功能展示网站，结合mysql做了一个简易论坛。饼画得再大也得实现才行啊。

另一个收获便是图形化界面的兴趣，我在排版实现键盘界面的时候被这种图形、代码、数据绑定的玩意儿吸引了，后面也由网站开始接触逐步接触、了解前端js语言。

智游北邮新生导览项目

这是我加入蓝图创新工作室，承接校方需求的一个项目。作为当年新生导览项目中的一环。项目是开发一个导览程序，可以在小程序上看到校园介绍、地标介绍、地图指引等。我在项目中负责校方需求对接、功能设计、小程序界面设计及实现。

mpVue

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，使其可以运行在小程序环境中，支持vue的语法。

关于微信小程序这块从这块项目起我也是第一次接触，以前没有用过原生开发据说体验比较糟糕或者说初学者不大友好。我在这之前已经有了Vue的一些基础学习，使用体验上来说基本可以无缝衔接。单从这一点上来说这是一个非常令人exciting的工具框架，利用它以前用vue构建的系统可以很容易的转成微信小程序。意味着现在业界积累的大量vue构建的组件和系统，可以无缝或者经过少量改造登陆小程序平台，节省了大量的开发成本和人力。

视频加载：video原生组件，地图加载：map组件。

项目难点

该项目的难点主要是校方需求紧，同时我个人又参与了多个新生校园项目，担任前端界面设计和图形化撰写，需要快速的学习能力和时间管理能力。

在开发中的难点应该就是和原本vue相异的地方，譬如路由转跳：因为小程序与vue的路由机制的差异，所以我们没法使用vue-router来实现路由转跳（因为vue页面转跳后，之前的页面会销毁；小程序在页面转跳后，之前的页面不会被销毁，而是转入后台；），解决方法我是使用了一个mpvue的插件mpvue-router-patch再进行一些配置。还有关于后端交互问题：小程序中所有的传统处理请求的插件，比如axios，$.ajax等等，因为依赖window对象的xmlHttpRequest api，都不可以使用，因为小程序中没有window对象。使用flyio插件可以解决这个问题，它重写了非浏览器环境的Http Engine。

项目收获

我在项目中最大的收获是团队合作，因为蓝图工作室同时接手了多个项目，几乎每个团队成员都是复用的，如何与其他前端成员进行分工合作是一笔宝贵的财富。除此之外，我也算是第一次与较大的合作方进行需求对接，在满足用户游览校园的同时进行校园文化输出的界面设计，是一个难点。

儿童科学知识APP

项目为开发一个针对4-13岁儿童的科普类app，主要针对当前市场上识字类产品众多却没有出色的科学教育类产品，可以激发儿童对科学知识的探索。我在项目中作为核心技术人员，参与了整个app框架设计，实现了主页面、调用后端数据以实现剧情式对话、电子书翻页等交互功能、AR科学实验交互功能。
主要使用了unity+ c#进行开发。

这是我今年参加大创的一个项目。它面向的是4-13岁的儿童，主要针对的是科普类教育，就是利用故事引入科学知识邀请小朋友进行探索。我在项目中是主要负责产品IP形象设计、界面设计、交互功能设计、前端功能实现等。

这个项目我前期做了很多工作，包括邀请北大教育学博士撰写整个故事书的稿子，然后根据我们可以在其中插入的一些实验进行改编。还有一些市场调研，线下给孩子们进行上课看是怎样的讲解方式和文字语音提醒，可以让孩子沉浸在故事里并且能够听懂我们将的科学概念。

项目主要是利用unity，一个游戏开发引擎进行制作。前端的动画效果方面我们主要是用了dotween库，进行一些悬浮效果故事书翻页效果实现。AR效果是用ARCore开发工具包，这块是小组另一个团队成员负责，我在这里主要是负责一些交互实验设计。譬如八大行星，需要小朋友找家长识别一个平面，会在手机上可以看到桌面上展开八大行星的AR效果，点击某个星球就会进行语音讲解。不仅让家长参与到儿童教育中，更让小孩也能通过看动画听故事的方式学习知识。

项目难点

这个项目主要的难点是确定需求，因为我们能够接触的家长和同学距离儿童的年龄差距挺大，我们需要设计课程去联系幼儿园给孩子们上课，再回来看这样的讲述文案是否能够被理解。另一个难点就是排期问题吧，因为刚好撞上了疫情，大家都远程办公了，再加上unity不好实现包管理，可能在某个页面需要改变一下界面光影或者摄像机的位置实现视觉聚焦拓展，另一个界面就会被影响了。我们采取的方式是进行定期变动需求会议，同时好确定排期。

开发中的主要难点也是学习方面的，unity本身知识体系比较庞大，需要时间进行界面学习、代码库学习。我在开发中遇到一个问题是，3D物体挂载的脚本是使用OnMouseDown()函数实现点击，但是在打开UI界面的情况下点击3D物体发现UI界面被击穿了，3D物体的点击被触发了。譬如我有个按钮是希望书的列表左移，然后书的位置就会……，这种时候通过 UI 的EventSystem判断当前是否点击了物体，这里的物体是包含UI和物体的，PointEventData是把你当前所点击到的物体数据进行一个获取和保存，再获取鼠标的位置信息，最后获取当前点击的所有物体数量，这样就能保持 一直点击的都是最上层的第一个对象了。

钛锋智能

这是我第一份前端实习项目，负责公司交易系统的数据展示、订单表单填写与后台交互，交易单的查询等。

前端的安全

xss攻击又叫做跨站脚本攻击，主要是用户输入或通过其他方式，向我们的代码中注入了一下其他的js，而我们又没有做任何防范，去执行了这段js。

采取的防范手段：用一个叫白名单过滤的方式来防范，列举一下比较合法的标签，称为白名单，这些标签是不会对页面进行攻击的。之后对用户输入的内容进行白名单过滤。

CSRF就是利用你所在网站的登录的状态，悄悄提交各种信息， 是一种比xss还要恶劣很多的攻击。因为CSRF可以在我们不知情的情况下，利用我们登陆的账号信息，去模拟我们的行为，去执行一下操作，也就是所谓的钓鱼。比如我们在登陆某个论坛，但这个网站是个钓鱼网站，我们利用邮箱或者qq登陆后，它就可以拿到我们的登陆态，session和cookie信息。然后利用这些信息去模拟一个另外网站的请求，比如转账的请求。

采取的防范手段：利用Token，由后端生成的一个唯一的登陆态，并传给前端保存在前端，每次前端请求时都会携带着Token，后端会先去解析这个Token，看看是不是后台给我们的，已经是否登陆超时，如果校验通过了，才会同意接口请求。

Nuxt

Nuxt.js 是一个基于 Vue.js 的通用应用框架。预设了利用 Vue.js 开发 服务端渲染 的应用所需要的各种配置，同时也可以一键生成静态站点（nuxt generate）。提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。所需要的基本功能都有了，强大的路由功能，支持异步数据（路由无需额外配置），内置 webpack 配置，无需额外配置，还包括打包和压缩 JS 和 CSS、支持各种样式预处理器： SASS、LESS、 Stylus 等。

模块化和工程化

模块化：可以理解为一组自定义业务的抽象封装，是根据项目的情况来进行封装组合到一起的，比如我们可以分为登录模块，表格展示模块。模块可维护性好，组合灵活，方便调用。

工程化：指使用软件工程的技术和方法来进行前端项目的开发、维护和管理。

1.代码规范: 保证团队所有成员以同样的规范开发代码。
2.分支管理: 不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。
3.模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。（以上两点可以总结为模块化或者组件化开发。）
4.自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。
5.构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，
6.部署。 将构建好的代码部署到生产环境。

MVVM的理解

MVVM分为Model、View、ViewModel三者。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；
• View：代表UI视图，负责数据的展示；
• ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

MVVM 的优点
1、主要目的是分离视图（View）和模型（Model）
2、降低代码耦合，提高视图或者逻辑的重用性。
3、提高了模块的可测试性

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。

一方面，Vue 会遍历 data 选项中的属性，并用 Object.defineProperty将它们转为 getter/setter，实现数据变化监听功能；

另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。

当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

项目难点和收获

企业项目更加重视模块化和可迭代性，对工程化管理也有一定的要求。我在项目中学习了nuxt框架及其整合体系，合理的编码规范，以及企业的需求文档的阅读和实现。体验了工作中如果发现bug如何定位前后端问题，并及时反馈。

快手实习

快手 | 基础平台部
部门负责研发快手的研发环境，包括代码分支管理，部署，测试，自动上线下线和版本回退等业务产品部门所需的研发功能，具体由研发云容器云等支撑。
主要负责新产品的宣发，工作内容为了解相关研发部署环境和技术栈，针对相关项目的研发人员进行工具的推广。
在项目中学习到了各种规模化，自动化，工程化的研发部署技术和解决方案，以及大型企业对于APP的快速部署需求和相关应对方案。

容器云

容器就是一个操作系统的最小镜像，在上面可以运行应用程序（可以认为是轻量级的虚拟机）我们常用的容器就是docker。docker的出现让部署服务和系统运维的效率有了极大地提高，可以做到开发环境无缝迁移到生产环境。在生产环境中经常做的就是部署成千上万的服务，然后在这个基础上做负载均衡之类的事情，有了docker就能通过部署对应服务的容器镜像完成。有了docker还不够，因为我们需要管理成千上万的容器，利用我们的容器云，可以做到监控容器运行状态，然后自动重启一些坏掉的容器，相当于做了热备份。把容器和容器调度跑到云端，这样结合起来的服务就是容器云。

项目难点与收获

难点就是基础平台部需要学习的底层架构知识较多，尤其是一些概念化知识，然后是及时把知识及需求进行整合处理。公司中的项目经营工作很大程度上也是多线战斗，一方面要进行资源整合排期调度，另一方面也要熟悉各项业务，于是在实习中我对平台化的知识也有了更多的认识。

为什么转产品：

当时还处在读研和工作的纠结之中，而且我本身比较喜欢做项目，不管是需求调研功能设计界面设计还是设计实现，我就想再系统化地学习一些关于产品的知识。而想学到最前沿的产品知识必定要去公司前沿进行学习实践。于是我就投了暑期实习，想学习进行总结以后对日后自己做一些个人项目或者团队项目设计可能会更有帮助。

为什么转回前端：

首先我是一个一直热爱前端技术的人，在team中主导界面设计也好，动效实现也好，再到慢慢深入了解网络底层也好，前端对我来说都包含无限的魅力。其次，从长远来考虑，我认为我在职业发展道路上做前端技术工作也能够帮我走得更加脚踏实地，更远。随着Nodejs的发展，现在前端也慢慢把能力范围扩张了，再加上现在的移动互联网发展背景，设备不断更新迭代，而最容易让大众接触的界面却是万变不离其宗的，所以我对这种直观优雅展示的技术充满热情。

基于某个项目/问题，你给出了什么方案，你加深了哪个技术的研究，有了什么样的理解，做了哪些输出、成果。自己回想一下自己的成长是什么。如果你可以侃侃而谈，深入浅出，那么选这类项目。（面试就是细节轰炸，没有积累和深度经历是回答不出细节的，所以不要作假、不要堆砌。如果这样没东西可写，那你放下简历，先积累吧）。表达出你的综合能力。

STAR原则：S代表situation,即在一个什么情景下;T代表task,即你遇到了什么难题或任务；A代表action,即你采取了什么行动；R代表result,即事情的反馈，得到了什么成果，说明了什么问题。