<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[HanpengChen的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Hampton_Chen</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Hampton_Chen]]></copyright><item><title><![CDATA[vue-router使用history模式配置说明]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/127997263</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/127997263</guid><author>Hampton_Chen</author><pubDate>Wed, 23 Nov 2022 11:31:30 +0800</pubDate><description><![CDATA[vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。})当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。]]></description><category></category></item><item><title><![CDATA[一文学会Vue3新特性]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/121932605</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/121932605</guid><author>Hampton_Chen</author><pubDate>Tue, 14 Dec 2021 17:26:43 +0800</pubDate><description><![CDATA[原文：一文学会Vue3新特性
公众号：前端极客技术

Vue3.0 周边生态现在已经完善得差不多了，新项目可以开始使用Vue3来开发了，今天我们先来学习Vue3的一些新特性。
Composition API
为什么选择Composition API
Composition API翻译成中文就是组合式API。有的人可能会疑惑为什么要用Composition API？原来Vue2中的options API不是也能实现吗？
我们先来Vue3官方文档中的例子：
假设我们的应用中有一个显示某个用户的仓库列表的视图。.]]></description><category></category></item><item><title><![CDATA[学习Vue前你需要了解defineProperty和Proxy]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/120131078</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/120131078</guid><author>Hampton_Chen</author><pubDate>Mon, 06 Sep 2021 11:50:47 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
原文：学习Vue源码前需要了解的defineProperty和Proxy

前言
大家有使用Vue开发想必对响应式都有了解，知道Vue2是用Object.defineProperty实现数据劫持，进而实现的双向绑定。在已经发布快一年的Vue3中，数据响应式的实现由Object.defineProperty API改成了Proxy API。
接下来我们一起来看看这两个API的基本用法。
defineProperty
Object.defineProper.]]></description><category></category></item><item><title><![CDATA[「高频面试题」浏览器从输入url到页面展示中间发生了什么]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/117126195</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/117126195</guid><author>Hampton_Chen</author><pubDate>Fri, 21 May 2021 16:22:30 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：「高频面试题」浏览器从输入url到页面展示中间发生了什么 | 代码视界

“在浏览器中，从输入URL到页面展示，中间发生了什么？”这是一道经典的高频面试题，其中涉及了网络、操作系统、web等一系列的知识。接下来我们一起来看看要怎么回答这道题。
整个过程可以大致描述为：
URL解析
用户输入URL，浏览器会根据用户输入的信息判断是搜索内容还是请求的URL。如果是搜索内容，就将搜索内容+默认搜索引擎来合成新的带搜索关键字的URL。如果判断.]]></description><category></category></item><item><title><![CDATA[「面试必备」一文吃透JavaScript继承]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/117084128</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/117084128</guid><author>Hampton_Chen</author><pubDate>Thu, 20 May 2021 17:17:29 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：「面试必备」一文吃透JavaScript继承 | 代码视界

继承在各种编程语言中都充当着至关重要的角色，在JavaScript中也被经常用在前端工程基础库的底层搭建上，是JavaScript需要重点学习的一块内容。
继承可以使得子类具有父类的各种方法和属性。ES6中推出了class这个概念，方便了我们学习和理解，但class只是一个语法糖，实际底层的实现还是原来的那一套：利用原型链和构造函数来实现继承，接下来我们一起来看看在Java.]]></description><category></category></item><item><title><![CDATA[2021年前端必读书籍推荐]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/116904076</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/116904076</guid><author>Hampton_Chen</author><pubDate>Sun, 16 May 2021 22:05:53 +0800</pubDate><description><![CDATA[HTML和CSS书籍推荐
《Head First HTML与CSS(第2版)》
豆瓣评分 9.2。是前端入门的经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。前端初学者首选书籍。
《精通CSS：高级Web标准解决方案(第3版)》
豆瓣评分 7.6。前端大神Winter在最近公开推荐过这本书，将它和《JavaScript高级程序设计（第3版）》列为前端必读。书中介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧，并讨论了如何实现稳健、灵活、无障碍访问的Web设计，以及在技术层面如何]]></description><category></category></item><item><title><![CDATA[【必学系列】JavaScript中的数据结构——栈和队列]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762895</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762895</guid><author>Hampton_Chen</author><pubDate>Sun, 25 Apr 2021 11:10:18 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：JavaScript中的数据结构——栈和队列 | 代码视界

在前面 JavaScript中的数据结构——链表 一文中，我们学习了链表。今天我们一起来学习另外两种数据结构：栈和队列。
栈(Stack)
定义
栈是一种特殊的列表，限定仅在表尾进行插入和删除操作的线性表。表尾这一端我们称为栈顶，相对地，把另一端称为栈底。
栈遵循后进先出（LIFO）原则进行存储数据，先进入的数据被压入栈底，最后进入的数据在栈顶，需要读取数据的时候从栈顶开始.]]></description><category></category></item><item><title><![CDATA[【必学系列】JavaScript中的数据结构—链表]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762828</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762828</guid><author>Hampton_Chen</author><pubDate>Fri, 23 Apr 2021 17:10:49 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：[JavaScript中的数据结构—链表 | 代码视界](http://www.chenhanpeng.com/javascript-linked-list/ 前)

前言
数据结构与算法在前端开发工程师的日常工作中也许不常用，但在这对前端工程师要求日益提高的时代，如果对数据结构、算法思维、代码效率等知识拥有足够的储备，那么我们将拥有更强的竞争力。
话不多说，我们接下来学习一种数据结构：链表(Linked list)。
链表
数组对于.]]></description><category></category></item><item><title><![CDATA[聊一聊浏览器本地存储]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762235</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762235</guid><author>Hampton_Chen</author><pubDate>Wed, 21 Apr 2021 08:57:17 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：聊一聊浏览器本地存储 | 代码视界

前言
作为一名前端工程师，我们每天都在跟浏览器打交道，浏览器的本地存储更是经常用到。今天我们就一起来聊一聊浏览器的本地存储。
浏览器的本地存储主要分为：Cookie、 WebStorage、 IndexedDB。其中WebStorage又可以分为localStorage和sessionStorage。
Cookie
HTTP Cookie，通常叫做Cookie，一开始是在客户端用于存储会话信息的。.]]></description><category></category></item><item><title><![CDATA[JavaScript设计模式—单例模式]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762287</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762287</guid><author>Hampton_Chen</author><pubDate>Mon, 19 Apr 2021 21:31:03 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：JavaScript设计模式—单例模式 | 代码视界

在上一篇文章《JavaScript设计模式——工厂模式》中我们一起学习了工厂模式，接下来我们一起来学习另一种设计模式——单例模式。
定义
单例模式：保证一个类只有一个实例，并提供一个访问它的全局访问点。无论创建多少次，都只返回第一次所创建的那唯一的一个实例。
单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景。

欢迎关注我的微信公众号：前端极客技术(FrontGeek).]]></description><category></category></item><item><title><![CDATA[JavaScript设计模式——工厂模式]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762362</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115762362</guid><author>Hampton_Chen</author><pubDate>Sat, 17 Apr 2021 17:08:38 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：JavaScript设计模式——工厂模式 | 代码视界

在瞬息万变的前端领域，技术更新迭代非常快，我们经常能在网络上看到诸如“学不动了”之类的言论。但是作为一名前端开发工程师，除了各种新技术，还有许多“一次学习，终身受益”的知识值得我们花时间去学习，设计模式就是其中之一。
设计模式
在学习设计模式之前，我们先要知道什么是设计模式。
我们先来看下维基百科上关于设计模式的定义：

在软件工程中，设计模式（design pattern）是.]]></description><category></category></item><item><title><![CDATA[前端性能指标：白屏和首屏时间的计算]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115761889</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115761889</guid><author>Hampton_Chen</author><pubDate>Fri, 16 Apr 2021 15:14:25 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：前端性能指标：白屏和首屏时间的计算|代码视界

前言
页面性能优化是前端开发中一个重要的环节，而评判前端性能的优劣有两个比较经常听说的指标：白屏时间和首屏时间。
接下来我们一起来看看什么是白屏时间和首屏时间，如何去计算。
什么是白屏和首屏时间
白屏时间(FP)
白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。

白屏时间 = 页面开始展示的时间点 - 开始请求的时间点

首屏时间(FC.]]></description><category></category></item><item><title><![CDATA[一文彻底掌握HTTP缓存]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115761753</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115761753</guid><author>Hampton_Chen</author><pubDate>Fri, 16 Apr 2021 15:11:49 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：一文彻底掌握HTTP缓存|代码视界

缓存，作为性能优化的最有效方法之一，在面试过程中经常被问到，作为一名开发人员，缓存是必须掌握的一块知识。
浏览器缓存机制有四个方面：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。
对于前端开发工程师来说，比较熟悉的就是HTTP缓存，这也是每一个前端工程师都要掌握的知识点，下面我们一起来学习HTTP缓存，争取通过这篇文章就彻底掌握HT.]]></description><category></category></item><item><title><![CDATA[一文掌握9大跨域解决方案]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115761278</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/115761278</guid><author>Hampton_Chen</author><pubDate>Fri, 16 Apr 2021 15:09:11 +0800</pubDate><description><![CDATA[作者：Hanpeng_Chen
公众号：前端极客技术
文章首发个人博客：代码视界-一文掌握9大跨域解决方案

什么是跨域
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。通常我们讲的跨域，是由浏览器同源策略限制的一类请求场景。
同源策略
同源指的是两个URL的协议、域名和端口三者都相同，即使两个不同 的域名指向相同的IP地址，也非同源。
同源策略(SOP:Same origin policy)是浏览器的一套基础的安全策略制约，用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行.]]></description><category></category></item><item><title><![CDATA[聊一聊JavaScript类型判断的四种方法]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/114265067</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/114265067</guid><author>Hampton_Chen</author><pubDate>Mon, 01 Mar 2021 16:11:19 +0800</pubDate><description><![CDATA[前言
在web开发中，我们经常碰到需要判断数据是数字还是字符串，判断是数组还是对象的场景，接下来我们一起来看看JavaScript中都有哪些方法可以判断数据类型。

欢迎关注我的微信公众号：前端极客技术(FrontGeek)

typeof
在JS中，我们最常用的判断方法自然是typeof。

typeof：是一元操作符，放在其单个操作数的前面，操作数可以是任意类型。返回值为表示操作数类型的一个字符串。

在ES5中，JavaScript有六种数据类型：Number、String、Boolean、Undef]]></description><category></category></item><item><title><![CDATA[这一次彻底掌握JavaScript的深浅拷贝]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/114264996</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/114264996</guid><author>Hampton_Chen</author><pubDate>Mon, 01 Mar 2021 16:10:08 +0800</pubDate><description><![CDATA[关于拷贝这个问题，也是前端面试中的一道经典面试题，我们在日常开发中也常碰到需要用到深拷贝或浅拷贝的场景。接下来我们通过这篇文章，彻底掌握JavaScript的深浅拷贝。
数据类型
在开始讲深浅拷贝之前，我们要先知道JavaScript的数据类型，主要有下图所示的8种：

Object是引用类型，其他7种为基础类型。
JavaScript的数据类型最后都会在初始化之后放在不同的内存中，因此上面的数据类型大致可以分为两类来进行存储：

基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量
引用类型存储]]></description><category></category></item><item><title><![CDATA[CSS面试题：什么是BFC？BFC有什么用？]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/112599163</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/112599163</guid><author>Hampton_Chen</author><pubDate>Thu, 14 Jan 2021 08:55:03 +0800</pubDate><description><![CDATA[BFC是之前前端面试中经常问到一个问题，这篇文章我们一起来学习BFC。
什么是BFC
BFC(Block Formatting Context)：快格式化上下文，是web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。它有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
快格式化上下文包含创建它的元素内部的所有内容。
具有BFC特性的元素我们可以将其看作隔离的独立容器，容器内的元素不会在布局上影响到容器外的元素，而且BFC具有普通容器所]]></description><category></category></item><item><title><![CDATA[JavaScript-数组乱序]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/107967140</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/107967140</guid><author>Hampton_Chen</author><pubDate>Wed, 12 Aug 2020 21:52:46 +0800</pubDate><description><![CDATA[前言
对数组进行排序对我们来说很容易就能够实现，但是你有考虑过如何对一个有序的数组实现乱序，即随机排序吗？
数组乱序在实际开发过程中是可能碰到的，下面我们一起看看如何实现数组乱序。

欢迎关注我的微信公众号：前端极客技术(FrontGeek)

sort + Math.random
我们一开始可能会想到利用数组的sort方法，判断随机出来的0-1的值与0.5的大小，实现排序。该方法实现如下：
var arr = [1, 2, 3, 4, 5, 6];

arr.sort(function(){
    re]]></description><category></category></item><item><title><![CDATA[JavaScript-数组扁平化]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/106876364</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/106876364</guid><author>Hampton_Chen</author><pubDate>Mon, 22 Jun 2020 08:58:06 +0800</pubDate><description><![CDATA[上一篇文章我们将JavaScript中数组的方法汇总了一下，本文我们一起来看看JavaScript数组常见的一个问题：数组扁平化。
什么是数组扁平化
数组扁平化：就是讲一个复杂的嵌套多层的数组，一层一层地转化为层级较少或者只有一层的数组。
下面我们通过实际例子来看看都有哪些解决方法：
let array = [1, [2, [3, [4, 5]]]]
// 需要将上面的array展开得到下面的一维数组
[1, 2, 3, 4, 5]


欢迎关注我的微信公众号：前端极客技术(FrontGeek)

flat]]></description><category></category></item><item><title><![CDATA[JavaScript-数组方法汇总]]></title><link>https://blog.youkuaiyun.com/Hampton_Chen/article/details/106780299</link><guid>https://blog.youkuaiyun.com/Hampton_Chen/article/details/106780299</guid><author>Hampton_Chen</author><pubDate>Tue, 16 Jun 2020 09:09:08 +0800</pubDate><description><![CDATA[valueOf()、toString()
valueOf()和toString()是JavaScript对象的通用方法。
valueOf()表示对该对象求值。不同的对象的valueOf方法不尽一致，数组的valueOf方法返回数组的本身。
let array = [1, 2, 3]
array.valueOf()    // [1, 2, 3]

let array1 = [1, 3, 3, 'a', [1, 2, 3]]
array1.valueOf()   // [1, 3, 3, 'a', [1, 2]]></description><category></category></item></channel></rss>