高频前端面试题解析与实战指南@慕课网原创_慕课网

概述

本文详细介绍了前端开发的基础知识，包括HTML、CSS和JavaScript的基本概念和常用技巧，涵盖了高频前端面试题中常见的DOM操作、事件处理和CSS布局等内容。此外，文章还深入探讨了Vue.js和React.js等前端框架的使用方法，并提供了性能优化和调试技巧。文章最后分享了前端项目的实战案例和面试经验，帮助读者更好地准备面试。高频前端面试题在文中得到了全面的解析和应用。

前端基础知识回顾

HTML与CSS基础

HTML（HyperText Markup Language）是构建网页的基础，它定义了网页的内容结构。CSS（Cascading Style Sheets）则负责网页的样式和布局，使得网页看起来更加美观和符合设计需求。

HTML基础

HTML元素通过标签来定义内容的结构。以下是一些常见的HTML标签：

<html>：整个HTML文档的根标签。
<head>：包含文档的元数据，如标题、样式表等。
<body>：包含文档的可见内容。
<title>：定义文档的标题。
<header>：定义头部区域。
<footer>：定义底部区域。
<div>：定义一个区块。
<span>：定义一个内联区块。
<p>：定义段落。
<a>：定义链接。
<img>：定义图片。
<ul> 和 <ol>：定义无序列表和有序列表。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到示例网页</h1>
    </header>
    <div>
        <p>这是第一个段落。</p>
        <p>这是第二个段落。</p>
    </div>
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</body>
</html>

CSS基础

CSS用于设置HTML元素的样式。以下是一些常见的CSS属性：

font-size：设置字体大小。
color：设置文本颜色。
background-color：设置背景颜色。
padding：设置内边距。
margin：设置外边距。
display：控制元素的显示类型。
float：控制元素的浮动位置。
position：设置元素的位置。
z-index：控制元素的层叠顺序。
border：设置边框。
width 和 height：设置元素的宽度和高度。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            padding: 20px;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        footer {
            background-color: #ccc;
            color: #000;
            text-align: center;
            padding: 10px;
        }

        div {
            background-color: #eee;
            padding: 20px;
            margin: 10px 0;
        }

        p {
            font-size: 16px;
            color: #333;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到示例网页</h1>
    </header>
    <div>
        <p>这是第一个段落。</p>
        <p>这是第二个段落。</p>
    </div>
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</body>
</html>
``

#### JavaScript基础

JavaScript是一种客户端脚本语言，可以用来增强网页的交互性。以下是JavaScript的一些基础概念：

- **变量与类型**：
  - `var`、`let` 和 `const`：定义变量。
  - `number`：数字类型。
  - `string`：字符串类型。
  - `boolean`：布尔类型。
  - `object`：对象类型。
  - `undefined`：未定义类型。
  - `null`：空值类型。

示例代码：

```javascript
var number = 42;
let message = "Hello, world!";
const pi = 3.14;

console.log(number);    // 输出 42
console.log(message);   // 输出 Hello, world!
console.log(pi);        // 输出 3.14

函数：
- 定义函数。
- 调用函数。
- 返回值。

示例代码：

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));  // 输出 8

条件语句：
- if 语句。
- else 语句。
- else if 语句。
- switch 语句。

示例代码：

let age = 20;

if (age < 18) {
    console.log("你还未成年。");
} else if (age >= 18 && age < 65) {
    console.log("你成年了。");
} else {
    console.log("你已经退休了。");
}

switch (age) {
    case 17:
        console.log("你还未成年。");
        break;
    case 18:
    case 19:
        console.log("你刚刚成年。");
        break;
    default:
        console.log("你成年了。");
}

循环：
- for 循环。
- while 循环。
- do...while 循环。

示例代码：

for (let i = 0; i < 5; i++) {
    console.log(i);  // 输出 0, 1, 2, 3, 4
}

let j = 0;
while (j < 5) {
    console.log(j);  // 输出 0, 1, 2, 3, 4
    j++;
}

let k = 0;
do {
    console.log(k);  // 输出 0, 1, 2, 3, 4
    k++;
} while (k < 5);

数组与对象：
- 数组的定义和操作。
- 对象的定义和操作。

示例代码：

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]);  // 输出 1
numbers.push(6);         // 添加 6
console.log(numbers);     // 输出 [1, 2, 3, 4, 5, 6]
numbers.pop();           // 移除最后一个元素
console.log(numbers);     // 输出 [1, 2, 3, 4, 5]

let person = {
    name: "John",
    age: 30,
    greet: function() {
        return "你好，我是 " + this.name;
    }
};

console.log(person.name);  // 输出 John
console.log(person.age);   // 输出 30
console.log(person.greet());  // 输出 你好，我是 John

函数与闭包

函数是JavaScript中最基本的构建块之一。闭包是函数的一个特性，允许函数访问并修改其外部作用域中的变量。

函数

函数是执行特定任务的可重用代码块。函数可以接收参数，执行一些操作，并返回结果。

定义函数：
- function 关键字。
- 参数列表。
- 函数体。
- 返回值。

示例代码：

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));  // 输出 8

箭头函数：
- => 语法。
- 简化函数定义。
- 不创建自己的 this。

示例代码：

let add = (a, b) => a + b;

console.log(add(5, 3));  // 输出 8

闭包

闭包是JavaScript的一个重要特性，允许函数访问并修改其外部作用域中的变量。闭包由函数及其可访问的外部变量组成。

创建闭包：
- 内部函数可以访问外部函数的变量。
- 返回内部函数，使其成为闭包。

示例代码：

function outer() {
    let count = 0;

    return function inner() {
        count++;
        console.log(count);
    };
}

let counter = outer();
counter();  // 输出 1
counter();  // 输出 2

ES6新特性

ES6（ECMAScript 2015）引入了许多新特性，使JavaScript更加现代化和强大。

类

ES6引入了类的概念，使面向对象编程更加直观。

定义类：
- class 关键字。
- constructor 方法。
- this 关键字。

示例代码：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁。`);
    }
}

let person = new Person("John", 30);
person.greet();  // 输出 你好，我是 John，今年 30 岁。

模板字符串

模板字符串（Template Literals）允许在字符串中嵌入表达式。

使用模板字符串：
- 反引号（`）定义模板字符串。
- ${} 操作符嵌入表达式。

示例代码：

let name = "John";
let age = 30;

console.log(`你好，我是 ${name}，今年 ${age} 岁。`);  // 输出 你好，我是 John，今年 30 岁。

解构赋值

解构赋值允许从数组、对象等结构中直接提取值。

数组解构：
- 从数组中提取值。

示例代码：

let arr = [1, 2, 3];

let [a, b, c] = arr;

console.log(a);  // 输出 1
console.log(b);  // 输出 2
console.log(c);  // 输出 3

对象解构：
- 从对象中提取值。

示例代码：

let person = {name: "John", age: 30};

let {name, age} = person;

console.log(name);  // 输出 John
console.log(age);   // 输出 30

异步编程

ES6引入了Promise和async/await，使异步编程更加简单和直观。

Promise：
- new Promise 创建一个新的Promise。
- resolve 和 reject 方法。
- then 和 catch 方法。

示例代码：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("完成！");
    }, 2000);
});

promise.then(result => {
    console.log(result);  // 输出 完成！
}).catch(error => {
    console.error(error);
});

async/await：
- async 关键字定义异步函数。
- await 关键字等待Promise完成。

示例代码：

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("获取的数据！");
        }, 2000);
    });
}

async function handleData() {
    let data = await fetchData();
    console.log(data);  // 输出 获取的数据！
}

handleData();

常见面试题解析

DOM操作与事件处理

DOM（Document Object Model）是HTML和XML文档的编程接口。通过DOM，可以动态地修改和操作HTML元素。事件处理则是对用户与页面交互的响应。

DOM操作

DOM提供了多种方法来操作元素，如获取、添加、删除和修改元素。

获取元素：
- getElementById：通过元素的ID获取。
- getElementsByClassName：通过元素的类名获取。
- getElementsByTagName：通过元素的标签名获取。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <div id="myDiv">这是我的div元素。</div>
    <div class="myClass">这是我的class元素。</div>
    <div class="myClass">这是我的第二个class元素。</div>
    <script>
        let divById = document.getElementById("myDiv");
        console.log(divById);  // 输出 div 元素

        let divsByClass = document.getElementsByClassName("myClass");
        console.log(divsByClass);  // 输出 div 元素数组

        let divsByTag = document.getElementsByTagName("div");
        console.log(divsByTag);  // 输出 div 元素数组
    </script>
</body>
</html>

添加元素：
- createElement：创建新元素。
- appendChild：将新元素添加到父元素中。
- innerHTML：添加HTML内容。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <div id="myDiv"></div>
    <script>
        let div = document.getElementById("myDiv");

        let newElement = document.createElement("span");
        newElement.innerHTML = "这是新元素。";
        div.appendChild(newElement);

        div.innerHTML += "<span>这是通过innerHTML添加的元素。</span>";
    </script>
</body>
</html>

修改元素：
- innerHTML：修改元素的HTML内容。
- textContent：修改元素的文本内容。
- className：修改元素的类名。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <div id="myDiv">这是我的div元素。</div>
    <script>
        let div = document.getElementById("myDiv");
        div.innerHTML = "这是修改后的HTML内容。";
        console.log(div.innerHTML);  // 输出 修改后的HTML内容

        div.textContent = "这是修改后的文本内容。";
        console.log(div.textContent);  // 输出 修改后的文本内容

        div.className = "newClass";
        console.log(div.className);  // 输出 newClass
    </script>
</body>
</html>

删除元素：
- removeChild：删除子元素。
- innerHTML：清空元素内容。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <div id="myDiv">
        <span id="mySpan">这是我的span元素。</span>
    </div>
    <script>
        let div = document.getElementById("myDiv");
        let span = document.getElementById("mySpan");

        div.removeChild(span);
        console.log(div.innerHTML);  // 输出 空字符串

        div.innerHTML = "";
        console.log(div.innerHTML);  // 输出 空字符串
    </script>
</body>
</html>

事件处理

事件处理是响应用户与页面的交互，如点击、滚动、键盘输入等。通过添加事件监听器来实现。

添加事件监听器：
- addEventListener：添加事件监听器。
- removeEventListener：移除事件监听器。
- onclick：直接绑定点击事件。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <button id="myButton">点击我</button>
    <script>
        let button = document.getElementById("myButton");

        // 添加事件监听器
        button.addEventListener("click", function() {
            console.log("按钮被点击了。");
        });

        // 直接绑定点击事件
        button.onclick = function() {
            console.log("按钮被点击了。");
        };

        // 移除事件监听器
        button.removeEventListener("click", function() {
            console.log("按钮被点击了。");
        });
    </script>
</body>
</html>

CSS布局与常见技巧

CSS用于定义网页的样式和布局。以下是一些常见的CSS布局技巧：

Flexbox：
- display: flex：定义Flexbox布局。
- justify-content：定义主轴对齐方式。
- align-items：定义交叉轴对齐方式。
- flex-direction：定义主轴的方向。
- flex-wrap：定义是否换行。
- flex-grow：定义元素的伸缩因子。
- flex-shrink：定义元素的收缩因子。
- flex-basis：定义元素的初始大小。
- order：定义元素的排列顺序。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100px;
            background-color: #eee;
        }

        .flex-item {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 50px;
            background-color: #ccc;
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flex-item">项目1</div>
        <div class="flex-item">项目2</div>
        <div class="flex-item">项目3</div>
    </div>
</body>
</html>

Grid布局：
- display: grid：定义Grid布局。
- grid-template-columns：定义列的宽度。
- grid-template-rows：定义行的高度。
- grid-template-areas：定义区域名称。
- grid-template：定义列和行的宽度和高度。
- grid-gap：定义网格之间的间距。
- justify-items：定义主轴对齐方式。
- align-items：定义交叉轴对齐方式。
- place-items：定义主轴和交叉轴的对齐方式。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto auto;
            grid-gap: 10px;
            background-color: #eee;
            padding: 10px;
        }

        .grid-item {
            background-color: #ccc;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">项目1</div>
        <div class="grid-item">项目2</div>
        <div class="grid-item">项目3</div>
        <div class="grid-item">项目4</div>
        <div class="grid-item">项目5</div>
        <div class="grid-item">项目6</div>
    </div>
</body>
</html>

媒体查询：
- @media：针对不同设备进行布局调整。
- min-width 和 max-width：定义最小和最大宽度。
- min-device-width 和 max-device-width：定义最小和最大设备宽度。
- orientation：定义设备的方向。
- resolution：定义屏幕分辨率。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <style>
        body {
            font-size: 16px;
            background-color: #eee;
        }

        @media screen and (max-width: 600px) {
            body {
                font-size: 14px;
            }
        }

        @media screen and (min-width: 601px) and (max-width: 1024px) {
            body {
                font-size: 16px;
            }
        }

        @media screen and (min-width: 1025px) {
            body {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <p>这是文本内容。</p>
</body>
</html>

性能优化与调试技巧

代码优化策略

代码优化有助于提高网站的性能和用户体验。以下是一些常见的代码优化策略：

减少HTTP请求：
- 使用CSS Sprites。
- 使用图片拼接。
- 使用雪碧图。
- 减少外部资源的加载。

示例代码：

<!-- 使用CSS Sprites -->
<style>
    .sprite {
        background-image: url('sprite.png');
        background-position: 0 0;
    }
</style>
<img class="sprite" src="sprite.png" />

<!-- 使用图片拼接 -->
<img src="image1.png" />
<img src="image2.png" />
<img src="image3.png" />

压缩和合并文件：
- 合并CSS和JavaScript文件。
- 使用Gzip压缩文件。

示例代码：

<!-- 合并CSS文件 -->
<link rel="stylesheet" href="styles.min.css" />

<!-- Gzip压缩文件 -->
<link rel="stylesheet" href="styles.min.css.gz" />

使用CDN：
- 从CDN加载外部资源。
- 使用CDN缓存文件。

示例代码：

<!-- 从CDN加载jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

使用懒加载：
- 懒加载图片。
- 懒加载脚本和样式。

示例代码：

<!-- 懒加载图片 -->
<img src="loading.gif" data-src="image.png" />

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let images = document.querySelectorAll("img[data-src]");
        images.forEach(img => {
            let observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        let img = entry.target;
                        let src = img.getAttribute("data-src");
                        img.setAttribute("src", src);
                        observer.unobserve(img);
                    }
                });
            });
            observer.observe(img);
        });
    });
</script>

减少重绘和重排：
- 避免频繁修改DOM。
- 使用CSS Transitions。
- 使用requestAnimationFrame。

示例代码：

<!-- 使用CSS Transitions -->
<div id="box" ></div>

<script>
    let box = document.getElementById("box");

    box.style.width = "200px";
</script>

常见调试工具使用

调试工具可以帮助开发者查找和修复代码中的错误。

Chrome DevTools：
- 使用Console来查看和调试JavaScript代码。
- 使用Elements来检查和修改HTML和CSS。
- 使用Network来查看网络请求和响应。
- 使用Performance来分析性能瓶颈。
- 使用Sources来设置断点和调试JavaScript代码。

示例代码：

console.log("这是一条调试信息。");
console.error("这是一条错误信息。");
console.warn("这是一条警告信息。");

#box {
    width: 100px;
    height: 100px;
    background-color: red;
}

<div id="box"></div>

前端框架与库介绍

Vue.js基础使用

Vue.js是一个用于构建用户界面的渐进式框架，支持渐进式开发，可以部分替换DOM，也可以轻松集成到大型应用项目中。

安装与引入

Vue.js可以通过CDN引入或通过npm安装。

CDN引入：
- 在HTML文件中引入Vue.js。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            }
        });
    </script>
</body>
</html>

npm安装：
- 使用npm安装Vue.js。
- 在项目中使用Vue.js。

示例代码：

npm install vue

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render: h => h(App)
});

基本概念

Vue.js主要由以下几个核心概念构成：

组件：
- 通过<template>、<script>和<style>标签定义。
- 使用props传递数据。
- 使用methods定义方法。
- 使用computed计算属性。
- 使用events发送事件。

示例代码：

<template>
    <div>
        <h1>{{ message }}</h1>
        <button @click="greet">点击我</button>
    </div>
</template>

<script>
export default {
    props: {
        message: String
    },
    methods: {
        greet() {
            console.log("按钮被点击了。");
        }
    }
}
</script>

<style>
div {
    background-color: #eee;
    padding: 10px;
}
</style>

指令：
- v-on：绑定事件处理器。
- v-bind：绑定属性或绑定内联样式。
- v-model：双向绑定输入框。
- v-show 和 v-if：条件渲染。

示例代码：

<div v-on:click="greet">点击我</div>
<div v-bind:class="{ active: isActive }">显示/隐藏</div>
<input v-model="message" />
<div v-show="display">显示</div>
<div v-if="display">显示</div>

生命周期钩子：
- beforeCreate：实例初始化之前。
- created：实例初始化之后。
- beforeMount：挂载元素之前。
- mounted：挂载元素之后。
- beforeUpdate：更新实例之前。
- updated：更新实例之后。
- beforeDestroy：销毁实例之前。
- destroyed：销毁实例之后。

示例代码：

export default {
    beforeCreate() {
        console.log("实例初始化之前。");
    },
    created() {
        console.log("实例初始化之后。");
    },
    beforeMount() {
        console.log("挂载元素之前。");
    },
    mounted() {
        console.log("挂载元素之后。");
    },
    beforeUpdate() {
        console.log("更新实例之前。");
    },
    updated() {
        console.log("更新实例之后。");
    },
    beforeDestroy() {
        console.log("销毁实例之前。");
    },
    destroyed() {
        console.log("销毁实例之后。");
    }
}

React.js基础使用

React.js是由Facebook开发的一个用于构建用户界面的库，支持虚拟DOM，能够大幅提高渲染性能。

安装与引入

React.js可以通过CDN引入或通过npm安装。

CDN引入：
- 在HTML文件中引入React.js。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, React!</h1>,
            document.getElementById('app')
        );
    </script>
</body>
</html>

npm安装：
- 使用npm安装React.js。
- 在项目中使用React.js。

示例代码：

npm install react react-dom babel-preset-react

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, React!</h1>,
    document.getElementById('app')
);

基本概念

React.js主要由以下几个核心概念构成：

组件：
- 通过class或function定义。
- 使用props传递数据。
- 使用state维护组件状态。
- 使用setState更新状态。
- 使用render渲染组件。

示例代码：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Hello, React!'
        };
    }

    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
                <button onClick={() => this.setState({ message: '你好，React!' })}>点击我</button>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

生命周期方法：
- componentWillMount：组件挂载之前。
- componentDidMount：组件挂载之后。
- componentWillUnmount：组件卸载之前。
- componentWillReceiveProps：在接收到新的props时调用。
- shouldComponentUpdate：决定组件是否需要更新。
- componentWillUpdate：组件更新之前。
- componentDidUpdate：组件更新之后。

示例代码：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Hello, React!'
        };
    }

    componentDidMount() {
        console.log("组件挂载之后。");
    }

    componentWillUnmount() {
        console.log("组件卸载之前。");
    }

    componentWillReceiveProps(nextProps) {
        console.log("接收到新的props。");
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextState.message !== this.state.message;
    }

    componentWillUpdate(nextProps, nextState) {
        console.log("组件更新之前。");
    }

    componentDidUpdate(prevProps, prevState) {
        console.log("组件更新之后。");
    }

    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
                <button onClick={() => this.setState({ message: '你好，React!' })}>点击我</button>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

实战案例与项目分享

小项目实战演练

这里提供一个简单的项目案例，通过这个案例可以了解从需求分析到实现的整个过程。

项目需求

制作一个简单的待办事项（To-Do List）应用。应用具有以下功能：

添加新的待办事项。
显示所有待办事项。
删除待办事项。
标记待办事项为已完成。
搜索待办事项。

项目实现

HTML结构：
- 定义输入框和按钮。
- 定义待办事项列表。
- 定义搜索框。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>待办事项应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <input type="text" id="new-task" placeholder="输入待办事项...">
        <button id="add-task">添加</button>
        <ul id="task-list"></ul>
        <input type="text" id="search-task" placeholder="搜索待办事项..." />
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS样式：
- 定义容器样式。
- 定义输入框和按钮样式。
- 定义待办事项列表样式。

示例代码：

.container {
    width: 300px;
    margin: 0 auto;
}

#new-task, #search-task {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#add-task {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#task-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#task-list li {
    background-color: #eee;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
}

#task-list li.completed {
    text-decoration: line-through;
}

JavaScript逻辑：
- 添加新的待办事项。
- 显示所有待办事项。
- 删除待办事项。
- 标记待办事项为已完成。
- 搜索待办事项。

示例代码：

let tasks = [];

function addTask() {
    let taskInput = document.getElementById("new-task");
    let taskText = taskInput.value.trim();

    if (taskText) {
        tasks.push({
            id: Date.now(),
            text: taskText,
            completed: false
        });

        displayTasks();
        taskInput.value = "";
    }
}

function displayTasks() {
    let taskList = document.getElementById("task-list");

    taskList.innerHTML = "";

    tasks.forEach(task => {
        let li = document.createElement("li");
        li.id = task.id;
        li.className = task.completed ? "completed" : "";
        li.textContent = task.text;
        li.addEventListener("click", toggleTask);
        taskList.appendChild(li);
    });
}

function deleteTask(event) {
    let taskId = event.target.id;
    tasks = tasks.filter(task => task.id !== taskId);
    displayTasks();
}

function toggleTask(event) {
    let taskId = event.target.id;
    tasks = tasks.map(task => {
        if (task.id === taskId) {
            task.completed = !task.completed;
        }
        return task;
    });

    displayTasks();
}

function searchTasks(event) {
    let searchInput = document.getElementById("search-task");
    let searchTerm = searchInput.value.trim().toLowerCase();

    let filteredTasks = tasks.filter(task => task.text.toLowerCase().includes(searchTerm));
    displayTasks(filteredTasks);
}

document.getElementById("add-task").addEventListener("click", addTask);
document.getElementById("search-task").addEventListener("input", searchTasks);

运行和测试

在浏览器中打开HTML文件，检查是否能够正常添加、删除、标记和搜索待办事项。

项目分享

项目结构：
- index.html：HTML文件。
- styles.css：样式文件。
- app.js：JavaScript逻辑文件。
源代码仓库：
- 可以将项目上传到GitHub或其他代码托管平台，方便分享和协作。

面试经验分享

面试时，除了技术知识外，面试官还会考察面试者的沟通能力、解决问题的能力和团队协作能力。以下是一些面试经验分享：

技能准备

扎实的技术基础：
- 掌握前端基础知识，包括HTML、CSS和JavaScript。
- 熟悉前端框架和库，如Vue.js和React.js。
- 了解前端性能优化和调试技巧。
项目经验：
- 准备几个自己参与过的项目案例。
- 了解项目的背景、目标、技术栈和自己负责的部分。
解决实际问题的能力：
- 准备一些自己解决过的实际问题的案例。
- 了解解决问题的思路和方法。

面试技巧

准备面试问题：
- 预先准备一些常见的面试问题。
- 准备一些自己熟悉的项目案例。
- 准备一些技术问题的答案。
展示自己的优势：
- 强调自己的技能和经验。
- 强调自己的学习能力和适应能力。
- 强调自己的团队协作能力和沟通能力。
练习面试模拟：
- 可以找朋友或同事进行面试模拟。
- 可以在编程学习网站或论坛上进行面试模拟。
保持自信和积极的态度：
- 面试时要保持自信和积极的态度。
- 面试时要保持专注和认真。
- 面试时要保持礼貌和尊重。

结束语

面试是双向选择的过程，面试官也在考察面试者是否适合这个团队。因此，除了展示自己的技能和经验外，还要展示自己的团队协作能力和沟通能力，以及自己的学习能力和适应能力。