- 博客(70)
- 收藏
- 关注
原创 Node常用内置模块之url模块和querystring模块
url模块在v16的nodejs中已经明确被废弃,在将来的升级node中,可能被不支持。官网建议在后,URL类。
2023-08-30 16:57:51
690
原创 Node常用内置模块之path模块
结果: '/foo/baz'拼接前面路径 '/foo/bar' ,但是不包含前面路径最后 '/bar' 这部分。
2023-08-29 18:30:31
272
原创 mac安装nvm成功,关闭终端后,仍然报错:zsh: command not found:nvm 解决方案
mac安装nvm成功,关闭终端后,仍然报错:zsh: command not found:nvm 解决方案
2022-06-21 00:20:30
4641
3
原创 mac安装nvm报错 :HTTP/2 stream 1 was not closed cleanly before end of the underlying stream 解决方案
mac安装nvm报 :HTTP/2 stream 1 was not closed cleanly before end of the underlying stream 错误的解决方案
2022-06-20 22:01:38
4579
原创 mac安装nvm报错 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused解决方案
mac安装nvm报错 443 解决方案
2022-06-20 21:55:45
2549
原创 VSCode 插件篇—— Settings Sync 同步你的 VSCode 用户配置
1、安装拓展 Settings Sync在 VSCode 拓展中搜索 Settings Sync 并安装,安装完成后,重启 VSCode2、设置 Github Person Access Token这一步需要你有一个 github 的账号,因为我们需要把配置上传到 github gist 上保存。有了 github 账号后,直接进入这个页面:https://github.com/settings/tokens,点击 generate new token。写入 token 的描述并勾选 gist
2022-01-19 17:21:30
848
原创 Webpack5学习笔记(基础篇九)——缓存
通常,我们使用webpack来打包我们的模块化后的应用程序,webpack 会生成一个可部署的/dist目录,然后把打包后的内容放置在此目录中。只要/dist目录中的内容部署到server上,client (通常是浏览器)就能够访问此server的网站及其资源。而最后一步获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。由于
2022-01-11 15:19:46
1178
原创 Webpack5学习笔记(基础篇八)——代码分离
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代码防止重复:使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk动态导入:通过模块的内联函数调用来分离代码。1、入口起点(entry)
2022-01-10 09:11:21
837
2
原创 JS学习笔记——数据未加载时,内容高度不确定的展开收起按钮显隐问题
今天同事问了我一个问题,有一个“展开—收起”的按钮,如果数据部分高度超过某个临界值,就展示这个按钮;如果数据部分高度没有超过某个临界高度,就不展示。但是最开始页面加载时,数据还没有请求回来,无法得知具体高度。而在日常开发中,我们也经常会遇到有些区块内容可以展开收起的需求,例如以下这两种:固定高度式:对于内容固定,高度固定的情况,很好实现,可以一开始就显示展开/收起按钮,点击切换区块的高度即可。非固定高度式:而对于内容多少不固定,最终高度也不一定的情况,则稍显复杂,难点在于:内容未超出规
2022-01-07 22:16:14
441
原创 Webpack5学习笔记(基础篇七)—— Loader加载器
1、Loader的作用webpack可以自动解析js和json格式的文件,这个是webpack开箱即用的功能,那如果要解析其他类型的文件呢,比如一张图片?前面我们讲过 Asset Module功能可以,而作为最常用的解析工具,loader也可以将这些非js的文件转化为有效的模块。webpack允许我们使用loader来处理文件,loader是一个导出为function的node模块,说白了,loader就是一个函数function。可以将匹配到的文件进行一次转换,同时loader可以链式传递。2、L
2021-12-27 23:06:53
2769
2
原创 Webpack5学习笔记(基础篇六)—— Assets资源模块的加载
在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。webpack 最出色的功能之一就是,除了引入 JavaScript,还可以内置的资源模块 Asset Modules 引入任何其他类型的文件。在webpack4的时候以及之前,我们通常是使用file-loader与url-loader来帮助我们加载其他资源类型。1、Asset Modules Type的四种类型而webpack5可
2021-12-26 20:46:27
4028
1
原创 Webpack5学习笔记(基础篇五)—— mode之Development环境相关参数配置
在Webpack5中,mode(模式)有三种:development(开发环境模式)production(生产环境模式)none或' '(空)在不同模式中,我们可能对于webpack.config.js配置文件进行不同参数的设置比如,在development开发环境中,我们可能使用devTool,devServer等对webpack打包后的代码进行浏览器调试;在production生产环境中,我们可能在optimization配置下面的minimizer中使用CssMinimizerPlugi
2021-12-26 16:45:12
2902
1
原创 Webpack5学习笔记(基础篇四)——Plugins插件
1、Plugins作用Webpack中另一个非常重要的功能是Plugins,我们称之为插件。插件(Plugins)是用来拓展webpack功能的,它们会在整个构建过程中生效,执行相关的任务。2、Plugins和Loaders的区别有个题外话,在webpack中还有一个概念,那就是loaders,这两个次经常被用来做对比,我也常常弄混,但是他们是完全两个不同的东西。Loaders(加载器):是在打包构建过程中用来处理源文件的(JSX,Scss,Less…),一次处理一个Plugins(插件)并不
2021-12-26 15:40:36
1323
1
原创 Webpack5学习笔记(基础篇三)——webpack基础安装与打包
在安装webpack之前,我们要先安装 node,因为webpack是构建在node.js之上。1、安装node.js使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。 使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能,或者缺少相关的package。Node下载地址——Node.js官网(mac 可能会下载 .pkg 文件,windows 可能会下载 .exe 或 .msi 文件)下来就是按照操作步骤点击下一步安装就行
2021-12-26 14:32:49
946
原创 Webpack5学习笔记(基础篇二)——module、chunk和 bundle 的关系和区别
在学习webpack相关知识的时候,总是遇到这个名词,module、chunk和bundle,只是大概知道是模块之类的意思,但是不知道具体的关系,所以就想研究一下。首先我们在 src 目录下写我们的业务代码,引入index.js、utils.js、common.js 和 index.css 这 4 个文件,目录结构如下:src/├── index.css├── index.html # 这个是 HTML 模板代码├── index.js├── common.js└── utils.jsin
2021-12-25 20:30:33
848
1
原创 Webpack5学习笔记(基础篇一)—— webpack相关介绍
1、webpack是什么webpack 是前端的一个项目构建工具,它是基于Node.js开发出来的一个前端工具。WebPack可以看做是模块打包机(bundler),通过分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。2、为什么要使用webpack2.1、js和css依赖问题JavaScript和CSS的依赖问题。开发过程中,JavaScript和CSS的在页面中的顺序问题,经常会造成CS
2021-12-25 18:20:21
859
原创 JS学习笔记——前端的webview是什么东西
1、webview是什么?作用是什么?和浏览器有什么关系?先放一段基本定义:A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web page
2021-12-08 22:26:48
6475
原创 JS学习笔记——new Date()日期格式处理
在日常开发过程中,我们常常用到日期或者时间戳,所以我索性就把这个知识点汇总一下,写篇博客记录。1、new Date() 参数格式new Date() 的参数可以为整数,也可以为字符串,但格式必须正确new Date()不传参数时,默认获取的是当前日期new Date()//Mon Dec 06 2021 21:32:28 GMT+0800 (中国标准时间)new Date(1137075575000)//Thu Jan 12 2006 22:19:35 GMT+0800 (中国标准时间)
2021-12-06 21:33:29
21869
1
原创 JS学习笔记——正则表达式面试题(永不停更)
1、匹配用尖括号括起来的以a开头的字符串var str = "this is a <a herf='www.baidu.com'>,not a <img src='xxx'>";var reg = /<a[^>]+>/g;console.log(str.match(reg));//["<a herf='www.baidu.com'>"]2、匹配xxyy模式var reg = /(\w)\1(\w)\2/g;3、- 转 驼峰:the-f
2021-11-23 19:07:14
2060
原创 JS学习笔记——从入门到熟练掌握正则表达式(全网最细的讲解含元字符、修饰符、正则方法、特殊用法)
不管是在平时工作学习中,还是面试中,经常会碰到使用正则表达式的场景,平时对这方面没有下功夫,都是用的时候现查先用,过后就忘了,所以想写一篇博客来记录学习一下正则表达式。1、什么是正则正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换2、正则的定义在创建正则表达式的时候有两种方法:2.1、RegExp构造函数var pattern = new R
2021-11-08 22:30:04
486
1
原创 JS学习笔记——事件循环机制Event loop(面试必问)
不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。Event Loop 这个概念相信大家或多或少都了解过,但是有一次被一个小伙伴问到它具体的原理的时候,感觉自己只知道个大概印象,于是计划着写一篇文章,用输出倒逼输入,让自己重新学习这个概念,同时也能帮助更多的人理解它。1、JavaScript单线程先简单介绍几个相关概念:进程: cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)。比如你正在运
2021-10-30 11:58:47
960
1
原创 JS学习笔记——一道有趣的JavaScript连等=赋值面试题
1、面试题今天无意中在网上看到一道面试题,据说是阿里的(我也无从考证),题目如下var a = {n: 1}var b = aa.x = a = {n: 2}console.log(a.n, b.n)console.log(a.x, b.x)先说答案a.n = 2 b.n = 1a.x = undefined b.x = {n: 2}不出所料,我答错了,于是便上网找解析,看了好多文章,感觉猜想和说法都是五花八门,我也是捉摸了好久,才理解过来。2、连等=执行顺序假设有一句
2021-10-28 19:28:31
489
原创 工具应用——如何利用手机相机拍出好看的照片
平时我们拍照的时候可能拿出相机直接就拍了,但是很多时候成品就是妥妥的游客照,有的看起来有点土,所以我特意搜集了一些手机拍照的小技巧,让你成为拍照高手。1、九宫格构图九宫格构图是将被摄主体放在“九宫格”交叉点的位置上。“井”字的四个交叉点就是主体的最佳位置。九宫格的4条线交汇的4个点是人们视觉最敏感的地方。这4个点也就是人们的“视觉集中点”在手机设置中,打开九宫格线条,便于在实际拍摄中辅助进行九宫格构图,苹果手机和安卓手机的网格线都可以在设置中打开。在拍摄照片时,可以考虑把主体景物放置在4个网格线
2021-10-27 23:28:47
737
1
原创 JS学习笔记——由setTimeout面试题引出的浏览器(内核)渲染进程话题
1、setTimeout面试题这几天看到一个有趣的问题,是关于setTimeout的,题目如下:问:是页面是先渲染出1000个元素,还是控制台先打印出数据?如果渲染1000000个元素,谁先进行?<div id="app"></div><script> window.onload = function () { let startTime = +new Date(); let oApp = document.getEleme
2021-10-25 23:39:38
447
原创 计算机知识——JavaScript中常用的&和&&、|和||的用法和区别
今天突然碰到&符号,但是平时&&符号用的多了,突然忘了&符号怎么用,记得大学时候上课这些都学过,哎,真是好记性不如烂笔头,虽然看着简单,但是长时间不用也会忘,索性写篇博客记录一下。1、&...
2021-10-12 11:58:08
1353
1
原创 JS学习笔记——JavaScript中字符串的常用方法和基本使用
在上篇的文章中,我简单的将JavaScript中数组的方法进行了总结,这些内容对工作或者面试都有用,同时自己也有许多收获,这篇我们就对JavaScript中字符串的常用方法和使用进行总结1、slice语法:字符串.slice(start,end)参数:start(必填):表示开始截取的索引位置(可以为负数)end(可选):表示结束截取的索引位置(如果第二个参数不存在,则表示截取到字符串末尾)(可以为负数)????【 注:包前不包后】功能:提取字符串的某个部分返回值:返回被提取的新的字符
2021-10-12 10:30:47
343
1
原创 工具应用——Chrome浏览器 F12控制台中文改成英文
今天打开浏览器,调试控制台的时候,控制台给了一具体是,我直接点了Reload DevTools没想到点完,直接就变成中文了这给我整懵了,平常看英文控制台习惯了,突然改为中文不习惯,所以我还是想用英文,一时没找到入口,上网查了一下,原来这么简单。步骤:(1)点击控制台右上角的这个图标(2)“语言”选项从浏览器界面语言设置成英文(3)然后重新加载DevTools,控制台就又变成英文了...
2021-10-11 11:09:51
24026
8
原创 JS学习笔记——JavaScript中数组的常用方法和基本使用
在平时工作和学习中,我们常常面对的就是对于数组、对象和字符串的处理,这些知识散而碎,所以我就想抽个空来总结一下,今天这篇先来聊聊前端中关于数组(Array)的一些方法的使用(本文会持续更新)...
2021-09-28 23:01:57
479
3
原创 JS学习笔记——return、break和continue的使用和区别
平时在一些循环或者函数的使用中,我们经常用到return、break和continue,但会出现用错的地方,所以今天就来总结一下。1、三者比较在 break,continue和return 三个关键字中, break,continue是看做一类的,return 是函数返回语句,但是返回的同时也将函数停止。相同之处:三个都会将此时进行的语句停止。不同之处:break:是立即结束当前语句,并跳出当前语句,进行下个语句执行continue:是停止当前语句,并从头执行该语句return:停止函数
2021-09-27 16:59:25
2901
2
原创 JS学习笔记——高级编程中compose函数的介绍和基本实现
1、前言在之前探讨redux的中间件的时候,applyMiddleware源码中有遇到过compose()函数,当时不太明白起作用,所以就上网好好查了一下,做了个总结。2、普通函数在函数式编程当中有一个很重要的概念就是函数组合, 实际上就是把处理数据的函数像管道一样连接起来, 然后让数据穿过管道得到最终的结果。例1:const fn1 = (x) => x + 10;const fn2 = (x) => x * 10;const fn3 = (x) => x - 10;co
2021-09-23 17:52:26
4482
原创 React学习笔记——redux里中间件Middleware的运行机理
1、前言上篇文章中,我们详细介绍了redux的相关知识和如何使用,最后使用中间件Middleware来帮助我们完成异步操作,这篇我们来研究研究Middleware。2、正文我们以redux-thunk为例,从node_modules文件夹下面找到redux-thunk文件夹,查看其源码(下图为redux-thunk源码,一共12行)function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) =&g
2021-09-22 20:58:18
504
原创 JS学习笔记——JavaScript中常用的typeof、instanceof和Object.prototype.toString()等方法基础介绍
今天浏览博客时,看到一篇JS中对类型判断讲解的文章,感觉写的听好,正好平时在工作中也经常遇到判断类型的情况,所以就想记录一下。1、typeof众所周知,js是一门弱语言,它在声明变量时无需确定变量的类型,js在运行时会自动判断。那么如何判断一个变量的类型呢,js提供了typeof运算符。1.1、typeof的作用typeof运算符:是用来检测一个变量的类型, 把类型信息当作字符串返回,值包括如下6种:undefined:表示未定义的变量或值boolean:表示布尔类型的变量或值string:
2021-09-21 19:12:34
529
原创 计算机相关知识——前端Base64编码解码的基础使用
1、前言在我之前的博客中,介绍有关ASCII的相关知识计算机相关知识——字符编码中ASCII、Unicode和UTF-8的相关知识也略微提及了Base64的概念,但没有细说,这期来简单聊聊Base64。2、为什么使用Base64我们知道,Ascii码的128~255之间的值是不可见字符。在网络上交换数据时,比如从A地传到B地,往往要经过多个路由设备,由于不同的设备对字符的处理方式有一些不同,这样那些不可见字符就有可能被处理错误,这是不利于传输的。所以就先把数据转为Base64编码,统统变成可见
2021-09-15 20:31:18
1754
原创 计算机相关知识——字符编码中ASCII、Unicode和UTF-8的相关知识
1、位计算机存储信息的最小单位,称之为位(bit),音译比特,二进制的一个“0”或一个“1”叫一位。2、字节字节(Byte) 是一种计量单位,表示数据量多少,它是计算机信息技术用于计量存储容量的一种计量单位,8个二进制位组成1个字节,而8个二进制位就可以组合出256种状态。所以一个字节一共可以用来表示256种不同的状态,每一个状态对应一个符号,就是256个符号,从00000000到111111113、字符字符是指计算机中使用的文字和符号,比如“1、2、3、A、B、C、~!·#¥%…*()+”等等。
2021-09-15 07:54:41
738
原创 JS学习笔记——前端关于File、Blob、FileReader和ArrayBuffer的相关概念知识
1、前提这几天在开发过程中,遇到了下载文件问题,其中服务端返回二进制文件流,需要前端自己对二进制文件流进行转换,用到了new Blob()方式,便上网查阅相关资料。2、Blob对象2.1、概念介绍Blob 全称:Binary Large Object(二进制大型对象)Blob 对象是一个前端的一个专门用于支持文件操作的二进制对象,表示一个二进制文件的数据内容。通常用来读写文件,比如一个图片文件的内容就可以通过 Blob 对象读写。在JS中,有两个构造函数:File 和 Blob,而File继承了
2021-09-14 10:12:21
3560
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人