- 博客(54)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
1177
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
1434
原创 学习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
742
原创 「高频面试题」浏览器从输入url到页面展示中间发生了什么
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：「高频面试题」浏览器从输入url到页面展示中间发生了什么 | 代码视界“在浏览器中，从输入URL到页面展示，中间发生了什么？”这是一道经典的高频面试题，其中涉及了网络、操作系统、web等一系列的知识。接下来我们一起来看看要怎么回答这道题。整个过程可以大致描述为：URL解析用户输入URL，浏览器会根据用户输入的信息判断是搜索内容还是请求的URL。如果是搜索内容，就将搜索内容+默认搜索引擎来合成新的带搜索关键字的URL。如果判断.
2021-05-21 16:22:30
566
8
原创 「面试必备」一文吃透JavaScript继承
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：「面试必备」一文吃透JavaScript继承 | 代码视界继承在各种编程语言中都充当着至关重要的角色，在JavaScript中也被经常用在前端工程基础库的底层搭建上，是JavaScript需要重点学习的一块内容。继承可以使得子类具有父类的各种方法和属性。ES6中推出了class这个概念，方便了我们学习和理解，但class只是一个语法糖，实际底层的实现还是原来的那一套：利用原型链和构造函数来实现继承，接下来我们一起来看看在Java.
2021-05-20 17:17:29
168
4
原创 2021年前端必读书籍推荐
HTML和CSS书籍推荐《Head First HTML与CSS(第2版)》豆瓣评分 9.2。是前端入门的经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。前端初学者首选书籍。《精通CSS：高级Web标准解决方案(第3版)》豆瓣评分 7.6。前端大神Winter在最近公开推荐过这本书，将它和《JavaScript高级程序设计（第3版）》列为前端必读。书中介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧，并讨论了如何实现稳健、灵活、无障碍访问的Web设计，以及在技术层面如何
2021-05-16 22:05:53
6738
1
原创 【必学系列】JavaScript中的数据结构——栈和队列
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：JavaScript中的数据结构——栈和队列 | 代码视界在前面 JavaScript中的数据结构——链表 一文中，我们学习了链表。今天我们一起来学习另外两种数据结构：栈和队列。栈(Stack)定义栈是一种特殊的列表，限定仅在表尾进行插入和删除操作的线性表。表尾这一端我们称为栈顶，相对地，把另一端称为栈底。栈遵循后进先出（LIFO）原则进行存储数据，先进入的数据被压入栈底，最后进入的数据在栈顶，需要读取数据的时候从栈顶开始.
2021-04-25 11:10:18
302
原创 【必学系列】JavaScript中的数据结构—链表
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：[JavaScript中的数据结构—链表 | 代码视界](http://www.chenhanpeng.com/javascript-linked-list/ 前)前言数据结构与算法在前端开发工程师的日常工作中也许不常用，但在这对前端工程师要求日益提高的时代，如果对数据结构、算法思维、代码效率等知识拥有足够的储备，那么我们将拥有更强的竞争力。话不多说，我们接下来学习一种数据结构：链表(Linked list)。链表数组对于.
2021-04-23 17:10:49
428
原创 聊一聊浏览器本地存储
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：聊一聊浏览器本地存储 | 代码视界前言作为一名前端工程师，我们每天都在跟浏览器打交道，浏览器的本地存储更是经常用到。今天我们就一起来聊一聊浏览器的本地存储。浏览器的本地存储主要分为：Cookie、 WebStorage、 IndexedDB。其中WebStorage又可以分为localStorage和sessionStorage。CookieHTTP Cookie，通常叫做Cookie，一开始是在客户端用于存储会话信息的。.
2021-04-21 08:57:17
454
原创 JavaScript设计模式—单例模式
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：JavaScript设计模式—单例模式 | 代码视界在上一篇文章《JavaScript设计模式——工厂模式》中我们一起学习了工厂模式，接下来我们一起来学习另一种设计模式——单例模式。定义单例模式：保证一个类只有一个实例，并提供一个访问它的全局访问点。无论创建多少次，都只返回第一次所创建的那唯一的一个实例。单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景。欢迎关注我的微信公众号：前端极客技术(FrontGeek).
2021-04-19 21:31:03
170
原创 JavaScript设计模式——工厂模式
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：JavaScript设计模式——工厂模式 | 代码视界在瞬息万变的前端领域，技术更新迭代非常快，我们经常能在网络上看到诸如“学不动了”之类的言论。但是作为一名前端开发工程师，除了各种新技术，还有许多“一次学习，终身受益”的知识值得我们花时间去学习，设计模式就是其中之一。设计模式在学习设计模式之前，我们先要知道什么是设计模式。我们先来看下维基百科上关于设计模式的定义：在软件工程中，设计模式（design pattern）是.
2021-04-17 17:08:38
324
原创 前端性能指标：白屏和首屏时间的计算
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：前端性能指标：白屏和首屏时间的计算|代码视界前言页面性能优化是前端开发中一个重要的环节，而评判前端性能的优劣有两个比较经常听说的指标：白屏时间和首屏时间。接下来我们一起来看看什么是白屏时间和首屏时间，如何去计算。什么是白屏和首屏时间白屏时间(FP)白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。白屏时间 = 页面开始展示的时间点 - 开始请求的时间点首屏时间(FC.
2021-04-16 15:14:25
4436
1
原创 一文彻底掌握HTTP缓存
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：一文彻底掌握HTTP缓存|代码视界缓存，作为性能优化的最有效方法之一，在面试过程中经常被问到，作为一名开发人员，缓存是必须掌握的一块知识。浏览器缓存机制有四个方面：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。对于前端开发工程师来说，比较熟悉的就是HTTP缓存，这也是每一个前端工程师都要掌握的知识点，下面我们一起来学习HTTP缓存，争取通过这篇文章就彻底掌握HT.
2021-04-16 15:11:49
222
原创 一文掌握9大跨域解决方案
作者：Hanpeng_Chen公众号：前端极客技术文章首发个人博客：代码视界-一文掌握9大跨域解决方案什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。通常我们讲的跨域，是由浏览器同源策略限制的一类请求场景。同源策略同源指的是两个URL的协议、域名和端口三者都相同，即使两个不同 的域名指向相同的IP地址，也非同源。同源策略(SOP:Same origin policy)是浏览器的一套基础的安全策略制约，用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行.
2021-04-16 15:09:11
237
2
原创 聊一聊JavaScript类型判断的四种方法
前言在web开发中，我们经常碰到需要判断数据是数字还是字符串，判断是数组还是对象的场景，接下来我们一起来看看JavaScript中都有哪些方法可以判断数据类型。欢迎关注我的微信公众号：前端极客技术(FrontGeek)typeof在JS中，我们最常用的判断方法自然是typeof。typeof：是一元操作符，放在其单个操作数的前面，操作数可以是任意类型。返回值为表示操作数类型的一个字符串。在ES5中，JavaScript有六种数据类型：Number、String、Boolean、Undef
2021-03-01 16:11:19
354
原创 这一次彻底掌握JavaScript的深浅拷贝
关于拷贝这个问题，也是前端面试中的一道经典面试题，我们在日常开发中也常碰到需要用到深拷贝或浅拷贝的场景。接下来我们通过这篇文章，彻底掌握JavaScript的深浅拷贝。数据类型在开始讲深浅拷贝之前，我们要先知道JavaScript的数据类型，主要有下图所示的8种：Object是引用类型，其他7种为基础类型。JavaScript的数据类型最后都会在初始化之后放在不同的内存中，因此上面的数据类型大致可以分为两类来进行存储：基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量引用类型存储
2021-03-01 16:10:08
156
原创 CSS面试题：什么是BFC？BFC有什么用？
BFC是之前前端面试中经常问到一个问题，这篇文章我们一起来学习BFC。什么是BFCBFC(Block Formatting Context)：快格式化上下文，是web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。它有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。快格式化上下文包含创建它的元素内部的所有内容。具有BFC特性的元素我们可以将其看作隔离的独立容器，容器内的元素不会在布局上影响到容器外的元素，而且BFC具有普通容器所
2021-01-14 08:55:03
528
原创 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
1765
原创 JavaScript-数组扁平化
上一篇文章我们将JavaScript中数组的方法汇总了一下，本文我们一起来看看JavaScript数组常见的一个问题：数组扁平化。什么是数组扁平化数组扁平化：就是讲一个复杂的嵌套多层的数组，一层一层地转化为层级较少或者只有一层的数组。下面我们通过实际例子来看看都有哪些解决方法：let array = [1, [2, [3, [4, 5]]]]// 需要将上面的array展开得到下面的一维数组[1, 2, 3, 4, 5]欢迎关注我的微信公众号：前端极客技术(FrontGeek)flat
2020-06-22 08:58:06
238
原创 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
257
原创 JavaScript-函数节流
在上一篇文章 JavaScript-函数防抖 中我们学习了什么是防抖，并且一步步实现了防抖函数，今天我们一起来学习节流(throttle)。什么是节流函数节流(throttle)：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。简单的说，就是让一个函数无法在很短时间间隔内被连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次函数的执行。函数节流主要有两种实现方法：时间...
2020-05-08 09:01:11
385
1
原创 JavaScript-函数防抖
前言在前端开发过程中，我们会遇到一些频繁触发的事件，但我们需要控制回调的频率，比如下面几种场景：游戏中的按键响应，比如格斗，比如射击，需要控制出拳和射击的速率。自动完成，按照一定频率分析输入，提示自动完成。鼠标移动和窗口滚动，鼠标稍微移动一下，窗口稍微滚动一下会带来大量的事件，因而需要控制回调的发生频率。下面我们通过代码来看看mousemove事件是如何频繁触发的：index.ht...
2020-05-07 21:33:57
350
原创 2020年腾讯华为前端面经分享
前言本人是一个工作了两年半的前端菜鸟，之前自我感觉良好，计划着换一份新工作，于是投了腾讯和华为两家，因为疫情的原因，都是电话面试。在没认真准备面试的情况下，结果可想而知，被虐得体无完肤，一轮游。在这里把面试中问到的题目分享出来，供大家参考。腾讯1、面试官一开始聊了会天，然后说简历写了参与了xxxx和XXX两个项目，那么你觉得哪个项目比较有挑战性，为什么？2、简历里写熟悉Vue.js，那么能...
2020-03-16 10:58:50
2270
原创 Python从小白到攻城狮(1)——python环境搭建
Python介绍Python是Guido van Rossum在1989年圣诞节期间，为了打发无聊的圣诞节而编写的一个编程语言，1991年发布第一版。Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些标点符号，它具有比其他语言更有特色语法结构。Python 是一种解释型语言...
2019-08-20 10:04:09
340
原创 Python从小白到攻城狮(3)——列表和元组
Python内置了多种类型的数据结构，常用的有：列表、元组、集合和字典。本文主要介绍列表和元组。列表(list)和元组(tuple)定义列表和元组，都是一个可以放置任意数据类型的有序集合。列表和元组的区别列表是动态的，长度大小不固定，可以随意增加、删减或者改变元素（mutable）。元组是静态的，长度大小固定，无法增加删减或改变（immutable）。如果要对已有的元组做任...
2019-08-08 22:53:41
332
原创 Python从小白到攻城狮(2)——数据类型和变量
本系列Python文章基于Python3版本，关于python的安装和配置自行百度，这里不做详细介绍。接下来将介绍Python基础——数据类型和变量。数据类型在Python中，能够直接处理的数据类型有以下几种：整型Python中可以处理任意大的整数，包括负整数。支持二进制（如0b100，换算成十进制是4）、八进制（0o100，换算成十进制是64）、十六进制（0x100，换算成十进制为2...
2019-08-08 22:52:25
180
原创 What!吴恩达要参加美国大选？带你一起用人脸识别技术看看真的是吴恩达吗？
What！吴恩达去参加美国大选了？最近几周，想必很多人都有看到这新闻，是不是在想吴恩达老师是不是有个双胞胎兄弟去参加美国大选了？？？答案都不是，参选的是杨安泽，两人不仅长得像，英文名都叫Andrew，Andrew Yang（杨安泽）、Andrew Ng（吴恩达），下面是两个人的照片:是不是分不清啊？没关系，接下来带你一起，用人脸识别技术判断是不是同一个人。在上一篇文章中，我们介绍了实现人脸...
2019-07-31 20:26:07
554
原创 分享机器学习教学视频(吴恩达+李宏毅+机器学习算法地图)，一起升职加薪！
机器学习相关岗位在这个人工智能时代还是非常吃香的，经常听到别人几十万、上百万年薪，十分羡慕。在网上搜罗了几份机器学习的教学视频，在这里分享给大家。更多资源和优质文章，欢迎关注公众号：代码视界。Python3入门机器学习-经典算法与应用链接: https://pan.baidu.com/s/1NvoRVZbzjGvUzVqmH-RTXQ 提取码: s3fc 复制这段内容后打开百度网盘手...
2019-07-26 16:24:45
1303
原创 20行代码实现人脸检测
如今，“刷脸”已经成为人们生活中的日常，刷脸支付、人脸解锁、门禁等，都运用了人脸识别技术。人脸识别技术已广泛应用于金融、司法、公安、教育、医疗等诸多领域，同时也涌现出如：旷视科技、商汤科技等一批优秀的企业。人脸识别算法主要分为三个流程：人脸检测（Face Detection）人脸对齐（Face Alignment）人脸特征表征（Feature Representation）本文我们主...
2019-07-23 09:06:06
1000
原创 你还在用二分法求2个鸡蛋100层楼的问题吗？
题目2个鸡蛋，100层楼，如何用最少的试验次数得到在鸡蛋落下不碎的最高层数？这一据说曾被谷歌纳入校园招聘题库的经典面试题，想必许多人都曾遇到过，又有多少人与我一样，不加思索就直接回答用二分法查找的？但是，二分法真的是最优试验方法吗？接下来我们来分析几种解法。首先我们先认真看一下完整的题目(之前做过这道题的同学可以跳过这一步)：原题：两个软硬程度一样但未知的鸡蛋，它们有可能都在一楼扔下来就摔...
2019-07-11 08:37:24
1344
原创 微信小程序使用otp算法踩坑总结
背景前两天项目有个类似动态口令的功能要实现，团队最终决定使用OTP算法来实现：前端先向后端请求获取用户的密钥(secret)，将之保存在缓存中，之后前端根据该secret，使用OTP算法中的TOTP方式生成6位动态密码，将6位动态密码传到后台验证。OTP1.1 简介OTP(One-Time-Password)：一次性密码，也称为动态口令。是使用密码技术实现的在客户端和服务端之间通过共享密钥...
2019-07-09 22:25:36
2196
1
原创 PDF.js实现在线展示pdf文件
背景现在很多项目开发过程中都会碰到PDF在线预览的需求，对于PC端浏览器，一般直接提供PDF文件，iframe一下就可以直接预览。但在移动端要预览PDF则较为麻烦，有些浏览器检测到文件流，就会直接下载，无法实现预览功能。PDFJS就是解决这一问题比较好用的一款插件。PDF.jsPDF.js是一个使用HTML5构建的可移植文档格式库。PDF.js官网：http://mozilla.gith...
2019-06-28 00:27:14
11228
4
原创 利用TensorFlow Object Detection API实现图片和视频物体检测
TensorFlow Object Detection API介绍物体检测是检测图片或视频中所出现的全部物体，并用矩形进行标注，物体的类别可以包括多种，比如：人、车、动物等等，即正确的答案可以是多个。TensorFlow提供了用于检测图片或视频中所包含物体的接口(Object Detection API)，具体详情可参考下面链接：https://github.com/tensorflow/m...
2019-06-24 23:14:13
4820
7
原创 TensorFlow基础概念
TensorFlow是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。TensorFlow 是Google第二代大规模分布式深度学习框架。灵活通用的深度学习库端云结合的人工智能引擎高性能的基础平台软件跨平台的机器学习系统应用场景：行人检测、人脸检测、行为识别、身份证自动输入与人脸图像比较、OCR+自动化审核TensorFlow 数据流图介绍Te...
2019-06-11 23:52:11
315
原创 Vue-cli3 环境变量和模式
前段时间工作中用Vue-CLI3构建的Vue工程一些静态资源，比如静态H5页面、图片、图标等等，我们一般放在固定的一些服务器上，链接前缀一般相对固定，但我们打包发布一般要区分测试环境和生产环境，此时的静态资源路径也需要区分测试和生产，如果每次打包都要根据部署的环境去修改路径十分麻烦，这时候vue-cli的模式和环境变量则能够很好地解决这个麻烦。模式模式是Vue CLI项目中一个重要的概念。默认...
2019-04-29 23:58:09
3882
原创 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
11807
31
原创 文本挖掘预处理之TF-IDF
一、概念TF-IDF（Term Frequency-Inverse Document Frequency）即“词频-反文档频率”，主要由TF和IDF两部分组成。TF-IDF是一种用于资讯检索与资讯探勘的常用加权技术，是一种统计方法，用于评估一个词对于一个文件集或一个语料库中的其中一份文件的重要程度。字词的重要程度与它在文件中出现的次数成正比，但同时与它在语料库中出现的频率成反比。TF——词...
2019-03-17 17:55:54
907
原创 K-近邻(KNN)算法
K-近邻（KNN，K-Nearest Neighbor）算法是一种基本分类与回归方法，在机器学习分类算法中占有相当大的地位，既是最简单的机器学习算法之一，也是基于实例的学习方法中最基本的，又是最好的文本分类算法之一。我们本篇文章只讨论分类问题的KNN算法。KNN算法概述KNN是通过测量不同特征值之间的距离进行分类。KNN算法思路：如果一个样本在特征空间中的k各最相似（即特征空间中最...
2019-03-12 23:29:42
564
原创 Scrapy-redis分布式爬虫
在上一篇文章：Scrapy入门教程实例 简单介绍了Scrapy以及用Scrapy创建一个爬虫入门项目，但Scrapy是一个通用的爬虫框架，多个spider不能共享待爬取的队列，因此不支持分布式。Scrapy-redis 本文要介绍的Scrapy-redis，是一个以redis为基础的Scrapy组件，能够更方便地实现Scrapy分布式爬取。 Sc...
2019-02-27 00:12:45
461
原创 Spring Clound Feign实现MultipartFile文件上传
普通的FeignClient直接去调用远程上传文件接口的时候一直抛异常：MissingServletRequestPartException，“Required request part ‘file’ is not present”解决方案：在Feign Client中引用配置类FeignConfiguration,在FeignConfiguration中，实例化FeignSpringFo...
2018-09-25 10:42:30
1350
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人