前端
文章平均质量分 92
Hanpeng Chen
公众号:【代码视界】和【前端极客技术】,分别侧重于分享python机器学习和前端两个方向的内容。
个人博客:http://www.chenhanpeng.com/
混迹于代码江湖的程序猿一枚,涉足前端、大数据领域,对后端、AI略有了解。
展开
-
vue-router使用history模式配置说明
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。})当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!不过这种模式要玩好,还需要后台配置支持。原创 2022-11-23 11:31:30 · 1198 阅读 · 1 评论 -
一文学会Vue3新特性
原文:一文学会Vue3新特性公众号:前端极客技术Vue3.0 周边生态现在已经完善得差不多了,新项目可以开始使用Vue3来开发了,今天我们先来学习Vue3的一些新特性。Composition API为什么选择Composition APIComposition API翻译成中文就是组合式API。有的人可能会疑惑为什么要用Composition API?原来Vue2中的options API不是也能实现吗?我们先来Vue3官方文档中的例子:假设我们的应用中有一个显示某个用户的仓库列表的视图。.原创 2021-12-14 17:26:43 · 1448 阅读 · 0 评论 -
学习Vue前你需要了解defineProperty和Proxy
作者:Hanpeng_Chen公众号:前端极客技术原文:学习Vue源码前需要了解的defineProperty和Proxy前言大家有使用Vue开发想必对响应式都有了解,知道Vue2是用Object.defineProperty实现数据劫持,进而实现的双向绑定。在已经发布快一年的Vue3中,数据响应式的实现由Object.defineProperty API改成了Proxy API。接下来我们一起来看看这两个API的基本用法。definePropertyObject.defineProper.原创 2021-09-06 11:50:47 · 764 阅读 · 0 评论 -
「高频面试题」浏览器从输入url到页面展示中间发生了什么
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:「高频面试题」浏览器从输入url到页面展示中间发生了什么 | 代码视界“在浏览器中,从输入URL到页面展示,中间发生了什么?”这是一道经典的高频面试题,其中涉及了网络、操作系统、web等一系列的知识。接下来我们一起来看看要怎么回答这道题。整个过程可以大致描述为:URL解析用户输入URL,浏览器会根据用户输入的信息判断是搜索内容还是请求的URL。如果是搜索内容,就将搜索内容+默认搜索引擎来合成新的带搜索关键字的URL。如果判断.原创 2021-05-21 16:22:30 · 596 阅读 · 8 评论 -
「面试必备」一文吃透JavaScript继承
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:「面试必备」一文吃透JavaScript继承 | 代码视界继承在各种编程语言中都充当着至关重要的角色,在JavaScript中也被经常用在前端工程基础库的底层搭建上,是JavaScript需要重点学习的一块内容。继承可以使得子类具有父类的各种方法和属性。ES6中推出了class这个概念,方便了我们学习和理解,但class只是一个语法糖,实际底层的实现还是原来的那一套:利用原型链和构造函数来实现继承,接下来我们一起来看看在Java.原创 2021-05-20 17:17:29 · 170 阅读 · 4 评论 -
【必学系列】JavaScript中的数据结构——栈和队列
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:JavaScript中的数据结构——栈和队列 | 代码视界在前面 JavaScript中的数据结构——链表 一文中,我们学习了链表。今天我们一起来学习另外两种数据结构:栈和队列。栈(Stack)定义栈是一种特殊的列表,限定仅在表尾进行插入和删除操作的线性表。表尾这一端我们称为栈顶,相对地,把另一端称为栈底。栈遵循后进先出(LIFO)原则进行存储数据,先进入的数据被压入栈底,最后进入的数据在栈顶,需要读取数据的时候从栈顶开始.原创 2021-04-25 11:10:18 · 330 阅读 · 0 评论 -
【必学系列】JavaScript中的数据结构—链表
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:[JavaScript中的数据结构—链表 | 代码视界](http://www.chenhanpeng.com/javascript-linked-list/ 前)前言数据结构与算法在前端开发工程师的日常工作中也许不常用,但在这对前端工程师要求日益提高的时代,如果对数据结构、算法思维、代码效率等知识拥有足够的储备,那么我们将拥有更强的竞争力。话不多说,我们接下来学习一种数据结构:链表(Linked list)。链表数组对于.原创 2021-04-23 17:10:49 · 444 阅读 · 0 评论 -
聊一聊浏览器本地存储
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:聊一聊浏览器本地存储 | 代码视界前言作为一名前端工程师,我们每天都在跟浏览器打交道,浏览器的本地存储更是经常用到。今天我们就一起来聊一聊浏览器的本地存储。浏览器的本地存储主要分为:Cookie、 WebStorage、 IndexedDB。其中WebStorage又可以分为localStorage和sessionStorage。CookieHTTP Cookie,通常叫做Cookie,一开始是在客户端用于存储会话信息的。.原创 2021-04-21 08:57:17 · 481 阅读 · 0 评论 -
JavaScript设计模式—单例模式
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:JavaScript设计模式—单例模式 | 代码视界在上一篇文章《JavaScript设计模式——工厂模式》中我们一起学习了工厂模式,接下来我们一起来学习另一种设计模式——单例模式。定义单例模式:保证一个类只有一个实例,并提供一个访问它的全局访问点。无论创建多少次,都只返回第一次所创建的那唯一的一个实例。单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景。欢迎关注我的微信公众号:前端极客技术(FrontGeek).原创 2021-04-19 21:31:03 · 179 阅读 · 0 评论 -
JavaScript设计模式——工厂模式
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:JavaScript设计模式——工厂模式 | 代码视界在瞬息万变的前端领域,技术更新迭代非常快,我们经常能在网络上看到诸如“学不动了”之类的言论。但是作为一名前端开发工程师,除了各种新技术,还有许多“一次学习,终身受益”的知识值得我们花时间去学习,设计模式就是其中之一。设计模式在学习设计模式之前,我们先要知道什么是设计模式。我们先来看下维基百科上关于设计模式的定义:在软件工程中,设计模式(design pattern)是.原创 2021-04-17 17:08:38 · 341 阅读 · 0 评论 -
前端性能指标:白屏和首屏时间的计算
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:前端性能指标:白屏和首屏时间的计算|代码视界前言页面性能优化是前端开发中一个重要的环节,而评判前端性能的优劣有两个比较经常听说的指标:白屏时间和首屏时间。接下来我们一起来看看什么是白屏时间和首屏时间,如何去计算。什么是白屏和首屏时间白屏时间(FP)白屏时间(First Paint):是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间。白屏时间 = 页面开始展示的时间点 - 开始请求的时间点首屏时间(FC.原创 2021-04-16 15:14:25 · 4733 阅读 · 1 评论 -
一文彻底掌握HTTP缓存
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:一文彻底掌握HTTP缓存|代码视界缓存,作为性能优化的最有效方法之一,在面试过程中经常被问到,作为一名开发人员,缓存是必须掌握的一块知识。浏览器缓存机制有四个方面:Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。对于前端开发工程师来说,比较熟悉的就是HTTP缓存,这也是每一个前端工程师都要掌握的知识点,下面我们一起来学习HTTP缓存,争取通过这篇文章就彻底掌握HT.原创 2021-04-16 15:11:49 · 229 阅读 · 0 评论 -
一文掌握9大跨域解决方案
作者:Hanpeng_Chen公众号:前端极客技术文章首发个人博客:代码视界-一文掌握9大跨域解决方案什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。通常我们讲的跨域,是由浏览器同源策略限制的一类请求场景。同源策略同源指的是两个URL的协议、域名和端口三者都相同,即使两个不同 的域名指向相同的IP地址,也非同源。同源策略(SOP:Same origin policy)是浏览器的一套基础的安全策略制约,用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行.原创 2021-04-16 15:09:11 · 245 阅读 · 2 评论 -
聊一聊JavaScript类型判断的四种方法
前言在web开发中,我们经常碰到需要判断数据是数字还是字符串,判断是数组还是对象的场景,接下来我们一起来看看JavaScript中都有哪些方法可以判断数据类型。欢迎关注我的微信公众号:前端极客技术(FrontGeek)typeof在JS中,我们最常用的判断方法自然是typeof。typeof:是一元操作符,放在其单个操作数的前面,操作数可以是任意类型。返回值为表示操作数类型的一个字符串。在ES5中,JavaScript有六种数据类型:Number、String、Boolean、Undef原创 2021-03-01 16:11:19 · 381 阅读 · 0 评论 -
这一次彻底掌握JavaScript的深浅拷贝
关于拷贝这个问题,也是前端面试中的一道经典面试题,我们在日常开发中也常碰到需要用到深拷贝或浅拷贝的场景。接下来我们通过这篇文章,彻底掌握JavaScript的深浅拷贝。数据类型在开始讲深浅拷贝之前,我们要先知道JavaScript的数据类型,主要有下图所示的8种:Object是引用类型,其他7种为基础类型。JavaScript的数据类型最后都会在初始化之后放在不同的内存中,因此上面的数据类型大致可以分为两类来进行存储:基础类型存储在栈内存,被引用或拷贝时,会创建一个完全相等的变量引用类型存储原创 2021-03-01 16:10:08 · 169 阅读 · 0 评论 -
CSS面试题:什么是BFC?BFC有什么用?
BFC是之前前端面试中经常问到一个问题,这篇文章我们一起来学习BFC。什么是BFCBFC(Block Formatting Context):快格式化上下文,是web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。它有一套渲染规则,决定了其子元素将如何定位,以及和其他元素的关系和相互作用。快格式化上下文包含创建它的元素内部的所有内容。具有BFC特性的元素我们可以将其看作隔离的独立容器,容器内的元素不会在布局上影响到容器外的元素,而且BFC具有普通容器所原创 2021-01-14 08:55:03 · 544 阅读 · 0 评论 -
JavaScript-数组乱序
前言对数组进行排序对我们来说很容易就能够实现,但是你有考虑过如何对一个有序的数组实现乱序,即随机排序吗?数组乱序在实际开发过程中是可能碰到的,下面我们一起看看如何实现数组乱序。欢迎关注我的微信公众号:前端极客技术(FrontGeek)sort + Math.random我们一开始可能会想到利用数组的sort方法,判断随机出来的0-1的值与0.5的大小,实现排序。该方法实现如下:var arr = [1, 2, 3, 4, 5, 6];arr.sort(function(){ re原创 2020-08-12 21:52:46 · 1794 阅读 · 0 评论 -
JavaScript-数组扁平化
上一篇文章我们将JavaScript中数组的方法汇总了一下,本文我们一起来看看JavaScript数组常见的一个问题:数组扁平化。什么是数组扁平化数组扁平化:就是讲一个复杂的嵌套多层的数组,一层一层地转化为层级较少或者只有一层的数组。下面我们通过实际例子来看看都有哪些解决方法:let array = [1, [2, [3, [4, 5]]]]// 需要将上面的array展开得到下面的一维数组[1, 2, 3, 4, 5]欢迎关注我的微信公众号:前端极客技术(FrontGeek)flat原创 2020-06-22 08:58:06 · 248 阅读 · 0 评论 -
JavaScript-数组方法汇总
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原创 2020-06-16 09:09:08 · 292 阅读 · 0 评论 -
JavaScript-函数节流
在上一篇文章 JavaScript-函数防抖 中我们学习了什么是防抖,并且一步步实现了防抖函数,今天我们一起来学习节流(throttle)。什么是节流函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。简单的说,就是让一个函数无法在很短时间间隔内被连续调用,只有当上一次函数执行后过了规定的时间间隔,才能进行下一次函数的执行。函数节流主要有两种实现方法:时间...原创 2020-05-08 09:01:11 · 399 阅读 · 1 评论 -
JavaScript-函数防抖
前言在前端开发过程中,我们会遇到一些频繁触发的事件,但我们需要控制回调的频率,比如下面几种场景:游戏中的按键响应,比如格斗,比如射击,需要控制出拳和射击的速率。自动完成,按照一定频率分析输入,提示自动完成。鼠标移动和窗口滚动,鼠标稍微移动一下,窗口稍微滚动一下会带来大量的事件,因而需要控制回调的发生频率。下面我们通过代码来看看mousemove事件是如何频繁触发的:index.ht...原创 2020-05-07 21:33:57 · 360 阅读 · 0 评论 -
JSP中的HTML代码
一、HTML常用标签1.HTML文档结构包括文档头部Head和文档主体Body两大部分,其中文档头部用于描述浏览器所需的信息,如Title、meta meta标签是可选的,有时利用meta标签说明网页所用的字符集,如<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>若希望每隔5秒刷新一次网页,则可以<meta h原创 2016-08-24 17:39:10 · 4678 阅读 · 0 评论 -
JSP基础语法
1.JSP脚本及注释一个Jsp页面可由以下**5种元素**组合而成HTML标签Jsp标签,包括指令标签和动作标签变量和方法的声明JSP的可执行脚本JSP表达式1.1 JSP的声明语句在JSP页面中可以定义变量和方法,格式如下: <%!声明变量或方法%>1.2 JSP的可执行脚本可通过插入**可执行脚本**(Scriptlet)来完成指定的业务功能。可执行脚本就是嵌在**<% ....%原创 2016-08-15 13:59:10 · 306 阅读 · 0 评论 -
vue-cli3创建多项目工程,支持分项目编译打包到相应文件夹中
前言本篇文章将采用vue-cli3来创建vue项目,如果之前已经全局安装了旧版本的vue-cli,需要先将其卸载,卸载命令如下npm uninstall vue-cli -g # oryarn global remove vue-cliNode版本要求:node.js >= 8.9安装:npm install -g @vue/cli# oryarn global add...原创 2019-03-31 17:06:38 · 11929 阅读 · 31 评论 -
Vue-cli3 环境变量和模式
前段时间工作中用Vue-CLI3构建的Vue工程一些静态资源,比如静态H5页面、图片、图标等等,我们一般放在固定的一些服务器上,链接前缀一般相对固定,但我们打包发布一般要区分测试环境和生产环境,此时的静态资源路径也需要区分测试和生产,如果每次打包都要根据部署的环境去修改路径十分麻烦,这时候vue-cli的模式和环境变量则能够很好地解决这个麻烦。模式模式是Vue CLI项目中一个重要的概念。默认...原创 2019-04-29 23:58:09 · 3893 阅读 · 0 评论 -
PDF.js实现在线展示pdf文件
背景现在很多项目开发过程中都会碰到PDF在线预览的需求,对于PC端浏览器,一般直接提供PDF文件,iframe一下就可以直接预览。但在移动端要预览PDF则较为麻烦,有些浏览器检测到文件流,就会直接下载,无法实现预览功能。PDFJS就是解决这一问题比较好用的一款插件。PDF.jsPDF.js是一个使用HTML5构建的可移植文档格式库。PDF.js官网:http://mozilla.gith...原创 2019-06-28 00:27:14 · 11335 阅读 · 4 评论 -
微信小程序使用otp算法踩坑总结
背景前两天项目有个类似动态口令的功能要实现,团队最终决定使用OTP算法来实现:前端先向后端请求获取用户的密钥(secret),将之保存在缓存中,之后前端根据该secret,使用OTP算法中的TOTP方式生成6位动态密码,将6位动态密码传到后台验证。OTP1.1 简介OTP(One-Time-Password):一次性密码,也称为动态口令。是使用密码技术实现的在客户端和服务端之间通过共享密钥...原创 2019-07-09 22:25:36 · 2333 阅读 · 1 评论 -
DIV层的大小和位置的设置
设置位置和大小=======定义位置有两种方式:一种是使用相对位置,一是使用绝对位置。1.1绝对定位——-绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置。借助style属性,按照如下的格式进行设置:style = &quot;position:absolute;left:距离左边距离;top:距离顶部距离&quot;代码示例如下:&lt;div name = &quot;mydiv&quot;原创 2016-10-14 16:52:11 · 60260 阅读 · 3 评论