- 博客(117)
- 收藏
- 关注
RSS订阅原创 数组的几种常用方式汇总
push(): 在数组末尾添加一个或多个元素，并返回新数组的长度。pop(): 删除并返回数组末尾的元素。shift(): 删除并返回数组开头的元素。unshift(): 在数组开头添加一个或多个元素，并返回新数组的长度。slice(): 返回数组的一部分（浅拷贝），不会改变原数组。splice(): 在数组中添加或删除元素（可同时实现），并返回被删除的元素。concat(): 连接两个或多个数组，并返回新数组。join(): 将数组转换成字符串，并使用指定的分隔符分隔每个元素。
2023-06-01 19:13:02
869
原创 IndexedDB 数据库的使用
前端的存储方式前端的存储，可以使得页面交互更加友好，特别是在保存草稿，网络差的情况下对用户来说是很有用的。前端的存储方式有多种，像 Local storage、Session storage、IndexedDB、Web Sql、Cookies等这几种。使用场景我们比较常见的是本地存储，像用户的基本信息，需要在多个页面需要的时候，可以在登入的时候存储在本地，及时下次退出之后，登入信息还可以保存，这样减少了用户的输入量。但是，它也是有缺点的，它的存储大小只有5M，只能满足相对较小的数据存储，如果是大
2022-05-31 17:43:57
1385
5
原创 将React 类组件转换成 函数式组件
将React 类组件转换成 函数式组件步骤：将class 类定义的React 元素转换成 变量或者函数class 中的 render 函数 直接去掉，直接return html 元素将 state 变量使用 useState Hooks 替代componentDidMount 生命周期使用 useEffect Hooks 替代componentDidUpdate 生命周期使用 useEffect Hooks 替代React memo 替代 PureComponent区别：性能上的差异
2022-05-13 10:15:53
2255
原创 客户端存储和http缓存
通过本文学习，将获得以下知识：1. web 端存储有哪些方式2. 不同存储之间的区别，以及使用场景3. http缓存有哪些策略web 存储的由来为什么需要 web 存储呢，也就是客户端存储，我们知道我们现在的项目大多数都是前端负责静态页面的展示，需要请求后端接口获得数据来完成页面的交互，所以这样很依赖后端服务，并且请求速度也是不可控的。现代web浏览器提供了很多在用户电脑web客户端存放数据的方法 — 只要用户的允许 — 可以在它需要的时候被重新获得。这样能让你存留的数据长时间保存,
2022-03-23 17:00:53
5337
1
原创 webpack Compiler
什么是CompilerCompiler 负责编译，贯穿webpack的整个声明周期，Compiler 对象包含了当前运行Webpack的配置，包括entry、output、loaders等配置，这个对象在启动Webpack时被实例化，而且是全局唯一的。Plugin可以通过该对象获取到Webpack的配置信息进行处理。我们可以在源码中看看Compiler是怎么定义的。class Compiler extends Tapable { constructor(context) { super();
2022-03-22 17:15:51
2389
3
原创 Nuxt.js学习
为什么要学 Nuxt.js ？目前我也没有使用 Nuxt.js 技术，公司项目里面没有使用到，自己没去做过这方面的内容，主要原因是目前不需要使用，但是有些公司已经在使用了，并且因为它解决了一些问题，虽然同时也带来了另一些问题，但是各有各的使用场景嘛，还是了解了解吧，待我们需要使用的时候，会更加的快速，以及跟更加深理解。Nuxt 的使用场景虽然我们现在接触的项目使用服务器端渲染比较少，但总是有一些特殊的项目有特殊的需求，需要特殊处理才能满足Nuxt.js是一个建立在Vue.js上的前端框架，它提供了很
2022-03-21 17:50:52
1741
原创 HTML文档是怎么转换成页面的
HTML->页面先上图一、HTML解析器将HTML转成DOM树我们可以结合网页分析一下：二、CSS解析器将CSS转换成styleSheets计算每个节点的样式 Render Tree布局创建布局树布局计算分层图层绘制栅格化合成和显示总结结合上图，一个完整的渲染流程大致可总结为如下先上图提示：这里可以添加本文要记录的大概内容：提示：以下是本篇文章正文内容，下面案例可供参考一、HTML解析器将HTML转成DOM树可以看到输入是HTML文档，输出是DOM树，DOM树包含节点和内容，以及各个
2022-03-19 13:26:45
3750
原创 登入态的几种方式
登入态是为了解决什么问题而存在的呢？HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？cookiecookie其实是HTTP头部的一个字段，本质上可以存储任何信息，早年用于实现登录态，所以有了一层别的含义——客户端存储。把凭证存储到cookie中，每次浏览器的请求会自动带上cookie里的凭证，方便服务端校验。优点：解决了HTTP请求无状态的问题缺点：可以通过修改document.cookie="isLogin = true"伪造登陆凭证，容易被窃取cookie存储的数据
2022-01-25 00:00:48
3838
1
原创 css中zoom和scale
css中我们常用来缩放的样式元素是transform:scale；也还有我们不熟悉的zoom，在实际的应用场景中，我们需要根据自身项目的需要，结合不同的解决方案的优缺点来选择适合我们项目解决方案。浏览器的兼容性：1.1 zoom在早年是属于IE浏览器的私有工具，但是，现在，除了FireFox浏览器（FireFox浏览器不支持），其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了。而transform下的scale就不一样了，是明明确确写入规范的1.2 zoom的字面意思是“变焦”，可以
2021-08-20 12:21:29
2958
1
原创 怎么给页面增加水印
效果图：实现方式主要是使用canvas设置样式和位置代码let watermark = {};let setWatermark = (str, str1) => { let id = 'waterMarker'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } let can
2021-07-14 19:11:40
442
原创 你了解diff算法吗
在平时的工作中，常见的diff算法出现什么地方呢？vue 中的虚拟dom一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法其有两个特点：比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较二、比较方式diff整体策略为：深度优先，同层比较比较只会在同层级进行, 不会跨层级比较比较的过程中，循环从两边向中间收拢下面
2021-07-08 21:17:16
1084
1
原创 ployfill是什么
ployfill是什么有一些老的浏览器不支持一些api，怎么办呢？那就要手动地去增加一些额外的东西让它可以正常使用啦。polyfill相当于一段代码，它先检查这个浏览器是否支持某个API，如果不支持就加载对应的polyfill抛出问题：vue-awesome-swiper在IE9下报错，是不是不支持IE9？解答问题：主要原因是element.classlist.add()方法在ie9中是不支持的。解决方案：// 解决方法是加个ployfill：npm install classlist-p
2021-06-29 20:50:06
875
原创 从对CDN的理解到Nginx负载均衡
什么是CDNCDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速
2021-06-29 14:11:11
3659
原创 http和https的区别
http互联网上应用最广泛的网络通信协议，基于tcp，可以使浏览器工作更加高效，减少网络传输。https是http的加强版，可以认为是http+ssl(Secure Socket Layer),在http的基础上增加一系列安全不同点...
2021-06-29 09:50:36
426
原创 前端浏览器的跨域问题
相信前端开发必定少不了这个问题。什么是跨域呢跨域是浏览器的行为，跨域问题其实就是浏览器的同源策略所导致的。同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。当跨域的时候会报如下错误：以下协议、域名、端口一致。http://www.example.com:80/a.jshttp://www.example.com:80/b.js以下这种看上去再相似也没有用，都不是同源。http:
2021-06-28 15:04:28
1231
1
原创 发布订阅模式和观察者模式
两者的区别从表面上看：观察者模式里，只有两个角色 —— 观察者 + 被观察者而发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个经常被我们忽略的 —— 经纪人Broker往更深层次讲：观察者和被观察者，是松耦合的关系发布者和订阅者，则完全不存在耦合从使用层面上讲：观察者模式，多用于单个应用内部发布订阅模式，则更多的是一种跨应用的模式(cross-application pattern)，比如我们常用的消息中间件发布订阅模式代码实现class EventEmitt
2021-05-21 20:40:10
141
1
原创 1rpx小程序的动态单位
如何保证不同的设备视觉上的大小一样不同设备的分辨率不同，在屏幕上，每一个画面都是由许多的点组成的，也就是像素，简称px,也就是说一个图片由很多个px组成。但是随着设备分辨率的不同，每个像素大小都是不一样的。所以如果我们在不同的设备使用相同的px,那么在不同的设备上展示的效果肯定也是不一样的。因此，我们需要有一个动态单位，可以通过不同设备来自动调整和适配。苹果和 Google 对此都有相应的措施：由于苹果对高分屏的优化良好，所以在 iOS 上，代码中的 1 px 所代表的实际像素数会根据不同设备动态
2021-05-20 09:41:18
895
转载 无障碍化开发
什么是无障碍无障碍化，Accessibility（A11Y）是指无论健全人还是残疾人，年轻人还是老年人都可以从我们所开发的网站上获取信息和服务，让互联网访问公平变得可能。建设无障碍化网站是一项非常有意义且正确的事情，不单单是可以增加网站的受益群众，更是一个有情怀、有担当的开发者应该关注的方面，甚至在一些国家与地区支持无障碍化已经写入法律规定中。在 W3C 上有一句话——“Web 根本目的是为了为所有的人服务，而不是受限于的硬件、软件、语言、文化、位置或身体或精神能力”（原文：The Web is
2021-05-19 19:00:53
1972
原创 webpack proxy的工作原理
webpack proxywebpack proxy是什么呢？webpack proxy，即webpack提供的代理服务基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制）想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-serverwebpack-dev-serverwebpack-dev-server是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开
2021-05-08 10:14:29
999
原创 this指向 js作用域链
this 指向 ｜作用域与闭包实战是检验真理的唯一标准深入理解 this作用域闭包到底是什么this 问题总结这里将以实战为引子，带领大家一起总结出 this 指向问题的规律。默认绑定（函数直接调用）非严格模式下：function fn() { console.log(this) // console what ? Window }fn()严格模式下：function fn() { 'use strict' console.log(this) // cons
2021-05-03 10:07:18
270
1
转载 http2.0的改进
HTTP2.0大幅度的提高了web性能，在HTTP1.1完全语义兼容的基础上，进一步减少了网络的延迟。实现低延迟高吞吐量。对于前端开发者而言，减少了优化工作。本文将重点围绕以下几点新特性的作用、工作过程以及如何更出色的完成了优化工作来介绍HTTP2.0。二进制分帧首部压缩多路复用请求优先级服务器推送一. 介绍HTTP/2是HTTP协议自1999年HTTP1.1发布后的首个更新，主要基于SPDY协议。1.1 什么是SPDY协议SPDY是Speedy的昵音，意为“更快”。它是Google开
2021-04-29 14:04:55
951
原创 addEventListener() 的参数之passive 的用法
addEventListener()我们常写的addEventListener() 的参数是这样的：addEventListener(type, listener, useCapture)比如：addEventListener("click", fun, true)实际上，第三个参数可以是boolean 也可以是optionsaddEventListener(type, listener, { capture: false, passive: false, once:
2021-04-29 09:51:59
4774
1
原创 什么是混合APP开发
混合APP开发移动APP开发的三种方式：native APPnative APP 是指本地应用程序，也叫原生AP。内部运行的是二进制数据，也就是说原生语言最后是直接转换成二进制数据运行的，可以调用最底层的设备API。如手机摄像头、日历、设备信息等。原生APP是使用相应平台特有的开发工具和语言进行开发的，如android app ,这使得应用程序外观和性能极佳，但是开发成本很高。每一种操作系统都要独立的开发项目。web APPweb APP是指网页应用APP，也叫移动APP。开发成本低，但是无
2021-04-28 18:51:27
4461
原创 vite打包工具的介绍
vite:Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。Vite具有以下特点：快速的冷启动即时热模块更新（HMR，Hot Module Replacement）真正按需编译Vite是在推出Vue 3的时候开发的，
2021-04-28 15:04:02
12893
9
原创 头疼的正则表达式
正则表达式对于正则表达式的学习，一直是比较头疼，但主要原因还是因为他的字符、规则偏多，所以对于我来说是因为懒惰吧，用心去总结，慢慢递进，还是可以改变这种状态的。正则表达式(Regular Expression)其实就是一门工具，目的是为了字符串模式匹配，从而实现搜索和替换功能。从它的命名我们可以知道，它是一种用来描述规则的表达式。而它的底层原理也十分简单，就是使用状态机的思想进行模式匹配。大家可以利用regexper.com这个工具很好地可视化自己写的正则表达式:从字符出发先来了解一些常用的字符
2021-04-28 14:04:20
256
原创 算法成长记：单词替换，合并二叉树
单词替换在英语中，我们有一个叫做 词根(root)的概念，它可以跟着其他一些词组成另一个较长的单词——我们称这个词为 继承词(successor)。例如，词根an，跟随着单词 other(其他)，可以形成新的单词 another(另一个)。现在，给定一个由许多词根组成的词典和一个句子。你需要将句子中的所有继承词用词根替换掉。如果继承词有许多可以形成它的词根，则用最短的词根替换它。你需要输出替换之后的句子。输入：dictionary = [“cat”,“bat”,“rat”], sentence =
2021-04-27 18:39:07
214
原创 删除对象属性的三种方法
How to remove a property from a JavaScript object怎么删除一个对象上的属性呢？dleteconst car = { color: 'blue', brand: 'Ford'}delete car.branddelete car['brand']delete car.branddelete newCar['brand']Setting a property to undefined如果你需要以一种非常优化的方式来执行这个操作
2021-04-22 14:44:07
38022
转载 Tree-Shaking性能优化实践 - 原理篇
一. 什么是Tree-shaking当初我是在一些打包的过程中看到过这个词，但是也不太理解他是做什么的，字面意思是树-摇动。上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shakin
2021-04-22 14:35:39
339
原创 js继承的方式你知道那些
继承在java中，我们对继承并不陌生，java面向对象，其中他的一个特性就是继承，因为继承有很多好处，那么在js中我们是怎么实现继承的呢？你知道有哪些方式呢？先列举我们常用的继承的方式：原型链继承，原型链的知识在前面记录了原型在上篇中，我们知道可以给原型上添加属性或者方法，这样实例之间是可以公用这些属性和方法的，这减少了内存消耗。构造函数继承组合继承寄生组合式继承下面来分别讲讲他们的好处和不足，以及一步步优化。原型链继承实现function Parent() { this.na
2021-04-21 20:11:35
81
原创 算法成长记-删除链表的倒数第 N 个结点
给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。进阶：你能尝试使用一趟扫描实现吗？输入：head = [1,2,3,4,5], n = 2输出：[1,2,3,5]输入：head = [1], n = 1输出：[]输入：head = [1,2], n = 1输出：[1]对于链表之类的题目，不会做主要是不熟悉链表的结构特点和没有熟悉链表的操作，今天就来刷一道简单的链表题目。题目分析：我一开始想到的是索引：我还是习惯了数组思维吧，那就现用这种思维想下去；首先倒数第n个，那
2021-04-20 20:45:45
88
原创 加深了对原型-原型链的理解
原型及原型链为什么会有原型呢？继承？更好的扩展？在原型上添加属性或者方法有什么好处？如果不通过原型的方式，每生成一个新对象，都会在内存中新开辟一块存储空间，（这是构造函数的特性，当然每生成一个新的对象就是一个新的内存了），当对象变多之后，性能会变得很差。但是通过这种方式：如图：Player.prototype.xx = function () {};Player.prototype.xx = function () {};Player.prototype.xx = function () {}
2021-04-19 19:55:14
102
原创 算法成长记：电话号码的字母组合
电话号码的字母组合给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。输入：digits = “23”输出：[“ad”,“ae”,“af”,“bd”,“be”,“bf”,“cd”,“ce”,“cf”]输入：digits = “”输出：[]输入：digits = “2”输出：[“a”,“b”,“c”]这个题目看似不陌生，但是实现起来还是需要转换一下思想。首先，我们需要把数字转换
2021-04-19 19:41:15
155
原创 js怎么把字符串转数字
最近在掘金上看到一位大三的学生总结的一个js面试题:将字符串转换成数字。看了他的文章真让我想起去年的自己。parseInt(num);还是写代码比较快乐：如下arseInt(12)12parseInt(12.09)12parseInt(-0.98)-0parseInt('12')12parseInt('12df')12parseInt('adh')NaNparseInt('1+2')1parseInt('4*6')4parseInt('3/2')3parseInt(
2021-04-19 16:19:15
1140
原创 了解docker
dockers是什么Docker的思想来自于集装箱。我的理解就是docker把我们的代码、运行环境封装在了一个箱子里，我们只要拥有这个箱子里的东西就可以运行我们的程序。相信很多人都用过虚拟机。虚拟机，就是在你的操作系统里面，装一个软件，然后通过这个软件，再模拟一台甚至多台“子电脑”出来。在“子电脑”里，你可以和正常电脑一样运行程序，例如开QQ。如果你愿意，你可以变出好几个“子电脑”，里面都开上QQ。“子电脑”和“子电脑”之间，是相互隔离的，互不影响。虚拟机属于虚拟化技术。而Docker这样的容器技术
2021-04-19 14:35:22
142
原创 面向对象编程
在讲面向对象编程之前，先讲讲我们常用的面向过程编程。什么是面向对象面向对象是一种思想，是我们在编程过程中采用的一种编程思想，但它并不是一种规范，不是一种约束。那么你们知道面向过程是什么吗？我们在写js的时候，大部分我们写代码都是面向过程的，比如：我要实现一个需求，第一步做什么，第二步做什么…也就是说：面向过程关注的重点是动词，是分析出解决问题需要的步骤，然后编写函数实现每个步骤，最后依次调用函数。而面向对象关注的重点是主谓，是把构成问题的事物拆解为各个对象，而拆解出对象的目的也不是为了实现某个
2021-04-19 01:23:37
87
原创 算法成长记-括号生成，最长公共前缀
括号生成：描述：数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且 有效的 括号组合。输入：n = 3输出：["((()))","(()())","(())()","()(())","()()()"]代码实现：思想：括号生成有什么特征呢？左括号，右括号匹配入栈的方式，当剩余的左括号大于0的时候，可以把左括号推入，当剩余的右括号大于左括号的时候可以推入右括号/** * @param {number} n * @return {string[]} */var ge
2021-04-19 00:55:35
111
原创 umi的可视化分析
官网给出的步骤：只有这两条命令，当时我还不知道怎么配置，就是运行也没用，后来通过查找资料，总结了如下步骤：// 安装依赖 1. npm install --save-dev umi-webpack-bundle-analyzerpackage.json配置.umirc.ts配置// 启动分析 4. npm run analyze之后会打开浏览器窗口，可以看到下面:这样就可以去分析umi打包大小了，你可以去做自己的优化。...
2021-04-18 10:12:49
1844
原创 umi的学习记录-搭建项目
什么是umi可扩展的企业级前端应用程序框架,插件化的企业级前端应用框架。特性???? 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。???? 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。???? 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信
2021-04-18 01:24:26
651
1
原创 算法成长记：两数相加,最长回文串，三树之和
两数相加给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的，并且每个节点只能存储 一位 数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外，这两个数都不会以 0 开头。/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this
2021-04-17 00:07:17
100
原创 移动端开发的vconsole插件
vConsoleA lightweight, extendable front-end developer tool for mobile web page.一个轻量级、可扩展的移动网页前端开发工具功能：查看控制台日志查看网络请求查看文件元素查看Cookies、LocalStorage和SessionStorage。手动执行JS命令自定义插件使用方法：npm install vconsoleor<script src="path/to/vconsole.min.js">
2021-04-16 11:57:36
7125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人