2024年前端最全前端三大件实现一个简易的ToDoList，2024年最新web前端面试题vue

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

.header {

display: inline-flex;

color: #007acc;

width: 100%;

height: 50px;

position: relative;

border: 2px solid #007acc;

border-radius: 5px 5px 0px 0px;

background-color: white;

}

.header>h1 {

margin-left: 5px;

margin-top: 5px;

}

.header-right {

width: 70%;

margin-left: auto;

height: 50px;

}

#input {

background-color: white;

border: 1px solid #007acc;

width: 80%;

height: 40px;

margin-top: 5px;

margin-left: 5px;

border-radius: 5px;

box-sizing: border-box;

outline: none;

padding-left: 5px;

padding-right: 5px;

}

#header-right-button {

height: 40px;

width: 15%;

border-radius: 5px;

background-color: white;

border: 1px solid #007acc;

outline: none;

}

.content {

width: 100%;

border: 2px solid #007acc;

border-top: 0;

padding-bottom: 10px;

border-radius: 0px 0px 5px 5px;

background-color: white;

}

.content h2 {

color: #007acc;

margin: 5px;

margin-top: 0;

font-weight: 400;

}

ul {

width: 100%;

min-height: 100px;

}

li {

display: inline-flex;

border: 1px solid #007acc;

height: 40px;

width: 93%;

margin-left: -5%;

padding-left: 5px;

padding-right: 5px;

border-left: 5px solid #007acc;

position: relative;

border-radius: 5px;

margin-bottom: 5px;

}

li>input {

position: relative;

top: 25%;

height: 1.5em;

width: 1.5em;

margin-right: 5px;

}

li>p {

font-size: 16px;

line-height: 40px;

color: #252526;

}

li>img {

width: 25px;

height: 25px;

margin-top: 7.5px;

margin-left: auto;

}

index.js

/*

• author: sweet

• date: 2021年8月24日

• descript: 实现一个简易的ToDoList

• */

let ul_todo = document.getElementById(“todo”);

let ul_finish = document.getElementById(“finish”);

let inputPlan = document.getElementById(“input”);

let buttonPlan = document.getElementById(“header-right-button”);

/*

• 添加计划

• @param {localStorage中的key} e

• @param {计划内容} text

• @param {计划完成状态} status

*/

function sw_addPlan(e, text, status) {

let todoText;

let date;

if (e) { // 非首次加载，赋参数值

date = e;

todoText = text;

} else { // 首次加载赋新值

todoText = inputPlan.value;

if (!todoText) {

return;

}

date = “sweet-” + Date.now();

}

let li = document.createElement(“li”);

let input = document.createElement(“input”);

let p = document.createElement(“p”);

let img = document.createElement(“img”);

li.id = date;

input.type = “checkbox”;

input.className = “checkbox”;

p.className = “todo-text”;

p.innerHTML = todoText;

img.src = “./resources/trash.png”;

img.className = “deletePlan”;

input.addEventListener(“change”, sw_handleChange);

img.addEventListener(“click”, sw_deletePlan);

if (status) {

ul_finish.appendChild(li);

input.checked = true;

} else {

ul_todo.appendChild(li);

}

li.appendChild(input);

li.appendChild§;

li.appendChild(img);

if (!e) {

let storageData = {

text: todoText,

finished: false

}

localStorage.setItem(date, JSON.stringify(storageData));

}

if (localStorage.getItem(“firstLoad”) === ‘true’) {

localStorage.setItem(“firstLoad”, false);

}

}

/*

• 处理输入框事件

*/

function sw_handleSubmit() {

sw_addPlan();

inputPlan.value = ‘’; //清空输入框

}

/*

• 处理复选框状态修改

*/

function sw_handleChange(e) {

//得到复选框的父节点，然后把它加给finish

let li = e.target.parentNode;

let ul = li.parentNode.id;

let p_node = li.children[1];

let data = {

text: p_node.innerHTML,

finished: true

}

if (ul === ‘todo’) {

ul_todo.removeChild(li);

ul_finish.appendChild(li);

} else {

ul_finish.removeChild(li);

ul_todo.appendChild(li);

data.finished = false;

}

localStorage.setItem(li.id, JSON.stringify(data));

}

/*

• 处理添加计划按钮点击事件

*/

function sw_handleClick() {

sw_addPlan();

inputPlan.value = ‘’; //清空输入框

}

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。