- 博客(50)
- 收藏
- 关注
RSS订阅原创 nginx如何找到默认根目录(root html)
这就涉及到nginx查找相对路径的机制。现在，看看上面的配置，nginx是如何根据配置找到。,因此此时nginx查找的html的完整路径是。拼接到相对路径的前面，共同组成一个完整的路径。在不同的环境中安装可能都是不一样的。系统上nginx配置文件在。
2023-06-02 14:29:48
3641
原创 vue3路由动画效果的一些问题
应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。在元素被插入之前添加，在过渡或动画完成之后移除。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。in-out: 先执行进入动画，然后在其完成之后再执行元素的离开动画（不常用）out-in: 先执行离开动画，然后在其完成之后再执行元素的进入动画。
2023-02-09 09:54:34
645
1
原创 字符实体、字体图标与Unicode码
在 HTML 中，某些字符是预留的，例如小于号「」等，浏览器会将它们视作标签。我们比较熟悉的字符实体有空格「 」，小于号「」等。「你好」二字分别是 Unicode 字符 U+4F60 和 U+597D，十六进制表示的 code point 数值「4F60」和「597D」，同时也就是十进制的「20320」和「22909」。每个字体图标在定义的时候有一个Unicode码，这个Unicode可以是自定义的。以「&#」开头的后接十进制数字，「&#x」开头的后接十六进制数字。
2023-02-09 09:52:17
1187
原创 案例演示WeakMap的弱引用与垃圾回收
WeakMap只能将对象作为键名(null除外)键名引用对象是弱引用WeakMap不可遍历弱引用：用案例来证明GC的回收过程1. Map
2022-06-28 15:39:17
646
1
原创 多个 ssh key git免密登录配置
ssh key 免密登录生成公钥与密钥ssh-keygen -t rsa -C "[email protected]" -f ~/.ssh/ssh_name2.将公钥复制保存在gitlab/github的ssh选项中github Settings --> SSH and GPG keys --> New SSH keygitlab Edit profile --> SSH keys --> Add key3.如果是用默认的ssh-key 文件名，一般不需要
2022-05-20 15:28:23
351
原创 nodejs 逐行读取文件的两种方式
nodejs 逐行读取文件的两种方式通过readline的方式const fs = require('fs');const readline = require('readline');let rl = readline.createInterface({ input: fs.createReadStream("./11.txt")})rl.on('line', line => { console.log(line);})通过stream的方式思路：通过流的形
2022-01-29 15:12:03
6746
原创 antV G6 节点的配置方式总结
antV G6 节点的配置方式总结配置节点的方式配置节点的方式有四种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置，自定义节点时加入配置项参数。这几种配置方法可以同时使用，优先级：使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置 > 自定义节点时配置即有相同的配置项时，优先级高的方式将会覆盖优先级低的。⚠️ 注意: 除 id、label 应当配置到每个节点数据中外，其余的 节点的通用属
2022-01-14 15:25:05
11516
7
原创 从源码看React环境变量那些事儿
// 文件目录结构|--config |--jest |--env.js ... |--paths.js|--node_modules|--public|--scripts |--build.js |--start.js |--test.js|--src|--package.json使用第三方库 dotenv、dotenv-expanddotenv解析文件赋值到process.env，默认解析.env文件。也可添加配置去解析其他文件const path =
2022-01-11 16:49:12
364
原创 关于eventListener 在bind this后无法用removeEventListener移除的问题
先说结论：bind可以指定this通过addEventListener添加事件，removeEventListener移除监听事件，但是监听函数添加bind指定this后，就无法正常移除原因：fn.bind(xx)会返回一个新函数，也就是说 fn.bind(aa) === fn.bind(bb) 为 false解决：知道了产生问题的原因，那么解决也就容易了可以先把 fn.bind(xx) 返回的函数保存起来removeEventListener的时候，移除这个保存的函数即可。案例：2秒.
2021-08-23 15:22:40
932
2
原创 egret ColorMatrixFilter 之 颜色矩阵的用法
所谓滤镜：就是 过滤 颜色之后呈现的图像，我们拿常用的rgb颜色模式来说。比如一张位图，是由很多像素点组成的，每个像素点都是由不同强度的 红、绿、蓝色光叠加在一起呈现的最终颜色，然后这些像素点组成了五颜六色的图像。在Photoshop 里的通道面板，可以轻易看到一个图像红、绿、蓝三者的发光强度情况。滤镜的原理就是通过改变 红、绿、蓝 通道相应的颜色数量，来改变图像效果的。表示颜色的矩阵 是一个 4 * 5 矩阵（4行5列） 其中第五列表示一个颜色偏移量let matrix = [ 1.
2021-08-09 09:06:24
341
原创 egret 加载资源进度展示
方式一编写LoadingUI.ts文件class LoadingUI extends egret.Sprite { public constructor() { super(); this.createView(); } private textField: egret.TextField; private createView(): void { this.textField = new egret.TextFiel
2021-08-08 17:25:50
202
原创 js位运算的一个案例解析
js中位运算用的比较少，虽然直到位运算效率更高，但是实际项目里却是想不起来用。偶然看到一段代码，觉得挺巧妙（也许只是我单纯觉得巧妙）就分析了一下。let res = (Math.floor(Math.random() * 0xff) << 16) + (Math.floor(Math.random() * 0xff) << 8) + Math.floor(Math.random() * 0xff)这段代码会返回一个随机的颜色值，结果转换为.
2021-08-03 23:09:18
257
原创 java源码String类中anotherString.value.length这个怎么理解
看java源码时，不理解。value是String类的private属性，所以在本类中可以直接访问 value属性，但是 anotherString.value，实例对象怎么也可以访问private属性，经过研究还是private访问修饰符理解不到位，在本类中，实例也可以访问本类的private属性public final class String implements java.io.Serializable, Comparable<String>, CharSequence .
2021-07-22 12:27:55
2142
1
原创 前端导出PDF之pdfmake
pdfmake通过编辑特定格式的 pdf描述对象，传给pafmake ，来生成pdf默认pdfmake不支持中文如何支持中文要支持中文，就需要配置中文字体。根据文档介绍有两种方式：1.使用在线字体配置。2.使用本地 vfs（virtual file system）配置字体。本文介绍第二种。文档描述的步骤：Install pdfmake npm install pdfmake安装 pdfmakeGo to package directory ./node_modules/pdfmak.
2021-07-10 14:20:17
2274
原创 import xxx from xxx 与 const xxx = require(‘xxx‘) 中的this问题
偶然看到一段代码，大概意思如下// 2.jsthis.a = this.a || {};this.a.b = { "name": "Eric"}this.c = { "age": "20"}this.d = { "hobby": "ball"}// 1.jsconst abc = require('./2.js');console.log(abc);// 打印结果：// { a: { b: { name: 'Eric' } }, c: {
2021-07-08 18:09:57
734
原创 nth-child 与 nth-of-type的一个细节
nth-child 与 nth-of-type的一个细节nth-of-type 选择器只能用在标签后面nth-child 可以用在类名后面demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
2021-07-07 09:02:49
134
原创 charles修改请求、响应的方式总结（多图很详细）
charles的基础用法就不再赘述了，本文主要总结一下修改请求与响应的几种方式本文用到的测试请求为本地接口： http://sunset.com:8000/file/avatar/goods-001.jpg?name=test&age=20通过compose修改请求报文，这种方式类似postman的模拟请求选中charles拦截的请求，右键–>compose**如图所示：标号1 可以看到此次请求的参数，可以在此处修改；标号2 可以添加删除查询参数；标号3 执行修改之后的请.
2021-06-22 11:06:50
6396
2
原创 关于Node中path.resolve()
关于Node中path.resolve()单纯讲讲path.resolve()。就是拼接路径，最终返回一个绝对路径，基础的用法不在赘述，这里说一个容易产生误区的地方//有如下目录结构：|-- aaa |-- bbb |-- ccc.js//ccc.jsconst path = require('path');console.log(path.resolve('src/file', 'image.png'))假如 aaa 目录的绝对路径 是 /User/aaa此时 我们在终端
2021-05-17 23:57:56
267
原创 自定义事件 Event 与 CustomEvent
自定义事件 Event 与 CustomEventwindow.addEventListener() 添加事件监听window.dispatchEvent() 抛出事件Event算是一个顶级接口，CustomEvent基于Event，增加了部分参数Eventevent = new Event(typeArg, eventInit);typeArg是DOMString 类型，表示所创建事件的名称。eventInit可选是 EventInit 类型的字典，接受以下字段:
2021-05-10 02:14:05
1325
原创 js xlsx使用说明（主要讲导出表格与设置表头相关）
workbook： 可以理解为XLSX对excel文件描述的一个对象，可通过 XLSX.utils.book_new()来创建，该方法返回workbook对象worksheet：可以理解为XLSX对 excel 中sheet的描述的一个对象，可通过 XLSX.utils.aoa_to_sheet 、 XLSX.utils.json_to_sheet 、XLSX.utils.table_to_sheet 等方法创建，下面会具体讲每个方法的使用。cellAddress: 单元格的地址对象 { c: nu.
2021-03-11 03:27:32
13901
10
原创 js封装私有属性（闭包的应用）
私有属性就是不希望被外部访问的，要通过封装者的方法去访问，下面总结几种常见的封装方式普通方式，这种方式就是一般的封装，私有属性不通过封装者的方法也能访问function Person() { this.name = 'Eric'}Person.prototype = { getName() { return this.name; }, setName(name) { this.name = name }}let p.
2021-01-20 17:47:43
865
原创 js数组的reduce方法的使用
reduce常用来做累计，大部分业务场景下，reduce可以实现的功能通过forEach、map等遍历也可以实现。1、语法摘要array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])callback执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：accumulator累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，.
2021-01-12 03:10:00
280
1
原创 vue-router 利用 $route 的 matched 属性实现面包屑效果
我们以一个固定的路由表来说明let routes = [ { path: '/', component: () => import('../pages/layout/Layout.vue'), children: [ { name: 'pageA', path: 'a', component: PageA, children: [ { name: '..
2020-11-20 17:25:09
18756
11
原创 项目中终端执行npm run xxx 都做了什么
这里以vue-cli 4.0版本为例来说明，原理都一样。JavaScript 是一种解释性语言，需要将其源代码提供给某些解释器才能运行。如果要使用 node.js 运行 JavaScript 文件，通常会运行以下命令://demo.jsconsole.log('demo')node demo.js如果直接 cd 到 demo.js 目录下 执行 ./demo.js 会抛出异常。如果希望 可以像运行二进制文件一样直接运行它，需要你对该文件有执行权限（例如，可以使用chmod u+x demo
2020-11-19 15:25:25
1226
原创 微信小程序文件相关操作（新建文件夹、下载、解压、读取等）
微信小程序文件相关操作（新建文件夹、下载、解压、读取等）用到的api介绍wx.downloadFile() //下载wx.getFileSystemManager() //获取小程序的文件管理器FileSystemManager.unzip()//解压FileSystemManager.readdir() //读取文件夹FileSystemManager.readFile() //读取文件FileSystemManager.access()//判断文件/目录是否存在FileSystemM
2020-11-03 20:46:19
3595
1
原创 vant-weapp 的slider组件的一个bug记录
vant-weapp 的slider组件的一个bug记录问题描述：在使用vant-weapp的slider组件时，当给slider传入max大于100时，拖动slider会非常费劲，好像摩擦力很大的样子。具体表现为 手指移动了 10 个单位，而slider只移动了 2 个单位（大概描述）。解决方案在slider组件的源码文件 index.js 里找到如下代码onTouchMove: function (event) { var _this = this;
2020-10-30 17:10:08
1129
原创 JSZip压缩与解压的基本使用
JSZip压缩与解压的基本使用//相关api介绍，具体可参考jszip源码中的注释/** * 从文档中读取文件 * * @param Path 要读取文件的相对路径 * @return File matching path, null if no file found */ JSZip.file(path: string): JSZip.JSZipObject | null;/** *把读取的文件内容以哪中格式展示出来 *OutputType: base64, string
2020-10-11 15:43:16
7080
原创 微信小程序 swiper组件 修改指示器圆点的样式位置等
前言微信小程序的swiper组件，官方文档没有给具体的配置接口，有时我们需要一些个性化的样式，看到某位大佬曾在 开放工具中看到了小圆点的class类名，现在似乎是看不到了，不过类名还可以使用附上原文地址 http://www.qianduan8.com/1009.html解决方案一种是隐藏官方的指示点即把 indicator-dots=“{{false}}”传入swiper组件，自己写小圆点指示器的样式，然后通过 bindchange 监听swiper变化，动态更新小圆点样式一种..
2020-06-29 18:55:08
4766
原创 利用svg画圆环进度条的两种方式
本文只要描述利用svg circle标签的实现方法知识点准备（摘自阮一峰老师的网络日志）1.<svg>标签SVG 代码都放在顶层标签``之中。下面是一个例子。<svg width="100%" height="100%"> <circle id="mycircle" cx="50" cy="50" r="50" /></svg><svg>的width属性和height属性，指定了SVG 图像在` HTML 元素中所占据的宽
2020-05-22 23:58:39
2316
原创 h5 操作浏览器历史记录的api pushState replaceState 以及 popstate 事件
在history中跳转使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。向前和向后跳转在history中向后跳转：window.history.back();这和用户点击浏览器回退按钮的效果相同。类似地，你可以向前跳转（如同用户点击了前进按钮）：window.history.forward();跳转到 history 中指定的一个...
2020-05-01 21:11:11
897
原创 vue 实现动态表单动态渲染组件的方式（二）
思路先把所有可能出现的表单/组件写在主页面每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配根据后端返回的数据，动态生成一个slot列表，slot的name属性要与数据的类型匹配，此列表放入一个子组件在主页面引入子组件，把之前主页面写好的各个表单/组件放入子组件标签中，通过匹配slot插槽去渲染组件，没有匹配到插槽的则不会渲染案例//主页面<templ...
2020-04-24 03:15:23
1051
1
原创 vue 实现动态表单动态渲染组件的方式（一）
vue 实现动态表单/动态渲染组件的方式（一）思路先写好各个可能会出现的表单或者自定义的组件，引入。此时后端可能会给到一个对象型数组，每个对象有要渲染组件的一个类型标识利用component is 动态组件，根据不同的组件类型标识，渲染展示不同的组件在利用组件的数据通信去收集各个子组件的数据实现demo三个表单组件，用了element-ui，此...
2020-04-24 02:46:42
3899
原创 vue [自定义组件的 v-model]
vue [自定义组件的 v-model]vue官网描述一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：Vue.component('base-checkbox', { model: { pro...
2020-04-24 02:12:45
176
原创 vue 中使用/deep/深度选择器，谷歌浏览器报出警告
vue开发中控制台警告： **/deep/ combinator is no longer supported in CSS dynamic profile.**应该是/deep/ 在将来会被移除vue-loader官方文档中对于深度选择器的描述深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：...
2020-04-17 01:13:31
8031
1
原创 vue中 style 中scoped的说明
通俗来讲，在vue文件的style中加上scope关键字，可以保障此文件中的css样式只在此文件内生效，即便是class类名相同。就是不会作用于子组件中与父组件相同类名元素。还有一种例外的情况，就是即使加上了scoped，子组件的根元素样式，会受父组件与子组件共同影响，比如，我在父组件设置.content {color: red},如果子组件的根元素也是class='content'，那...
2020-04-12 00:50:57
264
原创 document.documentElement.clientHeight与document.body.clientHeight的区别
网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeightclientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度...
2020-04-08 15:34:12
2451
原创 禁止ios浏览器页面滚动的橡皮筋效果
问题：在做手机端，通过拖拽调整某个div大小时，拖拽引起了整体页面的弹动方法一：通过css设置body宽高html, body { width: 100%; height: 100%; overflow: hidden}方法二：阻止body的touchmove事件单纯解决橡皮筋效果，可以将body的touchmove事件禁止，可以替代第一种方法documen...
2020-04-08 12:43:01
1870
1
原创 关于element-ui 的upload组件 在vue中应用的几点说明（主要说http-request自定义上传过程的参数的使用）
因为upload组件默认用的http的请求，现在需要用websocket去做上传，经过查看element-ui的文档没找到方便的方法，故使用了http-request自定义上传的方式来上传文件几个配置参数的说明action ：上传的url地址，必填项，如果用自定义上传可以随便填个字符串http-request ： 覆盖默认的上传行为，可以自定义上传的实现 ，传入一个函数，函数的参...
2020-04-05 02:16:21
3410
原创 微信小程序之`tabBar`（官方原生与官方自定义）
小程序中有tabBar页面与应用内页面（其实就是除去tabBar页面之外的页面），tabBar页面从表面来说就是页面中含有tabBar切换组件的页面，从小程序代码里讲就是在app.json里配置了tarBar选项的页面。目前有原生tabBar，还有官方的自定义tabBar。原生tabBar只需要在app.json里配置好相关tab选项就可以了。官方的自定义tabBar需要在根目录定义一个自...
2020-03-24 00:29:31
1716
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人