这个问题比较简单,用 flex 与 grid 实现如下即可:
实现方式如下:
<html>
<head>
<style>
/* flex */
.box {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.box div {
width: calc(100% / 3 - 2px);
height: 100px;
border: 1px solid black;
}
/* grid */
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
}
.box div {
height: 100px;
border: 1px solid black;
}
</style>
<head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<body>
</html>
复制代码
grid 学习:https://www.jianshu.com/p/d183265a8dad
一些想法写在下题。
Vue SSR 的好处就不多说了,这有一篇相关文章 服务端渲染与客户端渲染 。 简单的总结下 Vue SSR 的实现。 有一张实现图:
其基本实现原理:
window.__INITIAL_STATE__
发送到客户端。Vue SSR 的实现,主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的。
纯客户端输出过程有一个 complier 过程(「下题」中有一个简单描述),主要作用是将 template 转化成 render 字符串 。
Vue SSR 需要做的事多点(输出完整 HTML),除了 complier -> vnode,还需如数据获取填充至 HTML、客户端混合(hydration)、缓存等等。
相比于其他模板引擎(ejs, jade 等),最终要实现的目的是一样的,性能上可能要差点。
参考:
finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作,使用方法如下:
Promise
.then(result => { ··· })
.catch(error => { ··· })
.finally(() => { ··· })
复制代码
finally 特点:
Promise.prototype.finally = function (callback) {
let P = this.constructor
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
)
}
复制代码
Vue 的响应式原理是使用 Object.defineProperty 追踪依赖,当属性被访问或改变时通知变化。
有两个不足之处:
原因差不多,无非就是没有被 getter/setter 。
第一个比较容易理解,为什么数组长度不能被 getter/setter ?
在知乎上找了一个答案:如果你知道数组的长度,理论上是可以预先给所有的索引设置 getter/setter 的。但是一来很多场景下你不知道数组的长度,二来,如果是很大的数组,预先加 getter/setter 性能负担较大。
现在有一个替代的方案 Proxy,但这东西兼容性不好,迟早要上的。
Proxy,在目标对象之前架设一层拦截。具体,可以参考 http://es6.ruanyifeng.com/#docs/reference
理解两点:
这个题目有两家问了,感觉都不是答得很好。
从两个问题出发:
实现时,主要如下
参考:https://segmentfault.com/a/1190000010408657
以前写过两篇文章讨论这个算法的实现,没想到过的太久,忘记了。(文章地址:https://github.com/jkchao/blog/issues/3 ,https://github.com/jkchao/blog/issues/4) 。 也好,称此机会总结下
diff 的实现主要通过两个方法,patchVnode 与 updateChildren 。
patchVnode 有两个参数,分别是老节点 oldVnode, 新节点 vnode 。主要分五种情况:
updateChildren 是关键,这个过程可以概括如下:
oldCh 和 newCh 各有两个头尾的变量 StartIdx 和 EndIdx ,它们的2个变量相互比较,一共有4种比较方式。如果 4 种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了,就会结束比较。
以前写过一篇 「Vue 生面周期总结的文章 」的文章,里面提到了 complier 的作用,没有做深入了解。。。
模板解析这种事,本质是将数据转化为一段 html ,最开始出现在后端,经过各种处理吐给前端。随着各种 mv* 的兴起,模板解析交由前端处理。 总的来说,Vue complier 是将 template 转化成一个 render 字符串。 可以简单理解成以下步骤:
参考:
前端对算法的要求还是比较低的,但也是必不可少的一部分。
找到一篇比较不错的文章:https://www.cnblogs.com/zichi/p/4788953.html
最简单的一种思路就是使用数组存储,然后让我优化。 我。。。一脸懵逼。 有兴趣的同学可以参考这个: http://www.cnblogs.com/dolphin0520/p/3749259.html 。
ps: 看来我得补补数据结构和算法相关的知识了。
当面试官问这个问题,没有 get 到面试官的点,扯了一堆乱七八糟没用的 - -。 后来面试官说主要是用 timeline 工具。 大意是通过 timeline 来查看每个函数的调用时常,定位出哪个函数的问题,从而能判断哪个组件出了问题。
附上两个使用 timeline 的文章:
面试官不知道为何扯到了 202, 204。。。好像是由自己带进坑的。- -
202: 服务器已接受请求,但尚未处理。 204: 服务器成功处理了请求,没有返回任何内容。
这些状态码感觉只要能记住常用的就 ok 了,当然还得了解 200 +, 300+, 400+, 500+ 代表什么意思。
WebSocket 应该算是一个比较常问的面试点,如果问的不深的话,应该比较好回答。
由于 http 存在一个明显的弊端(消息只能有客户端推送到服务器端,而服务器端不能主动推送到客户端),导致如果服务器如果有连续的变化,这时只能使用轮询,而轮询效率过低,并不适合。于是 WebSocket 被发明出来。
相比与 http 具有以下有点:
实现比较简单,服务端库如 socket.io
、ws
,可以很好的帮助我们入门。而客户端也只需要参照 api 实现即可。
参考:
以前写过一篇简单的关于 electron-vue 的文章,没想到真有面试官问,而且问的挺深的。
最最重要的一点,electron 实际上是一个套了 Chrome 的 node 程序。
所以应该是从两个方面说开来:
Chrome 没什么好说的,是个前端都懂。
Node 方面可说的就多了。
有个面试官问我,在 electron 怎么解决跨域问题?
在我自己的项目里,确实遇到了这个问题,可惜选择了一个不怎么好的方法的方法,设置 nginx 。
为什么不好,如果项目是公司的,还需要运维同学帮忙。- -
也聊到了使用 CORS 允许跨域,也觉得不好,因为需要后端接口处理。 一脸懵逼的我,直到面试官提醒使用 node 来代理以下,才恍然大悟。(原来还可以这种操作。。。。)
当然也可以连接数据库,上家公司本来打算要做一个 electron 配合连接数据库的桌面应用。(还没开始做就离职了- -) 挺可惜的,当时数据库都已经选择好了,leveldb 或者 lowdb ,觉得应该不难。
附上两个 electron 配合数据库使用的链接: