网易前端面经

没想到笔试居然过了,就抱着去西湖转转稳赚不赔的心态去杭州了

记录一些能想起来的问题,对部分进行解析

一面

上来问了下项目的一些问题,然后就开始问基础知识

box-sizing

  • 标准盒模型与IE的盒模型
  • box-sizing的取值

padding取值

有哪些单位,当为百分比时是根据哪个值算出的

float浮动

清除浮动的常用方法

z-index不起作用时怎么办

美剧老司机项目中用的较多,检查需要层叠元素和它们父元素的position属性即可,根据情况设置为relative或absolute

this的指向

以下两次调用函数输出的this分别是什么

1
2
3
4
5
6
7
8
// A是一个对象
var A = {
foo: 'hello'
}
A.f = function () {console.log(this)}
var B = A.f
A.f() // -> A
B() // -> window

说下原型

简要说了下原型与原型链,函数与继承等等

vue-router实现单页路由的原理

这里了解的不多,只说了匹配url使用所设置的组件渲染,应该说下对地址的监听和视图的同步更新

字符串解析为dom元素

innerHTML,居然忘了..

前端如何处理跨域

常见的那几种方法(jsonp,iframe..)

二面

类数组对象能否用foreach方法

比如使用getElementsByXXXXX方法得到的HTMLCollection集合就是一个类数组对象,具有length属性

普通数组可以使用foreach等方法,而类数组对象没有这些方法

延伸一下,如何把类数组对象转换成数组? 可以使用Array.prototype.slice.call()

如何获取函数实参与形参的个数

  • 实参个数 - arguments.length
  • 形参个数 - arguments.callee.length

一个鼠标事件的问题

若有一个div元素outer和处于它位置中心的div元素inner,类似下图这样,灰色的区域是outer,红色的部分是inner

将鼠标从外部移到中心时outer和inner上会触发哪些鼠标事件?

一开始肯定想到的是mouseenter和mouseover,不过想的和说的貌似不是很周全

回来后又想了想用代码测试了两种情况:内嵌关系和同级关系,后者使用z-index层叠

在outer和inner上分别绑定mouseenter, mouseover和mouseleave的事件监听函数进行测试

当鼠标移到中心然后在回到初始位置时所触发的事件如下表所示

进入outer 进入inner 离开inner 离开outer
1-outer mouseover, mouseenter mouseover mouseover mouseleave
1-inner mouseover, mouseenter mouseleave
2-outer mouseover, mouseenter mouseleave mouseover, mouseenter mouseleave
2-inner mouseover, mouseenter mouseleave

target和originalTarget的区别

之前看MDN的时候发现originalTarget已不是标准中的方法,所以没怎么细看。

回来又验证了下,发现输出的是undefined,已经弃用了,因此这个问题我是no cloth的,我当时还提了是不是应该是currentTarget…

1
2
3
4
5
6
let body = document.body
body.addEventListener('click', e => {
console.log(e.target); // -> 点击的元素
console.log(e.currentTarget) // -> body
console.log(e.originalTarget) // -> undefined
})

列举数组的方法

sort(),slice(),splice(),push(),pop(),shift(),unshift()等等

splice的用法

返回删除的元素数组,若未删除元素则为空数组。

删除元素

1
2
var arr = [1,2,3]
arr.splice(1,1) // 从索引1处删除1个元素 -> [2]

添加元素

1
2
3
var arr = [1,2,3]
arr.splice(1,0,2,1) // 在索引为1的元素后添加2和1 -> []
console.log(arr) // -> [1, 2, 1, 2, 3]

在一个事件监听函数中中止同一事件后续的其他监听函数

使用Event的stopImmediatePropagation方法,注意它与stopPropagation的区别

1
2
3
4
5
6
7
8
var body = document.body
body.addEventListener('click',(e) => {
console.log('first')
e.stopImmediatePropagation()
})
body.addEventListener('click',(e) => {
console.log('second')
})

运行上例时会发现当点击页面时仅会输出”first”

如何将一个div元素变成可输入编辑文本的元素(参考富文本编辑器)

这里我不会就没继续往下问,提示了下有个contenteditable属性,还要些后续操作

cookie,localStorage和sessionStorage的区别

  • cookie,保存为字符串,存储容量小,随请求自动发送
  • localStorage与sessionStorage均为本地存储,属性Storage对象具有内置的API,均为本地存储
  • localStorage在关闭窗口或标签页后依然存在,而sessionStorage会被清除
  • 在同源的不同标签页中共享localStorage,但不共享sessionStorage

prototype和__proto__

  • prototype是函数的属性,用来设置原型对象
  • __proto__是对象的属性,值即为对象的原型

绑定事件的几种方法

  1. html标签中

    1
    <el onclick="f(){}" >
  2. onclick, onchange等属性

    1
    el.onclick = f(){}
  3. addEventListener

    1
    el.addEventListener('click', f(){})

接着又问了这三种有什么区别,以及第三种方法的第三个参数的取值和作用

是怎么进行技术选型的,为何项目中使用vue

自由发挥

若有不正确与不妥的地方欢迎拍砖指正

文章目录
  1. 1. 一面
    1. 1.1. box-sizing
    2. 1.2. padding取值
    3. 1.3. float浮动
    4. 1.4. z-index不起作用时怎么办
    5. 1.5. this的指向
    6. 1.6. 说下原型
    7. 1.7. vue-router实现单页路由的原理
    8. 1.8. 字符串解析为dom元素
    9. 1.9. 前端如何处理跨域
  2. 2. 二面
    1. 2.1. 类数组对象能否用foreach方法
    2. 2.2. 如何获取函数实参与形参的个数
    3. 2.3. 一个鼠标事件的问题
    4. 2.4. target和originalTarget的区别
    5. 2.5. 列举数组的方法
    6. 2.6. splice的用法
      1. 2.6.1. 删除元素
      2. 2.6.2. 添加元素
    7. 2.7. 在一个事件监听函数中中止同一事件后续的其他监听函数
    8. 2.8. 如何将一个div元素变成可输入编辑文本的元素(参考富文本编辑器)
    9. 2.9. cookie,localStorage和sessionStorage的区别
    10. 2.10. prototype和__proto__
    11. 2.11. 绑定事件的几种方法
    12. 2.12. 是怎么进行技术选型的,为何项目中使用vue
|