八股文 ｜ 前端通关手册：JavaScript

[toc]

如何自定义一个 webpack 插件？

• 声明一个自定义命名的类或函数
• 在原型中新增 apply 方法
• 声明由 Compiler 模块暴露的生命周期函数
• 使用 webpack 提供的 API 或 自行处理内部实例的数据
• 处理完成后，调用 webpack 提供的回调函数

示例：

实现一个 MyPlugin，获取指定图片，新增静态资源到本地

class MyPlugin { // 声明类
        apply(compiler) { // 新增 apply 方法
                // 声明生命周期函数
                compiler.hooks.additionalAssets.tapAsync('MyPlugin', (compilation, callback) => {
                        download('https://img.shields.io/npm/v/webpack.svg', res => {
                                if (res.status === 200) {
                                        // 调用 API
                                        compilation.assets['webpack-version.svg'] = toAsset(res)
                                        // 异步处理后，调用回调函数
                                        callback()
                                } else {
                                        callback(new Error('[webpack-example-plugin] Unable to download the image'))
                                }
                        })
                })
        }
}

Event Loop 的执行顺序？

宏任务

• Task Queue
• 常见宏任务：setTimeout、setInterval、setImmediate、I/O、script、UI rendering
  微任务
• Job Queue
• 常见微任务：
  • 浏览器：Promise、MutationObserver
  • Node.js：process.nextTick
    执行顺序
• 首先执行同步代码，宏任务
• 同步栈为空，查询是否有异步代码需要执行
• 执行所有微任务
• 执行完，是否需要渲染页面
• 重新开始 Event Loop，执行宏任务中的异步代码

如何实现一个组件，前端组件的设计原则是什么？

• 单一原则：一个组件只做一件事
• 通过脑图、结构图，标识组件的 State Props Methods 生命周期，表示层次和数据流动关系
• State 和 Props
  • 扁平化：最多使用一层嵌套，便于对比数据变化，代码更简洁
  • 无副作用：State 仅响应事件，不受其他 State 变化影响
• 松耦合
  • 组件应该独立运行，不依赖其它模块
• 配置、模拟数据、非技术说明文档、helpers、utils 与 组件代码分离
• 视图组件只关心 视图，数据获取，过滤，事件处理应在外部 JS 或 父组件 中处理
• Kiss原则（Keep it Simple Stupid）
  • 不需要 State 时，使用 函数组件
  • 不要传递不需要的 Props
  • 及时抽取复杂组件为独立组件
  • 不要过早优化
• 参考 CSS 的 OOSS 方法论，分离 位置 和 样式，利于实现皮肤
• 考虑 多语言、无障碍 等后期需求

本篇内容节选自《前端通关手册：JavaScript》