文末
如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。
同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
JavaScript
开源分享：docs.qq.com/doc/DSmRnRG…
this.$options = options || {};
// 数据
this._data = options.data || undefined;
observe(this._data);
// 默认数据要变为响应式的，这里就是生命周期
this._initData();
// 调用默认的watch
this._initWatch();
// 模板编译
new Compile(options.el, this);
}
_initData() {
let self = this;
Object.keys(this._data).forEach(key => {
Object.defineProperty(self, key, {
get: () => {
return self._data[key];
},
set: (newVal) => {
self._data[key] = newVal;
}
});
});
}
_initWatch() {
let self = this;
let watch = this.$options.watch;
Object.keys(watch).forEach(key => {
new Watcher(self, key, watch[key]);
});
}
};
=====================================================================
import Watcher from './Watcher.js';
export default class Compile {
constructor(el, vue) {
// vue实例
this.$vue = vue;
// 挂载点
this.$el = document.querySelector(el);
// 如果用户传入了挂载点
if (this.$el) {
// 调用函数，让节点变为fragment，类似于mustache中的tokens。实际上用的是AST，这里就是轻量级的，fragment
let el);
// 编译
this.compile($fragment);
// 替换好的内容要上树
this.fragment);
}
}
// 将el选择器所有内容生成虚拟节点
node2Fragment(el) {
let fragment = document.createDocumentFragment();
let child;
// 让所有DOM节点，都进入fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
return fragment;
}
// 编译
compile(el) {
// console.log(el);
// 得到子元素
let childNodes = el.childNodes;
let self = this;
let reg = /{{(.*)}}/;
childNodes.forEach(node => {
let text = node.textContent;
(text);
// console.log(node.nodeType);
// console.log(reg.test(text));
if (node.nodeType == 1) {
self.compileElement(node);
} else if (node.nodeType == 3 && reg.test(text)) {
let name = text.match(reg)[1];
self.compileText(node, name);
}
});
}
compileElement(node) {
// console.log(node);
// 这里的方便之处在于不是将HTML结构看做字符串，而是真正的属性列表
let nodeAttrs = node.attributes;
let self = this;
// 类数组对象变为数组
[].slice.call(nodeAttrs).forEach(attr => {
// 这里就分析指令
let attrName = attr.name;
let value = attr.value;
// 指令都是v-开头的
let dir = attrName.substring(2);
// 看看是不是指令
if (attrName.indexOf('v-') == 0) {
// v-开头的就是指令
if (dir == 'model') {
// console.log('发现了model指令', value);
new Watcher(self.$vue, value, value => {
node.value = value;
});
let v = self.getVueVal(self.$vue, value);
node.value = v;
// 添加监听
node.addEventListener('input', e => {
let newVal = e.target.value;
self.setVueVal(self.$vue, value, newVal);
v = newVal;
});
} else if (dir == 'if') {
// console.log('发现了if指令', value);
}
}
});
}
compileText(node, name) {
// console.log('AA', name);
// console.log('BB', this.getVueVal(this.$vue, name));
node.textContent = this.getVueVal(this.$vue, name);
new Watcher(this.$vue, name, value => {
node.textContent = value;
});
}
getVueVal(vue, exp) {
let val = vue;
exp = exp.split('.');
exp.forEach(k => {
val = val[k];
});
return val;
}
setVueVal(vue, exp, value) {
let val = vue;
exp = exp.split('.');
exp.forEach((k, i) => {
if (i < exp.length - 1) {
val = val[k];
} else {
val[k] = value;
}
});
}
}
===================================================================
import { def } from './utils.js';
// 得到Array.prototype
const arrayPrototype = Array.prototype;
// 以Array.prototype为原型创建arrayMethods对象，并暴露
export const arrayMethods = Object.create(arrayPrototype);
// 要被改写的7个数组方法
const methodsNeedChange = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
];
methodsNeedChange.forEach(methodName => {
// 备份原来的方法，因为push、pop等7个函数的功能不能被剥夺
const original = arrayPrototype[methodName];
// 定义新的方法
def(arrayMethods, methodName, function () {
// 恢复原来的功能
const result = original.apply(this, arguments);
// 把类数组对象变为数组
const args = [...arguments];
// 把这个数组身上的__ob__取出来，__ob__已经被添加了，为什么已经被添加了？因为数组肯定不是最高层，比如obj.g属性是数组，obj不能是数组，第一次遍历obj这个对象的第一层的时候，已经给g属性（就是这个数组）添加了__ob__属性。
const ob = this.ob;
// 有三种方法push\unshift\splice能够插入新项，现在要把插入的新项也要变为observe的
let inserted = [];
switch (methodName) {
case 'push':
case 'unshift':
inserted = args;
break;
case 'splice':
// splice格式是splice(下标, 数量, 插入的新项)
inserted = args.slice(2);
break;
}
// 判断有没有要插入的新项，让新项也变为响应的
if (inserted) {
ob.observeArray(inserted);
}
// console.log('啦啦啦');
ob.dep.notify();
return result;
}, false);
});
============================================================================
import observe from './observe.js';
import Dep from './Dep.js';
export default function defineReactive(data, key, val) {
const dep = new Dep();
// console.log('我是defineReactive', key);
if (arguments.length == 2) {
val = data[key];
}
// 子元素要进行observe，至此形成了递归。这个递归不是函数自己调用自己，而是多个函数、类循环调用
let childOb = observe(val);
Object.defineProperty(data, key, {
// 可枚举
enumerable: true,
// 可以被配置，比如可以被delete
configurable: true,
// getter
get() {
// console.log('你试图访问' + key + '属性');
// 如果现在处于依赖收集阶段
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
}
}
return val;
},
// setter
set(newValue) {
console.log('你试图改变' + key + '属性', newValue);
if (val === newValue) {
return;
}
val = newValue;
// 当设置了新值，这个新值也要被observe
childOb = observe(newValue);
// 发布订阅模式，通知dep
dep.notify();
}
});
};
=================================================================
let uid = 0;
export default class Dep {
constructor() {
// console.log('我是DEP类的构造器');
this.id = uid++;
// 用数组存储自己的订阅者。subs是英语subscribes订阅者的意思。
// 这个数组里面放的是Watcher的实例
this.subs = [];
}
// 添加订阅
addSub(sub) {
this.subs.push(sub);
}
// 添加依赖
depend() {
// Dep.target就是一个我们自己指定的全局的位置，你用window.target也行，只要是全剧唯一，没有歧义就行
if (Dep.target) {
this.addSub(Dep.target);
}
}
// 通知更新
notify() {
// console.log('我是notify');
// 浅克隆一份
const subs = this.subs.slice();
// 遍历
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
}
};
=====================================================================
import Observer from './Observer.js';
export default function (value) {
// 如果value不是对象，什么都不做
if (typeof value != 'object') return;
// 定义ob
let ob;
if (typeof value.ob !== 'undefined') {
ob = value.ob;
} else {
ob = new Observer(value);
}
return ob;
}
======================================================================
最后更多分享：前端字节跳动真题解析
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
