- 博客(52)
- 收藏
- 关注
RSS订阅原创 使用nvm切换node版本，npm 未安装的问题
nvm 版本切换，部分 node 版本没有自动安装 npmhttps://www.cnblogs.com/ejll/p/11229557.htmlnvm 包存放路径：C:\Users[userName]\AppData\Roaming\nvm查看 node 与 npm 版本的对应关系：https://nodejs.org/zh-cn/download/releases/npm 下载：https://registry.npmmirror.com/binary.html?path=npm/当切换到某个
2022-03-05 14:35:46
1272
1
原创 Lerna 演练
安装全局安装 lerna： npm install -g lerna指令备查指令描述lerna bootstrap --hoist安装依赖lerna clean删除各个包下的node_moduleslerna init创建新的lerna库lerna list显示package列表lerna changed显示自上次relase tag以来有修改的包， 选项通 listlerna dif显示自上次relase tag以来有修改的包的差异， 执
2022-03-04 07:41:32
412
原创 代码简洁小技巧
看了篇别人的文章，有 Get 到新的小技巧，Mark 一下 ~接收多个接口返回结果async function getUserSongs(){ return await Promise.all([ fetch('/user'), fetch('/songs') ]);}const [user, songs] = getUserSongs();函数参数较多时可以把一些次要参数丢到一个对象里呀，这样使用的时候就灵活多了Badfunction renderer(va
2022-02-12 10:37:35
436
原创 ES 链式判断运算符 ?. | 非null非 undefined 判断 ?? | CSS inset
ES: 链式判断运算符 ?. （ES2020新特性）看 Ant Design 源码的时候看到 onCancel?.(e); 这个写法，结合上下文推断是先判断有无再执行的意思，但不知道是哪来的写法，跑去群里一问得知，是 2020 新特性呀！???? 还有下面的 ??，这俩可太实用了，我得Mark 一下。const street = user?.address?.street;//等价于const street = user && user.address && user
2021-09-17 08:40:39
583
原创 Note_Typescript
TypeScript 学习开发环境Playground —— 在线开发 TypeScript 的云环境npm i -g typescript ：TypeScript 安装tsc -v ：查看 TypeScript 版本npm i -g ts-node： ts-node，可直接运行 ts 代码文件（本质上是先自动进行转译，再运行）tsc --init ：快速创建一个 tsconfig.json 文件，用于配置 TypeScript 的行为tsc xx.ts ：将 .ts 文件转译为 .js 文件
2021-09-13 22:33:02
90
1
原创 [].slice.call(document.querySelectorAll(‘li‘), 0)：类数组转数组
前言今天看到一句这样的代码：[].slice.call(document.querySelectorAll('li'), 0)这是在干嘛？没看懂。搜了一下，大家说，这是在把DOM节点数组转为真正的数组。哦~ 我想起来了，好像是有这么回事，selector 返回的数组好像是叫「类数组」来着。什么是类数组类数组又叫伪数组，是形似数组，但不是数组的类数组对象。函数的 arguments 参数，以及 DOM 元素查找方法返回的 nodeList 对象都属于类数组。类数组和数组的区别类数组：有遍历方法
2021-09-09 08:19:43
548
1
原创 事件的发布-订阅实现
学习笔记，简要记录一下。适用场景监听事件的位置和触发事件的位置不受限，可以用于任意组件间的通信。Vue 中的 EventBus 就是一个典型应用。实现思路处理事件和监听函数的对应关系 —— 用对象（eventMap）存储事件和处理函数的映射关系实现事件订阅 —— 往 eventMap 写入事件处理函数实现事件发布 —— 从 eventMap 读取事件处理函数并依次执行具体实现class myEventEmitter { constructor() { this.event.
2021-09-06 22:46:15
546
原创 TypeScript 中的 implements 和 extends
类和接口常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中可以。在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）（不包含构造函数和静态成员，这些不是实例的东西）。所以我们既可以将 Point 当做一个类来用， 也可以将 Point 当做一个类型来用。extends（继承）和 implements（实现）因为类可以作为接口使用，或者说因为类同时实现了接口，所以 TypeScript 中可以有如
2021-09-01 14:38:51
9095
原创 JS 错误捕获机制
前言Javascript 引擎是单线程的，因此一旦遇到异常，Javascript 引擎通常会停止执行，阻塞后续代码并抛出一个异常信息，因此对于可预见的异常，我们应该捕捉并正确展示给用户或开发者。Error 对象当运行时错误产生时，Error的实例对象会被抛出。该错误对象有两个属性：err.name：错误的名称/错误的类型err.message：错误的提示信息创建一个Errornew Error([message[,fileName[,lineNumber]]])错误类型js共定义了下列
2021-08-10 23:45:55
976
原创 理论篇 | 浏览器缓存机制
这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战前言网络层面的性能优化，使用缓存是一个最直接有效的方案。使用缓存可以减少网络 IO 消耗，提高访问速度，效果显著。因此，认识一下浏览器的缓存机制很有必要。上图 Network 面板的截图中，我们在 size 列可以看到缓存的获取来源。浏览器缓存机制有四个方面，它们按请求的优先级依次排列如下：Memory CacheService Worker CacheHTTP CachePush CacheChrome 官方的缓存决
2021-08-10 00:04:04
113
原创 理论篇 | 窥探浏览器运行的幕后
前言上一篇《开篇 | 关于前端性能优化的探索》中提到，性能优化需要围绕着网络请求的过程和浏览器渲染机制去展开。但其中提到的渲染过程仅仅是关键路径渲染的部分，对于回流和重绘、UI渲染和JS引擎互斥的原因尚未明确。为了更好的理解这些，接下来我们深入认识一下浏览器的运作机制。进程和线程进程是一个程序运行的实例、是线程的容器 ， 操作系统会为进程分配独立的内存（进程之间互相独立）；线程是进程的组成部分，线程共享进程所分配的资源（包括代码段、数据集、堆等）；一个程序至少有一个进程，一个进程至少有一个线程（
2021-08-08 04:46:09
108
原创 开篇 | 关于前端性能优化的探索
前言性能优化是每个前端都绕不过去的课题。说到性能优化，网上一搜一大把《前端性能优化的N条建议》，诸如：1.减少 HTTP 的请求数；2. 使用 CDN；3. 添加 Expires 头；4. 避免重定向；5. 将 CSS 样式放在页面的上方；6. 将脚本移动到底部；7. 减少 DOM 操作；8. 给图片设置尺寸；9. 减少 DNS 查询；10. 压缩 JavaScript 和 CSS……噼里啪啦一大堆，这对于记性不大好的我来说，这种琐碎且毫无章法的1.2.3，太难了啊，能不能先归纳一下？比如说：
2021-08-07 22:22:33
96
原创 Vue 2.x / nextTick
源码总览看看 next-tick.js 中主要做了什么事情：定义了三个变量，一个函数callbacks：Arraypending：BooleanflushCallbacks：FunctiontimerFunc：undefined进行一堆 if..else if.. 判断 （给 timerFunc 降级赋值的过程）抛出一个函数 nextTick//next-tick.js let callbacks = [];let pending = false;function flush
2021-08-05 23:52:13
147
原创 Puppeteer 实战场景 —— 生成 PDF
给单个 HTML 生成 FDP这里拿 Vue 文档为例，把文档的介绍页转存为 pdf 。注意，生成PDF只支持无界面的操作，headless 必须为 trueconst puppeteer = require('puppeteer');puppeteer.launch({ headless:true, //生成PDF只支持无界面的操作！（我刚开始调试设了 flase ，一直报错哈哈哈） defaultViewport:{ width:1920, hei
2021-07-24 18:06:30
1601
7
原创 Puppeteer 入门及常用 API
Puppeteer 简介是什么Puppeteer 是一个Chrome官方团队提供的node库，通过 devtool 控制 headless 模式的 chrome 或者 chromium，它可以在headless模式下模拟任何人为操作可以做什么1） 生成网页截图或者 PDF2） 高级爬虫，可以爬取大量异步渲染内容的网页3） 模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试4） 捕获站点的时间线，以便追踪网站、帮助分析网站性能问题运行环境Nodejs 的版本不能低于 v7.6.0
2021-07-23 23:21:39
2266
原创 node-uuid 已弃用，使用 uuid 代替
今天一个 node 服务重装了依赖，重新跑突然报错说找不到 uuid/v4 了。一脸懵逼，之前用着好好的啊？上去 npm 发现， node-uuid 已经弃用啦，替换为 uuid 就好：npm install uuid使用方式也需要相应的修改一下：import { v4 as uuidv4 } from 'uuid';uuidv4();报错信息：弃用的 node-uuid：...
2021-07-07 14:30:59
1521
1
原创 计算机常用备查
关于 Host 文件hosts 文件路径：C:\Windows\System32\drivers\etchosts 文件拒绝访问（解决方案）找到 hosts 文件，右键-属性-安全-编辑选中需要修改权限的用户名，勾选允许修改、写入，确定。
2021-06-27 13:25:49
60
1
原创 GIT 备查指南
常用 GIT 配置???? 查看、配置用户信息查看配置信息：git config --global --list配置用户名：git config --global user.name "yourname"配置用户邮箱：git config --global user.email "youremail@qq.com"???? 配置 ssh配置 ssh 后，使用ssh 地址 clone 项目，无需再输入账号密码。一次配置，永久使用。检查 ssh 是否存在cd ~/.ssh，找到 .ssh 文
2021-06-24 23:42:32
405
原创 Node运行报错：server got error: bind EADDRINUSE 0.0.0.0:8000, code: EADDRINUSE
问题node 启动服务时报错：原因端口号被占用查看端口占用情况： netstat -ano|findstr 8000解决换个端口号关闭被占用的服务
2021-06-07 13:50:57
3551
1
原创 async/await 与 map
场景要等待所有查询结果出来，才返回最终结果//...let caseList = await Promise.all( list.map(async res => { let rows = await app.mysql.query(`select * from user_case where pid = ${res.pid}`); res.pageCount = rows.length; return res; })) return { caseList, tota
2021-05-20 22:01:40
645
原创 如何在页面卸载时进行数据上报
需求场景在用户离开页面前发送请求，进行数据上报（如统计用户停留时长）编辑界面未保存退出的情况，保存数据以便恢复方案1（有毛病）在 unload / beforeunload 中发送同步请求结果报错：Uncaught DOMException: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘https://xxxx/’: Synchronous XHR in page dismissal.原因chrome 不支
2021-05-11 18:25:40
799
3
原创 【报错】【问题记录】413 Request Entity Too Large
问题原因nginx对上传文件大小有限制，默认1M解决添加 client_max_body_size 配置，按需在 http / server / location 配置（不同作作用范围）如：在 http 配置（全局配置），对所有请求都生效参考链接https://blog.csdn.net/z69183787/article/details/83070275...
2021-05-06 17:40:48
88
原创 nginx 的基本使用
安装官网下载压缩包：http://nginx.org/en/download.html解压即可直接使用。运行双击 nginx.exe 运行，或打开 cmd 命令行窗口执行 start nginx。会有个窗口弹出来，闪一下又消失，我刚开始还以为是什么错误，后来发现正常启动了也是这样的 - - …检查是否正常运行浏览器打开 localhost（默认80端口，后面配置文件解释），如果出现这样的界面，就是已经启动成功了。检查错误原因如果没有，打开 logs/error.log 查看是否有报错信息
2021-04-26 00:24:11
174
原创 【效率小贴士】chrome：snippets
看到前面写的 vscode snippest，突然想起来 chrome 也有个 snippets 的功能，也是挺好使的。可以把常用的代码片段添加到 chrome 里边，方便取用。举个例子：我想给页面所有元素加上红色边框。添加代码片段F12打开控制面板，找到 sources - snippets - New snippets，添加代码片段，保存。使用代码片段添加好之后，右键 run 即可自动执行脚本效果Tips：这个示例不只是为了演示snippets的喔，在实际开发中也是派的上用场的。这样可
2021-04-22 18:25:26
2490
2
原创 【Vue】watch 对象/数组，无法比较新旧值的问题
问题Vue 中深度监听对象/数组的修改，能监听到变化，但无法比较新旧值的变化（newVal, oldVal 输出结果是一样的）原因对象、数组是引用类型，newVal、oldVal指向同一个内存地址解决方案借助计算属性，返回一个新对象，监听该计算属性，即可获取前后值的变化。参考链接：https://blog.csdn.net/weixin_41111068/article/details/83046691https://blog.csdn.net/Claire_cz/article/det
2021-04-22 18:24:04
1229
2
原创 项目版本号怎么定义？
脑图详情：https://www.processon.com/mindmap/608115661e08534b2ef11fb9参考链接https://blog.csdn.net/u014292162/article/details/83788071https://www.jianshu.com/p/10861f582030
2021-04-22 14:37:30
330
原创 使用 vscode 代码片段：vue snippets
在这里插入代码片参考链接：https://blog.csdn.net/lxsz0214/article/details/87868859
2021-04-08 14:35:38
1526
原创 洗牌算法 —— 打乱数组
lodash 中的实现// _baseRandom.jsvar nativeFloor = Math.floor, nativeRandom = Math.random; /** * The base implementation of `_.random` without support for returning * floating-point numbers. * * @private * @param {number} lower The lower bound.
2021-04-08 11:32:58
493
原创 查看webpack版本
想着搞一下 webpack 的构建优化，网上看到一些方法说是要 webpack4 及以上的才能用。然后就要看看是啥版本来着 ——查看当前项目的 webpack 版本1.命令行执行 npx webpack -v （最方便啦）因为 webpack 是局部安装，要进入依赖包执行webpack的命令才有效，直接 webpack -v 会被认为命令无效。使用 npm 包执行器 npx 可以自动找到对应的包执行命令（一般安装了npm会自动安装npx）2. 在 package.json 添加 script 命
2021-03-25 14:29:15
25019
2
原创 webpack-bundle-analyzer 基本用法
安装npm install webpack-bundle-analyzer –save-dev配置build/config.js// build/config.js// 在 build 中配置开启包分析module.exports={ build:{ //... bundleAnalyzerReport:true //开启bundleAnalyzerReport }, //...}build/webpack.prod.config.js// build/w
2021-03-12 15:29:02
952
原创 去哪里看 ECMAScript 最新标准？
前言ECMAScript 标准是谁制定的？流程是什么？哪里可以看到最新的标准？由谁制定TC39，即ECMA组织的39号技术委员会（Technical Committee 39），是一个推动 JavaScript 发展的委员会，由众多互联网公司和各大主流浏览器厂商的代表共同组建，是一种开放性的指导委员会，所有的ECMAScript标准都是由TC39委员会制定的，并标准生成的流程，实现 。ECMAScript标准的制定流程一种新的语法从提案到变成正式标准，需要经历5个阶段 ——Stage 0 - S
2021-02-26 08:54:11
678
原创 移动开发技术对比（脑图）
移动开发技术对比（脑图）：https://www.processon.com/view/link/603845227d9c0872a695fee6
2021-02-26 08:51:06
142
1
原创 Vue 生命周期
Vue 生命周期beforeCreatedcreated：完成初始化注入，可以访问到 data、props、methodsbeforeMount：挂载DOM之前，此时无法访问到 DOM 元素mounted：完成DOM挂载，可以访问 DOM 元素beforeUpdate：data 被修改时触发；此时访问到的 DOM 元素仍是旧的updated：更新完毕，可以访问到新元素beforeDestorydestoryed参考链接fsrookie：详解vue生命周期Vue官网：生命周期图示
2021-02-02 00:26:06
88
原创 VueRouter 基础回顾
#mermaid-svg-xmtmv05Gq7NPZtFO .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-xmtmv05Gq7NPZtFO .label text{fill:#333}#mermaid-svg-xmtmv05Gq7NPZtFO .node rect,#mermaid-svg-xmtmv05G..
2021-02-01 23:42:59
115
原创 path.resolve和path.join是干什么的？
前言vue 项目配置中经常能见到的 path.resolve() 、path.join()、__dirname，他们到底是个啥？官方的表述是：__dirname 表示运行的js文件所在的目录。path.resolve() 将路径或路径片段的序列解析为绝对路径。path.join() 将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径嗯，有点抽象。为了更好的弄明白这些，我跑了以下代码 ——前提条件以下代码都是基于下面这个目录结构和执行路径的。请
2021-01-18 20:03:20
599
3
原创 vue-cli3查看webpack默认配置
前言从vue-cli3.0 版本开始，取消了 build 和 config 文件夹，webpack相关的配置被隐藏了起来。要对 webpack 做个性化配置，需要在根目录创建vue.config.js 文件进行配置覆盖。但是我们怎么知道 vue-cli 内置了什么样的配置呢？vue-cli 官方提供了 inspect 命令 ——查看 webpack 配置的方法：vue inspectvue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置，为方便查看，可以.
2020-11-18 13:40:38
4958
1
原创 通过创建符号链接，修改 Chrome 用户缓存文件夹
创建符号链接，从结果上来看类似创建快捷方式。对符号链接文件读写和更改时，系统会自动转为对原文件的读写和更改。例如，如果某个目录必须放在C盘，而C盘又太满了，可以为此目录建立一个符号链接，仅将符号链接放到C盘，从而自动将所需要的空间转移到其他磁盘上。1. 打开 chrome 浏览器，在地址栏输入 chrome://Version，按下回车，找到个人资料路径2. 进入该文件夹，找到 Cache 文件夹并删掉它，要关闭chrome才能删除3. 另外找个喜欢的地方（非系统盘），建立一个 Cache .
2020-11-17 14:27:38
315
原创 npm ERR! errno 3221225477
F:\uidp>npm run build> uidp@1.0.0 build F:\uidp> node build/build.js## Fatal error in , line 0# Check failed: U_SUCCESS(status).####FailureMessage Object: 0000005873AFD1B0npm ERR! code ELIFECYCLEnpm ERR! errno 3221225477npm ERR! uid
2020-11-17 07:42:00
9982
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人