HanpengChen的博客

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。})当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。

原文：一文学会Vue3新特性公众号：前端极客技术Vue3.0 周边生态现在已经完善得差不多了，新项目可以开始使用Vue3来开发了，今天我们先来学习Vue3的一些新特性。Composition API为什么选择Composition APIComposition API翻译成中文就是组合式API。有的人可能会疑惑为什么要用Composition API？原来Vue2中的options API不是也能实现吗？我们先来Vue3官方文档中的例子：假设我们的应用中有一个显示某个用户的仓库列表的视图。.

作者：Hanpeng_Chen公众号：前端极客技术原文：学习Vue源码前需要了解的defineProperty和Proxy前言大家有使用Vue开发想必对响应式都有了解，知道Vue2是用Object.defineProperty实现数据劫持，进而实现的双向绑定。在已经发布快一年的Vue3中，数据响应式的实现由Object.defineProperty API改成了Proxy API。接下来我们一起来看看这两个API的基本用法。definePropertyObject.defineProper.

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：「高频面试题」浏览器从输入url到页面展示中间发生了什么 | 代码视界“在浏览器中，从输入URL到页面展示，中间发生了什么？”这是一道经典的高频面试题，其中涉及了网络、操作系统、web等一系列的知识。接下来我们一起来看看要怎么回答这道题。整个过程可以大致描述为：URL解析用户输入URL，浏览器会根据用户输入的信息判断是搜索内容还是请求的URL。如果是搜索内容，就将搜索内容+默认搜索引擎来合成新的带搜索关键字的URL。如果判断.

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：「面试必备」一文吃透JavaScript继承 | 代码视界继承在各种编程语言中都充当着至关重要的角色，在JavaScript中也被经常用在前端工程基础库的底层搭建上，是JavaScript需要重点学习的一块内容。继承可以使得子类具有父类的各种方法和属性。ES6中推出了class这个概念，方便了我们学习和理解，但class只是一个语法糖，实际底层的实现还是原来的那一套：利用原型链和构造函数来实现继承，接下来我们一起来看看在Java.

HTML和CSS书籍推荐《Head First HTML与CSS(第2版)》豆瓣评分 9.2。是前端入门的经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。前端初学者首选书籍。《精通CSS：高级Web标准解决方案(第3版)》豆瓣评分 7.6。前端大神Winter在最近公开推荐过这本书，将它和《JavaScript高级程序设计（第3版）》列为前端必读。书中介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧，并讨论了如何实现稳健、灵活、无障碍访问的Web设计，以及在技术层面如何

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：JavaScript中的数据结构——栈和队列 | 代码视界在前面 JavaScript中的数据结构——链表 一文中，我们学习了链表。今天我们一起来学习另外两种数据结构：栈和队列。栈(Stack)定义栈是一种特殊的列表，限定仅在表尾进行插入和删除操作的线性表。表尾这一端我们称为栈顶，相对地，把另一端称为栈底。栈遵循后进先出（LIFO）原则进行存储数据，先进入的数据被压入栈底，最后进入的数据在栈顶，需要读取数据的时候从栈顶开始.

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：[JavaScript中的数据结构—链表 | 代码视界](http://www.chenhanpeng.com/javascript-linked-list/ 前)前言数据结构与算法在前端开发工程师的日常工作中也许不常用，但在这对前端工程师要求日益提高的时代，如果对数据结构、算法思维、代码效率等知识拥有足够的储备，那么我们将拥有更强的竞争力。话不多说，我们接下来学习一种数据结构：链表(Linked list)。链表数组对于.

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：JavaScript设计模式——工厂模式 | 代码视界在瞬息万变的前端领域，技术更新迭代非常快，我们经常能在网络上看到诸如“学不动了”之类的言论。但是作为一名前端开发工程师，除了各种新技术，还有许多“一次学习，终身受益”的知识值得我们花时间去学习，设计模式就是其中之一。设计模式在学习设计模式之前，我们先要知道什么是设计模式。我们先来看下维基百科上关于设计模式的定义：在软件工程中，设计模式（design pattern）是.

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：JavaScript设计模式—单例模式 | 代码视界在上一篇文章《JavaScript设计模式——工厂模式》中我们一起学习了工厂模式，接下来我们一起来学习另一种设计模式——单例模式。定义单例模式：保证一个类只有一个实例，并提供一个访问它的全局访问点。无论创建多少次，都只返回第一次所创建的那唯一的一个实例。单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景。欢迎关注我的微信公众号：前端极客技术(FrontGeek).

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：聊一聊浏览器本地存储 | 代码视界前言作为一名前端工程师，我们每天都在跟浏览器打交道，浏览器的本地存储更是经常用到。今天我们就一起来聊一聊浏览器的本地存储。浏览器的本地存储主要分为：Cookie、 WebStorage、 IndexedDB。其中WebStorage又可以分为localStorage和sessionStorage。CookieHTTP Cookie，通常叫做Cookie，一开始是在客户端用于存储会话信息的。.

作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：前端性能指标：白屏和首屏时间的计算|代码视界前言页面性能优化是前端开发中一个重要的环节，而评判前端性能的优劣有两个比较经常听说的指标：白屏时间和首屏时间。接下来我们一起来看看什么是白屏时间和首屏时间，如何去计算。什么是白屏和首屏时间白屏时间(FP)白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。白屏时间 = 页面开始展示的时间点 - 开始请求的时间点首屏时间(FC.