最后
四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~
祝大家都能收获大厂offer~
篇幅有限,仅展示部分内容
-
我们都会配置路由。那么如何编码才能保证多路由模块解耦、保证更方便增加新的路由模块?
-
如何手写出一个类Vue的MVVM响应式框架(Vue的底层实现)
-
Vue项目做完后我们会打包。那么如何编写配置文件能让打包速度达到最优化?
-
我们都会写组件。那么如何让组件成为高复用性的组件库型组件?(可以脱离于项目拿到别的项目上使用)
-
Vue3.0你了解多少?
上图是主路由文件,核心函数是webpack的api ——require.context(),通过执行此函数获取一个特定的上下文,主要用来实现自动化导入模块。
项目中各个业务的路由可以充分解耦,路由文件后缀名为xxx.routers.js即可,主路由文件会自动化导入新增的各业务路由文件。
Vue的响应式是利用了数据劫持实现的,知道这个就很简单了。
这里写一个简易的,面试的时候大致说出思路即可,后续更新一个完整的MVVM框架,感兴趣的同学可以关注一下~
第一步:建立订阅器模型
// 订阅器模型
var Dep = {
clientList: {},
listen: function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn);
},
trigger: function () {
var key = Array.prototype.shift.call(arguments),
fns = this.clientList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, fn; fn = fns[i++]😉 {
fn.apply(this, arguments);
}
}
};
第二步:设置劫持方法,对数据进行劫持
// 劫持方法
var dataHijack = function ({ data, tag, datakey, selector }) {
var value = ‘’,
el = document.querySelector(selector);
// 数据劫持
Object.defineProperty(data, datakey, {
get: function () {
console.log(‘我获取到值了’);
return value;
},
set: function (newValue) {
console.log(‘我设置到值了’);
value = newValue;
Dep.trigger(tag, newValue);
}
});
// 绑定观察者
Dep.listen(tag, function (text) {
el.innerHTML = text;
});
}
第三步:调用
订阅视图-1:
订阅视图-2: