shaun-shao-CSDN博客

feat：提交新的功能，记忆：featurefix：解决了bugdocs：修改的是文档相关的内容，记忆：documentationstyle：格式修改，没有修改代码逻辑，比如格式化、换行等refactor：重构代码，既没有新增功能，也没有修复bug，比如提取某段代码为一个方法、重构某个功能perf：性能、体验优化等，记忆：performance性能test：新增test用例或修改现有测试用例chore：构建过程或辅助工具的变动，非src和test的修改，比如构建流程, 依赖管理等...

2022-04-07 10:35:12 234

原创【算法题】如何判断两个 DOM 节点是否为父子关系？

好像很无聊的一道题，但真就在业务场景中遇到了，你说难搞不难搞。要是觉得啰嗦，直接看结尾吧先聊聊背景有一个 Menu 组件，当你点击后会高亮，并且需要获取里面的文字，比如「全部」、「装机必备」、「图标」它的 HTML 结构不难想象，一个 DIV 里包着三个元素 —— SVG、文本和数字。写法很多，我简单写个通用的。<div id="parent"> <div id="svg"> <svg>...</svg> </div>

2022-03-17 00:51:17 1523 2

原创【实习日记】在对话框中写一个表单

页面大概是下面这个样子说说其中几个遇到的难点吧（东西不难，我太菜了）antd 样式和布局不好改，直接修改 style 属性代码会变得臭长；文件上传，设为自定义上传后进度条没了；活动图标下拉框的书写，比较绕；antd 自己维护表单数据，有时数据可能更新但不会触发页面重渲染解决思路：antd 样式使用 style 标签修改，布局搭配 css-in-module 单独处理这里文件上传只拿到一个 File 对象，最后提交的时候一块放到 FormData 中（不过还没和后端联调，后续未知）。

2022-03-12 12:43:51 1834 3

原创【前端面试】—— Git 使用

《图解 Git》diff查看两次提交之间的变动git diff 工作目录和暂存区git diff --cached 暂存区和 HEAD 指向的提交git diff [hash1] [hash2] 两次提交的 hash 值git diff [branchName] 工作区和分支checkout从历史提交（或者暂存区域）中拷贝文件到工作目录，也可用于切换分支。当给定某个文件名时（git checkout HEAD~ foo.js），git 会从指定的提交中拷贝文件到暂存区和工作区当不.

2022-03-05 23:24:46 139

翻译 chrome扩展官方文档（中文版）—— chrome 扩展的新功能

传送门：chrome扩展官方文档（中文版）原文地址：What’s new in Chrome extensionsChrome扩展有什么新功能发布于 2021 年 2 月 25 日，星期四 • 更新于 2022 年 2 月 17 日，星期四经常检查这个页面来了解关于 Chrome 扩展平台的变化，它的文档和相关的策略或其他变化。Chrome 100：本地消息端口使 service worker 保持活跃2022 年 2 月 9 日在扩展的 service worker 中使用 chro.

2022-03-02 00:56:22 6219

翻译 chrome扩展官方文档（中文版）—— 开始

传送门：chrome扩展官方文档（中文版）原文地址：Welcome欢迎了解如何为 Chrome 开发扩展2020 年 11 月 9 日，星期一发布这些页面包含想要创建 Chrome 浏览器扩展的开发人员的指南和参考信息。如果你不确定从哪里开始，看看下面的起始页：扩展是什么？单纯帮助您理解什么是扩展。如果你准备好上手 hello world，这是入门教程。除此之外，你可能会在这些页面中找到有用的入口:在扩展开发概述中了解事情的范围（scope of things）从示.

2022-03-01 23:12:30 7837

原创 chrome扩展官方文档（中文版）

译者注这里是 chrome 扩展官方文档中文翻译版本，对应版本号「Manifest V3」。文章都是博主自个翻译校对的，方便大家学习。⚠️ 再次说明！文章翻译的的 Manifest 版本为 V3，因为 MV2 再过一年将全面淘汰，具体描述请看下图（摘自官方文档）目录欢迎chrome 扩展的新功能开始介绍 Manifest V3概述API 参考示例开发扩展和主题进阶：核心概念进阶：安全进阶：更多主题改进你的扩展最佳实践发布你的扩展Manifest V2...

2022-03-01 22:04:43 9618 7

原创【实习日记】SEO 优化和系统升级弹窗

第一次来北京实习，入职也有一周半了。2 月 14 号，情人节当天独自一人从家里来到北京，15 号又是元宵，两天时间简单拼凑了一些家具，躺到周三准备办入职手续。入职的头几天老板让学 chrome 扩展，自己看着英文文档一边看一遍敲。可能是自己英文阅读慢了点，又或者文档有点太过“字典”了？总之看了两天左右时间吧，还是没怎么会用…就这么糊里糊涂地过了一周。21 号新一周的周一，当时还在看文档，突然一个运营同学窗口我，想和我对接一下 SEO 优化的需求。我甚为震惊！之前也没搞过这个啊，那我岂不是得现学现用吗？且

2022-02-27 21:31:25 459

原创【前端面试】—— 浏览器

DOMContentLoaded 和 load 事件load事件：load 应该仅用于检测一个完全加载的页面当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded

2022-02-11 15:30:49 464

原创尾调用优化 JavaScript 递归

'use strict'// function fib(n) {// if (n < 2) return n// return fib(n - 1) + fib(n - 2)// }function fib(n) { return calcFib(0, 1, n)}function calcFib(a, b, n) { if (n === 0) return a return calcFib(b, a + b, n - 1)}console.log(

2022-02-08 13:06:05 320

原创【前端面试】—— webpack（一）

说说 webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。能力：代码编译，解决浏览器兼容问题模块整合，解决浏览器频繁请求文件问题，所有资源都可以通过代码控制说说 webpack 构建流程webpack 构建流程是一个将各插件串联的

2022-02-08 13:01:55 708

原创【前端面试】—— React

setState 是同步还是异步的不同模式下情况不同，legacy 模式命中 batchUpdates 时异步，未命中 batchUpdates 时同步，concurrent 模式都是异步异步。每次改变 state 都会造成 render 的重渲染，将多次修改的 state 合并到一起可以提高效率和性能；render 阶段会比较慢，但是 commit 很快。如果 render 中有子组件，子组件的 props 依赖父组件的 state，props 和 state 就不能保持一致如何获取异步时的

2022-02-08 13:01:25 466

原创【前端面试】—— JavaScript（三）

说说 ES6 新增的东西变量声明：let 和 const作用域var 作用域为全局和函数作用域；let、const 还包括块作用域变量提升var 声明的变量会被提升到作用域顶部，未赋初始值默认为 undefined；let、const 声明变量的前部分属于“暂时性死区”，任何访问改变量的操作都会报错；重复声明var 可以多次声明同一个变量；let、const 不可以顶层对象var 声明的变量可以被顶层对象（global）访问；let、const 不行解构赋值

2022-02-03 18:07:55 790

原创《JavaScript 高级程序设计（第四版）》—— 07 迭代器与生成器

迭代迭代器模式：一种解决方案，无需知道如何迭代就能实现迭代操作。可迭代对象（Iterable）：一种数据结构，实现了 Iterable 接口。可以是字符串、数组、NodeList等内置类型，也可以是自定义迭代器。迭代器（Iterator）：Iterable 的实现方式，可以理解为一个实例对象。可迭代协议实现 Iterable 接口要求同时具备两种能力：支持迭代的自我识别能力和创建实现 Iterator 接口的对象的能力。在 ECMAScript 中暴露一个属性作为“默认迭代器”，这个属性必须使用特

2022-01-09 16:28:33 256

原创《JavaScript 高级程序设计（第四版）》—— 06 集合引用类型

Array给 Array 构造函数传数值会创建初始 length 为 n 的数组ES6 新增创建数组静态方法：from() —— 将类数组转换成数组实例of() —— 将一组参数转换成数组实例console.log(Array.from('Shaun')) // [ 'S', 'h', 'a', 'u', 'n' ]使用 length 属性可以方便地向数组末尾添加元素。因为每当一个新索引超过数组最大索引，数组长度会自动扩展到该索引值加 1let colors = ['red', '

2022-01-08 21:50:43 541

原创《JavaScript 高级程序设计（第四版）》—— 05 基本引用类型

理解对象对象是某个特定应用类型的实例。新对象通过使用 new 操作符后面跟一个构造函数来创建。let now = new Date()ECMAScript 提供了很多像 Date 这样的原生引用类型Datenew Date() 创建的对象保存当前日期和时间，要基于其他日期和时间，必须传入其毫秒表示。字符串默认会在后台调用 Date.parse()。Date.parse() —— 尝试转换一个表示日期的字符串参数ISO 8601扩展格式 “YYYY-MM-DDTHH:mm:ss.sssZ

2022-01-08 14:40:07 431

原创《JavaScript 高级程序设计（第四版）》—— 04 变量、作用域与内存

动态属性原始类型（Number、String、Boolean）的初始化可以只是用字面量形式；如果使用 new 关键字，js 会创建一个 Object 类型的字面量，但其行为类似原始值let name1 = 'shaun'let name2 = new String('shao')name1.age = 23name2.age = 24name1.age // undefinedname2.age // 24typeof name1 // stringtypeof nam

2022-01-04 15:06:42 349 2

原创《HTTP 权威指南》—— 05 Web 服务器

对多种使用不同类型软硬件的 Web 服务器进行调查介绍如何使用 Perl 编写简单的诊断性 Web 服务器一步一步地解释 Web 服务器是如何处理 HTTP 事务的实现形式通用的软件 Web 服务器（Apache、Jigsaw）Web 服务器设备（解决方案）嵌入式 Web 服务器处理事务建立连接接受请求，将部分报文临时存储在内存中直到解析完成处理请求访问资源构建响应，创建带有正确首部（Content-Type、Content-Length）的 HTTP 响应报文。重定向应该.

2022-01-02 23:33:02 1158

原创《JavaScript 高级程序设计（第四版）》—— 语言基础

标识符变量、函数、属性或函数参数的名称第一个字符必须是字母，下划线（_）或美元符号（$）剩下的其他字符可以是字母、下划线、美元符号或数字var、let 和 constvar 变量的作用域包括函数和全局，let 还有块级作用域；在函数内定义变量省略操作符会创建一个全局变量；var 声明变量存在声明提升，let 在声明之前存在“暂时性死区”，任何引用 let 声明的变量都会抛出错误；在浏览器中 var 声明的变量会成为 window 对象的属性，let 不会；var 允许重复声明，let

2022-01-02 20:31:50 398

原创《JavaScript 高级程序设计（第四版）》—— HTML 中的 JavaScript

2022-01-02 17:08:01 286

原创《HTTP 权威指南》—— 连接管理

HTTP 是如何使用 TCP 连接的TCP 连接的时延、瓶颈以及存在的障碍HTTP 的优化，包括并行连接、keep-alive（持久连接）和管道化连接管理连接时应该以及不应该做的事HTTP 是如何使用 TCP 连接的客户端取得服务端的 IP 和端口号后建立 TCP 连接。TCP 连接的时延、瓶颈以及存在的障碍在串行事务中，每个事务都需要一条新的连接，连接时延（请求-响应之间的空隙）就会叠加起来。# HTTP 的优化并行连接允许客户端打开多条连接，并行执行多个 ..

2022-01-01 19:37:22 1232

原创《JavaScript 高级程序设计（第四版）》—— 什么是 JavaScript

合集：JavaScript 高级程序设计（第四版）JavaScript 实现JavaScript=ECMAScript+DOM+BOMJavaScript = ECMAScript + DOM + BOMJavaScript=ECMAScript+DOM+BOMECMAScript 是一门规范，定义了语言的基准，包括语法、类型、语句、关键字、保留字、操作符、全局对象DOM 是一个 API，用于在 HTML 中使用可扩展的 XMLBOM 是一个 API，用于访问和操作浏览器的窗口，操控浏览器显.

2021-12-31 14:44:53 168

原创《JavaScript 高级程序设计（第四版）》

第 1 章什么是 JavaScript第 2 章 HTML 中的 JavaScript第 3 章语言基础

2021-12-31 12:50:14 630

原创一个错误引发的对 interface 和 type 的思考（未完）

背景如果你报的错误和我一样，或者对错误发生的原因感兴趣，可以接着往下看。我的需求是希望继承 CSSTransitionProps 来实现自定义组件的属性，可是他报了错。An interface can only extend an object type or intersection of object types with statically known members.搜了一个较为满意的答复A class can implement an interface or type ali

2021-12-26 23:17:48 1162

原创用 TS 实现一个基本的文件上传

import React from 'react';import axios from 'axios';function App() { const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const files = e.target.files if (files) { const uploadedFile = files[0] const for

2021-12-23 20:14:24 3067

原创【前端面试】—— Vue（二）

动态路由和嵌套路由能讲一讲吗？动态路由和嵌套路由是 Vue Router 当中的两种用法。其中动态路由是针对不同路由映射到同个组件这种情况。比如有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么就可以使用动态路由参数（:paramName）来标记，在组件中用 this.$route.params.paramName 拿到参数。另外，如果 userId 是不存在的，还需要做定义一个全局前置守卫来拦截，用next()方法跳转到一个指定页面，比如404。嵌套路由有一个 ch

2021-11-26 20:47:04 501

原创【前端面试】—— 杂项

如何看代了解、熟悉、精通的？了解：会使用或者用过，了解其思想，简单阅读过该技术的文档或者相关文章，知道这么个东西熟悉：有大量实践，深入了解过原理，甚至阅读过源码，遇到复杂问题能够快速想出解决方案，他人提出问题时，可以快速想到答案或者思路精通：深入理解原理，大量复杂场景实践经验，大量相关源码经验，可以指导他人...

2021-11-26 20:45:12 149

原创《了不起的 JavaScript 工程师 - 电子书》

JavaScript 引擎机制多线程中较麻烦的问题是“死锁”（多个线程占用对方资源且不释放）和“惊群”（多个线程响应同一个问题）。为了降低浏览器多线程的复杂度，避免 JavaScript 引擎和渲染引擎同时操作 DOM，浏览器设计了一种机制，在某一时刻只有一个线程可以操作 DOM，也就是说 JavaScript 引擎和渲染引擎（内核）会互相阻塞。如果页面引用的 js 文件执行时间较长，或由于网络原因造成下载 js 文件时间太长，那么浏览器会长时间出于白屏状态，造成较差的用户体验。这也是把 script

2021-11-26 12:04:29 434

空空如也

空空如也