富途网络科技有限公司2019秋招凉经

面试官姓潘，是一位年轻的和善的面试官，曾在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去执行相应的函数，从而更新视图。

扫描二维码关注公众号，回复： 3598380 查看本文章

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) 的方法？

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

富途网络科技有限公司2019秋招凉经

猜你喜欢