2018前端面试题

⚙️ HTML5新特性与语义化标签

在2018前端面试题中，HTML5新特性是高频考点。面试官通常会询问你对HTML5新增语义化标签的理解，如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。这些标签不仅有助于SEO优化，还能提升代码的可读性和可维护性。

语义化标签的优势：

• 提升代码可读性和可维护性
• 有利于搜索引擎优化（SEO）
• 增强无障碍访问（Accessibility）支持
• 统一代码结构，便于团队协作

<article>
  <header>
    <h1>文章标题</h1>
    <time datetime="2018-01-01">发布日期</time>
  </header>
  <p>文章内容...</p>
  <footer>
    <address>作者信息</address>
  </footer>
</article>

⚙️ CSS3布局技术与响应式设计

2018前端面试题中，CSS3布局技术是必考内容。Flexbox和Grid布局是现代CSS布局的核心，面试官经常要求你对比传统布局方式（如float、inline-block）与Flexbox、Grid的优劣。

Flexbox vs Grid 对比：

/ Flexbox 示例 /
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
/ Grid 示例 /
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

⚙️ 盒模型与BFC机制

盒模型是CSS基础中的基础，但在2018前端面试题中，面试官往往会深入询问盒模型的计算方式以及BFC（块级格式化上下文）的应用场景。

标准盒模型 vs IE盒模型：

• 标准盒模型：width只包含content
• IE盒模型：width包含content + padding + border
• 通过box-sizing属性可以切换盒模型

/ 全局使用标准盒模型 /
 {
    box-sizing: border-box;
}

BFC（Block Formatting Context）应用场景：

1. 清除浮动：父元素触发BFC可以包含浮动子元素
2. 防止margin重叠：相邻块级元素的margin会发生折叠
3. 阻止元素被浮动元素覆盖

/ 触发BFC的常见方式 /
.bfc {
    overflow: hidden;
    / 或 display: flex; /
    / 或 display: grid; /
    / 或 float: left; /
}

⚙️ 闭包与作用域链

闭包是JavaScript中最难理解的概念之一，也是2018前端面试题中的常客。闭包是指能够访问自由变量的函数，即函数和其词法环境的组合。

闭包的经典应用场景：

• 数据私有化：模拟私有变量
• 函数柯里化：参数复用
• 防抖与节流：性能优化
• 模块模式：代码组织

// 闭包示例：计数器
function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2

作用域链的理解：

JavaScript采用词法作用域（lexical scoping），变量的作用域在定义时就决定了，而不是在执行时。作用域链确保了内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

⚙️ 异步编程与Promise

2018前端面试题中，异步编程是重点考察内容。面试官通常会询问你对Promise、async/await的理解，以及如何处理异步错误。

Promise的状态转换：

• Pending（进行中）→ Fulfilled（已成功）
• Pending（进行中）→ Rejected（已失败）
• 一旦状态改变，就不会再变

// Promise基本用法
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const success = true;
        if (success) {
            resolve('操作成功');
        } else {
            reject(new Error('操作失败'));
        }
    }, 1000);
});
promise
    .then(result => console.log(result))
    .catch(error => console.error(error));
// async/await 用法
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}

⚙️ 原型链与继承

原型链是JavaScript面向对象编程的核心概念。2018前端面试题中，面试官经常要求你解释原型链的工作原理，并实现各种继承方式。

常见的继承方式：

1. 原型链继承
2. 构造函数继承
3. 组合继承
4. 原型式继承
5. 寄生组合式继承（最推荐）

// 寄生组合式继承
function inheritPrototype(subType, superType) {
    const prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
};
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function() {
    console.log(this.age);
};

⚙️ Webpack配置与优化

Webpack是2018年前端工程化的核心工具，2018前端面试题中经常考察Webpack的配置和优化技巧。

Webpack核心概念：

• Entry：入口文件
• Output：输出配置
• Loader：文件转换
• Plugin：功能扩展
• Module：模块管理

// webpack.config.js 示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    devServer: {
        port: 3000,
        hot: true
    }
};

⚙️ Babel转译配置

Babel是现代JavaScript开发的必备工具，2018前端面试题中经常考察Babel的配置和使用。

Babel核心配置：

• @babel/core：核心编译器
• @babel/preset-env：智能预设
• @babel/preset-react：React支持
• @babel/preset-typescript：TypeScript支持
• polyfill：兼容旧浏览器

// .babelrc 配置
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}