- 博客(67)
- 收藏
- 关注
RSS订阅原创 利用koa.js编写一个错误日志采集服务器
这段代码首先配置了Winston日志库来输出日志到控制台。然后创建了一个Koa实例，并使用了koa-bodyparser中间件来处理POST请求的JSON体。接着定义了一个错误日志采集的接口/log，它会接收JSON格式的日志条目，并使用Winston库记录错误。最后，服务器监听在指定的端口上。
2024-09-23 22:39:46
328
1
原创 编写webpack插件自动找到大文件并上传到指定服务器
确保替换http://yourserver.com/upload为你的实际上传服务器地址，并且服务器能够处理POST请求并接收文件数据。3、在emit钩子中，你可以获取编译后的assets，并计算出哪些文件超过了你定义的大小阈值。4、使用Node.js的http模块或第三方库（如request）发送POST请求上传文件。编写一个Webpack插件来自动找出大文件并上传到指定服务器。2、在插件中监听webpack的特定钩子，比如emit。1、创建一个Webpack插件。
2024-09-23 22:33:56
443
原创 编写webpack插件自动上传sourceMap
这个插件会在每次编译后寻找sourceMap文件，并将其上传到指定的服务器。这个例子假设服务器支持HTTPS，并且上传是通过POST请求实现的。根据实际情况，可能需要调整上传逻辑。一个简化的Webpack插件示例，用于自动上传sourceMap文件到服务器。
2024-09-23 22:28:16
447
原创 数组reduce方法使用案例
累积器，即上一次回调函数执行的返回值。initialValue：可选。currentIndex：可选。currentValue：必需。当前元素所属的数组对象。2、统计数组中各个元素出现的次数。
2024-07-11 17:47:33
198
原创 for in和for of对比
上面的代码中，对象obj是可遍历的（iterable），因为具有Symbol.iterator属性。ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。NodeList 对象。
2024-07-09 18:48:40
379
原创 数组操作forEach和map
结论：如果操作数组项item改变，对于数组项目是基础数据类型的，forEach和map都不会改变原数组；对于数组项目是引用数据类型的，forEach和map都会改变原数组；返回一个和原数组长度一致的新数组，可以进行链式操作；break 语句用于中断循环的功能只适用于 for 循环或 while 循环。2、入参匿名函数都支持三个参数，当前项item，当前项索引index，原始数组arr；数组项目是基础数据类型的可以通过遍历+访问数组下标来改变原始数组。1、都是循环遍历数组中的每一项。forEach会改变。
2024-07-05 18:57:13
390
原创 vue双向绑定原理
使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，通过操作dom修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值，即可实现这样的一个简单的数据双向绑定。输入框内容变化时，data 中的数据同步变化，即 view => model 的变化 （ Object.defineProperty）data 中的数据变化时，文本节点的内容同步变化，即 model => view 的变化 （模板编译）
2024-06-23 20:44:28
375
原创 浅谈Promise、Async和Await
同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。关键字，把函数的执行流挂起，通过next()方法可以切换到下一个状态，为改变执行流程提供了可能，从而为异步编程提供解决方案。1、async和await是建立在Promise之上的高级抽象，使得异步代码的编写和阅读更加接近于同步代码的风格。1、async和await使得处理复杂的异步逻辑更加简单，尤其是在涉及多个依次执行的异步操作时。Promise、Async和Await比较。
2024-06-17 20:22:01
191
原创 webpack构建流程
因为在webpack看来，项目中的所有资源皆为模块，通过分析模块间的依赖关系，在其内部构建出一个依赖图，最终编绎输出模块为 HTML、JavaScript、CSS 以及各种静态文件（图片、字体等），让我们的开发过程更加高效。4、编译模块：调用相应的loader对不同的文件做转换处理，在找出该模块依赖的模块，递归本操作，直到项目中依赖的所有模块都经过了本操作的编译处理。5、完成编译并输出：根据入口和模块之间的依赖关系，生成一个个chunk，根据output输出所有的chunk到相应的文件目录。
2024-05-21 18:10:42
391
原创 vue2和vue3diff算法对比
4、然而，拿新的一组子节点中的头部节点去旧的一组子节点中寻找可复用的节点，并非总能找到，这说明这个新的头部节点是新增节点，只需要将其挂载到头部即可。2、如果经过四个端点的比较，都没有可复用的节点，则将旧的子序列保存为节点 key 为 key ，index 为 value 的 map。3、拿新的一组子节点的头部节点去 map 中查找，如果找到可复用的节点，则将相应的节点进行更新，并将其移动到头部，然后头部指针右移。5、继续双端对比，经过上述处理，最后还剩下新的节点就批量新增，剩下旧的节点就批量删除。
2024-05-13 19:56:11
444
原创 loader和plugin区别
2、HotModuleReplacementPlugin：启用热更新 (HMR)，在运行中的应用程序中，替换、添加或删除模块，不需要完全刷新页面。总结来说，Loader是文件转换器，专注于文件的转换和处理，而Plugin是扩展器，用于扩展Webpack的功能并控制整个打包过程。2、url-loader：和 file-loader 类似，但是能在文件很小的情况下以base64 的方式把文件内容注入到代码中去。5、css-loader：加载 CSS，支持模块化、压缩、文件导入等特。
2024-05-10 18:58:34
452
原创 Js 的事件循环(Event Loop)机制
4、同步任务执行完了先执行微任务，再执行宏任务；每执行一个宏任务再去检查微任务队列，如果微任务队列有任务，会清空微任务队列后再去执行下一个宏任务；这样依次循环，形成整个事件循环。微任务：Promise.then，Promise.catch，Promise.finally，process.nextTick等。为了更灵活，增加了事件循环。3、事件有同步任务和异步任务，先执行同步任务，再执行异步任务；异步任务中有微任务和宏任务。宏任务：异步Ajax请求，setTimeout，setInterval，文件操作等。
2024-04-08 16:29:46
280
原创 es6 Class基本语法和继承
ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。构造函数、原型和实例的关系。
2024-03-29 00:24:43
447
原创 Set和Map数据结构
1、es6新的数据结构，类似对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。4、遍历方法：遍历器生成函数keys、values、entries，遍历方法：forEach。5、应用：使用Map对象来创建一个简单的路由表，可以实现添加、获取、检查、删除和遍历路由。4、遍历操作：forEach、keys、values、entries。3、操作方法：set、get、has、delete、clear。3、操作方法：add、delete、has、clear。
2024-03-26 23:10:43
392
1
原创 前端性能优化实现方式
（webpack配置文件module.exports配置optimization.minimize，package.json中配置"sideEffects": false，或者"sideEffects": [“（强制缓存Expires和Cache-Control、协商缓存Last-Modified和If-Modified-Since、ETag和If-None-Match）使用插件压缩文件（compression-webpack-plugin、uglifyjs-webpack-plugin）
2024-03-21 23:36:05
855
原创 项目性能优化之用compression-webpack-plugin插件开启gzip压缩
背景：vue项目打包发布后，部分js、css文件体积较大导致页面卡顿，于是使用webpack插件compression-webpack-plugin开启gzip压缩。
2024-01-26 15:55:01
1332
原创 前端nginx配置指南
不管是 gif,jpg,png,ico格式，都是对图片做了有损压缩，也就是说，这些格式本来就是已经压缩过的格式，再进行gzip压缩，也不会有啥明显效果，而且还消耗服务器的CPU。所以，一般都不会对图片，视频，音频这些类型的文件做gzip压缩。服务端在接受到来自客户端的请求申请头部信息：Accept-Encoding: gzip, deflate,后，会对请求的资源响应内容的实体进行相应的编码处理，并且会在服务端的响应头部信息返回相应响应头部信息。
2024-01-08 15:52:56
1620
原创 前端常用linux命令
前端开发也需要掌握一些常用的linux命令，以便在linux系统上做一些操作如nginx代理配置，项目解压发布等。11、vim 高度可定制的文本编辑器，有三种常用模式：普通模式、编辑模式、尾行模式(命令行模式)9、zip -r 压缩文件为.zip格式。10、unzip 解压缩.zip文件。3、pwd显示当前工作目录。4、mkdir 创建新目录。5、rm 删除文件或目录。6、mv 移动文件或目录。7、cp 复制文件或目录。8、cat 查看文件内容。2、ls 列出目录内容。
2023-08-22 16:27:01
362
原创 van-list van-pull-refresh实现上拉加载，下拉刷新
调用查询方法请求到数据后，将当前请求到的第二页数据合并到已有数据中，并且将加载状态loading 置为false。然后将当前请求到的数据长度list.length与请求参数中每页长度pageParams.limit做对比，如果list.length小于pageParams.limit，则将finished设置为true，此时页面底部显示finished-text没有更多了，表示加载完所有数据；：瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。用该组件可实现上拉加载。
2023-07-21 16:25:17
2785
原创 vue本地开发集成https
背景：在本地项目开发中，调用第三方服务获取音视频通话，音视频通话是采用 WebRTC 来实现的，而 WebRTC 中使用音视频设备进行取流是需要在安全域下才可以调起的设备权限。此时项目目录下会生成 4 个文件，密钥是cert.key文件，证书是cert.crt文件。进入keys文件夹双击ca.crt，在弹出的对话框中点击“安装证书”，domains后面为ip，配置本机ip，用逗号隔开。解决方案：使用npm安装mkcert，配置证书；
2023-07-10 18:25:33
1215
原创 windows系统安装nginx和使用
nginx是一个高性能的HTTP和反向代理web服务器，也是一种轻量级的Web服务器，应用非常广泛。在开发过程中，需要用到nginx作为web服务器，并且在里面做一些反向代理配置等。2、查看nginx配置文件，nginx安装目录下conf文件夹下的nginx.conf，可以看到默认监听80端口。5、关闭nginx服务，在cmd命令窗口输入nginx -s stop。4、查看nginx是否成功启动，浏览器输入localhost:80。3、启动nginx：双击绿色按钮或者到安装目录启动。
2023-06-13 15:29:06
282
原创 http状态码301、302及304
协商缓存每次读取数据都要和服务器通信，相关头信息为：Last-Modified/If-Modified-Since、ETag/If-None-Match，这两组头信息成对出现，前面为响应标头，后面为请求标头，通信后由服务器校验，返回304状态码时，浏览器直接使用缓存。2、浏览器在下一次发起请求时，会将上一次的ETag值赋给If-None-Match并放在请求标头中，服务器用这个值和上一次的值匹配，如果一致则返回304，浏览器相应读取本地缓存，否则返回200及新的资源。
2023-05-08 18:42:58
7391
原创 js判断对象为空
JSON.stringify()方法，将js对象转换成字符串，再判断该字符串与{}是否相等。Object.keys()方法，返回的是对象本身可遍历的属性键名（不含继承的）for in 循环判断。
2023-02-06 16:10:20
116
原创 数组扁平化实现
1、遍历数组，遍历数组的方法有很多，只要是能遍历数组取到数组每一个元素的方法都是一个解决方案。扩展运算符+concat方法、concat+apply方法、toString+split方法。lodash flatten、flattenDeep、flattenDepth函数的使用。Array.prototype.flat() ,数组扁平化遵循如下规则。for循环、for…传入一个整数，整数即拉平层数。传入
2022-11-14 17:10:51
259
原创 统一gis平台地图服务发布流程及使用
统一gis平台新增数据源支持shapefile和postGIS类型，并且shepefile文件必须包含shx、shp、dbf和prj文件。在统一gis平台打开数据源管理，新增数据源，数据源类型选择shapefile，encoding=gbk然后导入，查看导入后的效果，注意encoding=gbk配置，否则数据中的中文会乱码。第三方提供的数据为shx、shp、dbf文件。
2022-11-07 22:21:34
1631
原创 element ui table show-overflow-tooltip自定义样式
在使用element ui table 组件时，表格td内容太多可设置show-overflow-tooltip参数来控制显示方式，默认配置显示如下该显示方式不满足需求，需要自定义样式
2022-09-07 14:35:14
5991
1
原创 基于qiankun.js的微前端应用实战
qiankun.js介绍：qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。参考：: 介绍-qiankun优势技术栈无关；独立开发、部署；增量升级；独立运行状态隔离Why Not Iframe使用：主应用：主应用里调用app注册微应用，并通过star启动安装qiankun在src目录新建qiankun文件夹，并在里面新建一个index.js用于编写注册微应用代码initQiankun方法接口解释：register
2022-06-06 22:57:11
2423
1
原创 Fiddler抓包工具的使用
Fiddler抓包工具的使用基础配置与使用抓包PC端请求抓包手机端请求基础配置与使用1、配置允许监听https:fiddler默认监听http请求，需要手动配置允许https监听，操作如下：打开fiddler菜单->tools->options，选择https，勾选decrypt https traffic和ignore server certificate errors2、设置请求拦截：抓包PC端请求抓包手机端请求...
2022-05-16 23:34:02
1042
原创 js获取url中的某个参数
###js获取url中的某个参数方法一：正则匹配getQuery(key) { try { const href = window.location.href const reg = new RegExp(`${key}=[^&|#|\/]*`) const res = href.match(reg) return res ? href.match(reg)[0].split('=')[1] : '' } c
2022-04-26 23:10:54
557
原创 js防抖函数
js防抖函数防止函数在一定时间内触发第二次，场景：1、用户在频繁点击某个按钮，需要防止事件多次触发；2、监听鼠标滚动触发某个事件，但又不能太频繁触发某个事件debounce(func, delay, immediate = false) { let timer return function (...args) { if (timer) { clearTimeout(timer) } if (immediate)
2022-04-26 22:50:08
226
原创 js格式化日期函数
js 格式化日期函数背景：项目中经常遇见时间格式转换的问题概念：时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数时间戳转字符串格式方法：formatTime(time, pattern) { const _pattern = pattern || 'yyyy-MM-dd hh:mm:ss' const date = new Date(time) if (date.toStri
2022-04-25 23:13:15
644
原创 Git出现There is no tracking information for the current branch提示的解决办法
Git出现There is no tracking information for the current branch提示的解决办法git add *git commit -m “init feature/wangshuang”git push origin feature/wangshuanggit push --set-upstream origin feature/wangshuang
2022-04-18 23:09:38
24311
原创 vue nextTick使用场景与原理
使用场景1、created里面操作dom例子<template> <section> <div ref="hello"> <h1>Hello World ~</h1> </div> <el-button type="danger" @click="get">点击</el-button> </section></template>&l
2022-03-31 21:25:55
386
原创 前端面试基础
前端面试基础1、声明提升类问题，let const var链接: link.2、js存储方式链接: link.3、跨域与解决链接: link.4、JavaScript事件循环机制相关问题链接: link.5、闭包链接: link.6、深浅拷贝链接: link.7、js浮点数运算精度问题链接: link.8、浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程链接: link.9、script标签的defer和async链接: link.10、节流防抖链接: l
2022-03-15 10:59:16
1211
原创 vue组件间通信方式
vue组件间通信方式1、props和emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit触发事件来做到的2、中央事件总线bus非父子组件，新建Vue事件bus对象，然后通过bus.emit触发事件，bus.emit触发事件，bus.emit触发事件，bus.on监听触发的事件3、provide和injec
2022-03-15 10:58:38
92
原创 vuex的属性及使用方法
vuex的属性及使用方法state、getters、mutations、actions、modulesstate：vuex的基本数据，用来存储变量getters：从基本数据(state)派生的数据，相当于state的计算属性mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)action：和mutation的功能大致相同，不同之处在于==》1.Action提交的是mutatio
2022-03-15 10:51:20
222
原创 js存储方式
js存储方式cookiesessionStoragelocalStorageindexedDBcookie 实际上是用来与服务端通话的，cookie保存不超过4kb，cookie只能保存字符串类型，以文本的方式localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”
2022-03-15 10:12:44
151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人