面试官姓潘,是一位年轻的和善的面试官,曾在tx就职,面试过程很nice。

他只问了我六个问题,我很多都答的不深入或者答不出来,也就是基础知识不牢固,不透彻。

1.Jquery和vue操作DOM的区别?

Jquery和vue.js都是js的库,Jquery操作dom本质上与原生js没区别,只不过Jquery获取的是Jquery对象,js获取的是DOM对象,两者更新数据所使用的方法不一样,但是两者可相互转换。

例如:

var aLink = $("#a"); aLink.attr("disabled","true");

var alink = document.getElementById("a"); alink.disabled = true;

转换:

$("#a").get(0) => alink

$(alink) => $("#a")

但是vue由于数据是双向绑定的,其中有一个compile解析器,专用于解析模板指令(例如v-on、v-model等),在初始化解析的时候,将变量和dom对象进行了绑定,所以当监听器observer发现(监听)数据发生变化后,会通知订阅者watcher去执行相应的函数,从而更新视图。

2.vue在更新数据时,具体是怎么更新的?

这个问题,当时没明白面试官的意图,可能是想问关于virtual dom。

关于理解virtual dom可参考链接:https://www.cnblogs.com/wubaiqing/p/6726429.html

这里博主根据链接里的理解,写下了简略的模拟DOM(实际远不止这些)

    function Element (tagName, props, children) {
	  this.tagName = tagName
	  this.props = props
	  this.children = children
	}

	Element.prototype.render = function () {
	  var el = document.createElement(this.tagName) // 根据tagName构建
	  var props = this.props
	
	  for (var propName in props) { // 设置节点的DOM属性
	    var propValue = props[propName]
	    el.setAttribute(propName, propValue)
	  }
	
	  var children = this.children || []
	
	  children.forEach(function (child) {
	    var childEl = (child instanceof Element)
	      ? child.render() // 如果子节点也是虚拟DOM,递归构建DOM节点。render()方法是构造函数Element原型上的方法
	      : document.createTextNode(child) // 如果字符串,只构建文本节点
	    el.appendChild(childEl)
	  })
	
	  return el
	}
	
	var ul = new Element('ul', {id: 'list'}, [
	  new Element('li', {class: 'item'}, ['Item 1']),
	  new Element('li', {class: 'item'}, ['Item 2']),
	  new Element('li', {class: 'item'}, ['Item 3'])
	])
	
	var ulRoot = ul.render()
	document.body.appendChild(ulRoot)

后台可见渲染出真的DOM对象,如下图:

 

3.现假设有一段字符串,形如:"<li>1<p>2<span>3<span>4</span>.......",把这些字符串解析成DOM对象

利用栈数据结构去解析即可。解析第一个<li>的时候就压入到栈底,依次类推,遇到相对应的闭标签时,就出栈。

4.http请求缓存具体是怎么样的?如果缓存的文件未过期,怎么让用户即时获取到最新的文件?

请参考:

https://www.cnblogs.com/chenqf/p/6386163.html

https://www.cnblogs.com/eric-qin/p/6255616.html

5.说说XSS、CSRF,详细的。

参考:https://blog.csdn.net/Charles_Tian/article/details/82348067

中途由于对CSRF理解的不深,终止了回答,甚是尴尬。

6.请你实现一个功能,在调用delayHello()时,隔一秒后打印5。

面试官给出的代码雏形:

var hello = function(a, b){
	console.log(a);
}
function delay(func, t){
	//codes
}
var delayHello = delay(hello, 1000);
delayHello(5, 6);

完成之后的代码:

var hello = function(a){
	console.log(a);
}
function delay(func, t){
	var fn = function(m){
		setTimeout(function(){
            func(m);
        },t)
	}
	return fn;
}
var delayHello = delay(hello, 1000);
delayHello(5);

其实最后这题很好解决,我当时其实也是这个想法(但是好像return出来的那个函数忘记加参数了),但是不知道为什么面试官说可不可以不用func(m)的方式调用,有没有其他的方法。

难道要用var f = func; f(m) 的方法?

不知道读者们有没有更好的办法...

Logo

前往低代码交流专区

更多推荐