前台面试

面试考评

面试准备
候选人考评点
具体考评内容项

1. 技术热情。我面试人的时候一般很少用“提问式面试”，不会刻意提一个技术问题让你去处理而后搞得对方紧张兮兮，我主要靠引导，会引导出少量技术话题来，例如少量热门话题，少量技术热点难点，少量新工具。
2. 做事态度。今天中午我还跟朋友出去吃饭的时候谈起这个话题。创业公司有时候真的就是个坑，需要面对很多不如意，例如薪资、福利或者者是业务流程之类的问题，面对这些问题你的态度是怎么的？为什么离开上一个公司？
3. 学习总结能力。例如谈到某个技术的时候，我会问一下，学这个是为了做什么？什么时候学的，如何学习的。又或者是问少量“平时看什么书？什么时候看？从什么渠道理解最新的知识？
4. 分析处理问题的能力。问他在前公司做过什么项目，如何做的，使用了什么技术，是怎样考虑的，遇到了什么问题如何处理的之类的问题。
5. 技术经验和成长潜力。包括 技术广度和深度方面的经验，项目管理经验，架构经验工具化经验开发流程经验，协调管理经验。我一般会给应届生讲少量知识点，有的面试者会充满兴趣，问这问那，或者者试着自己给出处理方案。遇到从未接触过的需求或者无法处理的问题时怎样解决

知识点

html

1. html5新特性
2. websocket了解和使用
3. 浏览器模型常见对象
   window、history、xhr、location
4. Cookie、sessionStorage、localStorage的了解和区别
5. 页面dom渲染过程，重流和重绘
6. 文件上传实现

css

1. 行内元素与块级元素区别
2. flex布局
3. css预解决器less、sass
4. css3新特性
5. 伪元素before和after的用法
6. display、float、position的关系
7. 盒模型
8. 垂直居中方法：
   margin 0 auto
   margin和绝对定位计算
   flex布局
9. 上下两个div设置margin为20px，两个div的间距是多少，为什么

js

1. es6新特性
2. promise异步和async/await
3. 浅拷贝和深拷贝的了解，实现深拷贝
4. dom事件流，事件委托
5. 跨域的了解和处理方法
6. Array对象的少量常用方法
7. js数据类型：undefined、null、boolean、number、string、object、function、array
8. jquery链式调用实现原理
9. 防抖节流，如：
   监听一个输入框的文本变化，变化时调用接口，如何优化实现当输入停顿一段时间才调用接口
10. 如何判断一个变量是数组类型还是对象类型
11. for in for of forEach map的区别
12. 板块机制，amd和commonjs
13. this对象和bind,call函数使用
14. proptype原型对象的了解，实现一个方法，传入一个string类型的参数，而后将string的每个字符间加个空格返回

spacify('hello world') // => 'h e l l o  w o r l d''hello world'.spacify();String.prototype.spacify = function(){  return this.split('').join(' ');};

13. 函数申明与函数表达式的区别

// 函数公告    function funDeclaration(type){        return type==="Declaration";    }// 函数表达式    var funExpression = function(type){        return type==="Expression";    }

Javascript 中函数公告和函数表达式是存在区别的，函数公告在JS解析时进行函数提升，因而在同一个作用域内，不论函数公告在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。

14. 考察侯选人能否了解参数（arguments）对象。定义log，而后它可以代理商console.log的方法。

function log(msg)　{  console.log(msg);}function log(){  console.log.apply(console, arguments);};

15. 上下文的了解,如何确保可以访问到count

var User = {  count: 1,  getCount: function() {    return this.count;  }};console.log(User.getCount());var func = User.getCount;console.log(func());// 1和undefined。var func = User.getCount.bind(User);console.log(func());

16. 函数式编程,实现函数multi(2)(3)(4)=24

function multi(n){  var fn = function(x) {    return multi(n * x);  };  fn.valueOf = function() {    return n;  };  return fn;}multi(1)(2)(3)(4) == 24; // true

vue

1. vuex的原理
2. vue-router传参和监听变化
3. 过滤器和指令的使用，能否使用过全局过滤器
4. 组件通信方式理解几种？
   props传递
   event.emit,on
   bus组件
   vuex
5. 计算属性compute和侦听器watch，可否修改compute里的值，怎样改
6. slot插槽，slot-scope使用
7. this.$nextTick的用法

react

1. 创立组件的方式
   createClass、stateless function、extend Component/PureComponent
2. redux工作流程
3. 组件生命周期
4. react-router-v4了解
5. 高阶组件

webpack

1. 详情一下webpack的工作原理
2. 简单详情一下webpack里面的配置项
3. 使用过哪些webpack的插件和loader
4. webpack中如何配置实现多入口页面

小程序

1. 谈谈你对小程序开发的了解
2. 小程序点击按钮传参是怎样做的
3. 小程序开发中能否用了框架，ui组件样式怎样写的

业务相关

1. 项目文件结构，代码规范
2. 权限控制如何实现，页面级和按钮功能级
3. 登录流程
4. 项目中有没有遇到特别困难的问题，是如何处理的
5. 能否理解nodejs，能否使用过npm发布组件，形容过程

其余

1. 前台性能优化
2. 有哪些好的习惯或者方法可以提高工作效率
3. 前台开发的了解，职业规划，发展方向
4. 开发中遇到过什么难点问题，项目上有什么对自己提升很大的心得体会
5. 分享一个最近学习的新技术，平常是通过哪些途径来提升自己的技术水平
6. 能否有封装过自己的函数库或者组建
7. 详情一下上个团队的情况，自己在其中担当什么角色
8. 为什么考虑离任，对公司或者团队有什么改进建议或者看法
9. 你认为前台开发工程师的核心价值表现在哪里
10. 能否采用前后台分离，前后台如何协调定义数据模型
11. 工作中使用那些开发工具，git的使用
12. 平常能否写博客，有没有给团队做过技术分享，有什么心得
13. 你认为前台开发工程师的核心价值表现在哪里
14. 能否采用前后台分离，前后台如何协调定义数据模型
15. 工作中使用那些开发工具，git的使用
16. 分享你最近在学习或者想理解的新技术，你学习新知识的途径有哪些
17. 你为什么从上家公司离任呢，对上家公司有什么不满意的地方
18. 浏览器调试工具经常用到那些板块
    console、element、sources、network、application（storage、cache）

19. 封装一个时间轴的组件

    image.png

// 线条样式.timeline-item-line {    position: absolute;    left: 4px;    top: .75em;    height: 100%;    border-left: 2px solid #e8e8e8;}// 圆圈项样式.timeline-item-circle {    position: absolute;    width: 10px;    height: 10px;    background-color: #fff;    border-radius: 100px;    border: 2px solid transparent;}// 文本内容样式.timeline-item-content {    margin: 0 0 0 18px;    position: relative;    top: -6px;}

20. 封装一个弹出框组件

// 遮罩层样式.overlay {  position: fixed;  left: 0;  right: 0;  bottom: 0;  top: 0;  background: rgba(0,0,0,0.8);}// 弹窗内容样式.overlay article {  position: absolute;  left: 50%;  top: 50%;  margin: -200px 0 0 -200px;  width: 400px;  height: 400px;}// 点击遮罩关闭弹窗，点击弹出内容冒泡导致关闭，防止事件冒泡$('.overlay').click(function(e){  if (e.target == e.currentTarget)    closeOverlay();});

笔试编程

1. 给定一个数组，编写一个函数去除重复元素，如:
   输入：arr=[1,2,3,2,3,4,5,2,3]
   输出：uniq(arr) = [1,2,3,4,5]

2. 实现一个flatten函数，将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。如：

flatten([1,[2],[3,[4]]]) = [1,2,3,4]

3. 实现一个find函数，模拟原生的find函数，find(list, predicate)。

在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，假如没有元素通过检测则返回 undefined。 假如找到匹配的元素，函数将立即返回，不会遍历整个list。

var even = find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// 2

4. 实现一个parseQuery函数，能够解析location的search字符串(不包括’?’)。

输入一个search，输出一个object，同名参数则是会成为数组。

let str = "http://localhost:3000/index.html？phone=12345678901&pwd=123123";var result = parseQuery(str);console.log(result) // { phone: '12345678901', pwd:'123123' }

5. 将一个扁平数组转换成树状结构

function toChildrenStruct(pidArray, expandLevel) {    // 将pid结构的树型数据转换成children结构    const childrenArray = []    const expandedItems = []    const itemMap = {}    if (!pidArray) {      return childrenArray    } else {      for (const item of pidArray) {        item.key = item.id        item.value = item.id        item.label = item.name        itemMap[item.id] = item      }      for (const item of pidArray) {        const parent = itemMap[item.parentId]        if (typeof parent === 'undefined') {          // pid不存在，是顶级元素          childrenArray.push(item)        } else {          if (typeof parent.children === 'undefined') {            parent.children = []            if (expandLevel === -1) expandedItems.push(parent.id)          }          parent.children.push(item)        }      }    }    return childrenArray  }