- 博客(86)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 typescript 如何反推数组的类型
使用infertype ArrayType<T extends any[]> = T extends Array<infer R> ? R : never;使用interface A { data:number}type B = A[];ArrayType<B> // 等同于 返回 A
2022-05-08 22:25:25
752
原创 pod构建的ios版本引发 react-native-safe-area-context RN项目的pod-install构建异常
RN 使用react navigation的案例时运行pod-install报错Auto-linking React Native modules for target `Entry_task_ts`: RNScreens and react-native-safe-area-contextAnalyzing dependenciesFetching podspec for `DoubleConversion` from `../node_modules/react-native/third-part
2022-05-03 20:00:31
2405
原创 ReactNative Expo 开启ios模拟器老是提示安装xcode
如果需要在MacOS开启模拟器，首先需要进行如下几步安装xcode安装完之后，打开xcode选中xcode应用，点击选项卡Xcode选中open developer tool中的simulator这样就可以打开ios的模拟器问题这个时候通过expo启用模拟器的时候，一直提示我们没有安装xcode，这是因为xcode的common路径没有配置我们回到xcode，按下面操作配置之后重新启动react，再运行ios simulator就会在模拟器上安装expo...
2022-04-28 20:29:06
1758
原创 安装electron项目的时候老是报错：Command failed.
问题描述安装electron项目的时候，在下载包的时候报错错误描述主要是错误1：socket hang uperror E:\theia\node_modules\electron: Command failed.Exit code: 1Command: node install.jsArguments:Directory: E:\theia\node_modules\electronOutput:RequestError: socket hang up at ClientR
2022-01-14 17:33:14
18548
原创 6个用例快速理解vue3的watchEffect用法
用例1 – 单值、多值侦听const value1= ref(1)const value2 = ref(2)watchEffect(()=>{ const v = value1.value; console.log('watchEffect1', v)})watchEffect(()=>{const v = value2.value; console.log('watchEffect2', v )})// 2个值watchEffect(()=>{con
2021-11-29 00:27:58
1745
原创 css深度选择器/deep/ 在89版本后失效
问题：高版本样式异常正常版本异常版本定位通过查找节点信息，很快就发现了部分样式失效了。在高版本这一份样式识别不了，去掉deep，就正常了官方弃用89版本遗弃deepless/sass在scope可以继续使用/deep/吗？可以的，loader会自动将scope下的deep的解析成全局样式，并添加对应的hash进行识别，所以可以正常使用。全局样式不要使用/deep/...
2021-10-08 11:59:25
649
转载 vite2.0原理简析
本文仅作阅读笔记，建议阅读原文。地址：浅谈 Vite 2.0 原理，依赖预编译，插件机制是如何兼容 Rollup 的？vite原理速度快的原因利用了 ES Module加载模块支持，所有依赖模块不是一股脑的编译，而是代码按需进行实时加载。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传传统的 bundle 模式是这样的：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7R8qmsvU-1629388833235)(G:\noteB.
2021-08-20 00:04:58
356
原创 vue2-ace-editor与el-dialog使用时，无法及时更新编辑器的内容
问题如果在el-dialog中使用vue2-ace-editor，在第二次弹出的时候，如果编辑器的内容发生了变化，但是编辑器并没有正确的更新，需要点击一下编辑器才能成功更新到。原因由于ace编辑器是jquery的库，它本身的库并不是根据数据驱动来设计，所以数据变化之后，编辑器不一定能正确出现，是因为库本身做了一些限制。所以，我们需要在源码上找到问题所在。el-dialog异常问题只有在弹框内使用，并且二次展示的时候才会出现异常。从经验分析，vue2-ace-editor应该是正确设置到值了，但
2021-06-28 14:46:03
1492
3
原创 【低版本谷歌浏览器兼容】：低版本逗号引发的代码解析错误
最近在重构Jquery的项目，项目部署上线之后，发现低于59版本的谷歌浏览器无法解析一些JS文件。错误如下：看代码发现是多余的逗号导致的解析错误。去掉这个逗号就能正常解析了。使用prettier避免这种错误prettier格式化工具，可以设置配置来避免这种兼容问题。{ "trailingComma": "es5",}配置之后，逗号只会在数组和对象中允许逗号结尾，其它一律去掉。如果配置了all的话，就会出现低版本的兼容问题例子：函数返回值当做参数时，都会添加一个逗号。 .
2021-05-06 13:51:47
760
原创 微前端乾坤（qiankun）初尝试
介绍qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。公司有一个门户网站需要嵌入其他系统，使用iframe会有很多的兼容性问题，如果使用qiankun框架，不仅可以绕过这些iframe的坑，还可以进行很多的“骚操作”。快速上手qiankun官网的快速上手很简单，不是因为他们懒得写，而是引入qiankun的确是非常简单。只需要在主应用中引入qiankun,微服务做相应的配置，就可以，下面就介绍我在项目中如何引入。主应用
2021-03-01 18:43:35
2965
1
原创 vue/cli 构建typescript与eslint踩坑笔记
前提这里做下笔记，记录下项目中的typescript的类型写法，也分享给大家。使用ref调用element组件方法推荐使用断言，element-ui提供了类型文件，使用断言就可以解决这个问题案例：如使用组件form的validate的方法import { Form } from 'element-ui';export default class App extends Vue { (this.$refs.form as Form).validate((v) => { if
2021-02-25 16:44:45
2599
原创 TypeError: this.getOptions is not a function 引入less一直报错
错误提示如下Syntax Error: TypeError: this.getOptions is not a function @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/@vue/cli-service/node_modules/css- loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
2021-02-02 11:46:50
34204
28
原创 vscode中的eslint的ts文件不会错误提示，但是编译的时候报错了
这是因为vscode的eslint的配置没有设置typescript文件。第一步 打开设置首选项》设置第二步：搜索validate第三步：添加typescript结果在ts文件提示eslint错误了。
2021-02-02 10:33:46
6857
1
原创 css样式里transform中的scale是否会影响getBoundingClientRect
结果会影响，你当前试图的节点元素的展示的位置在哪，获取的值就是当前视图相对的节点的位置。我们实现一个简单的页码来看看<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http
2021-01-21 15:51:20
1368
原创 移动端echarts设置dataZoom之后，滚动时隐藏tooltip
需求echart设置了datazoom同时也设置了tooltip的时候，左右滚动时候就会这样：产品提出需求说要滚动的时候隐藏tooltip，要这样：代码这里其实需要记录状态，记录tooltip是否允许显示，如果不允许就关闭tooltip的显示，反之同理。这里可以使用我上一篇文章提供的mixin的方法，可以阅读上一篇文章引入了一个变量HIDE_ALL_TOOLTIP，监听它 watch: { // 动态隐藏tooltip HIDE_ALL_TOOLTIP(v) {
2021-01-12 16:13:10
2684
1
原创 移动端echarts的tooltip点击图表外部隐藏
描述在移动端没有hover事件，所以触发echart的高亮事件只有点击事件，这个时候如果有页面滚动事件的时候，滚动的时候并不能隐藏tooltip。这个时候页面滚动是不会隐藏的。除此之外，如果页面同时多个图表，这个时候会出现多个tooltip，这个产品认为可能体验会比较不好，希望能够一个页面只高亮一个图表。方案需要做到跨图表状态管理，很明显选择使用vuex来存储状态是比较方便。所以这里使用vuex来存储图表直接是否存在高亮的属性。同时为了引入方便，这里使用mixin来专门处理这个属性值的变化。
2021-01-12 15:20:46
5523
4
原创 使用伪类将el-switch文字放在内部
前言由于switch是放在table里的，如果文字放在外面，样式会比较不好看。如果单独写一个浪费造轮子，我们直接动态添加类名，应该可以实现类似的效果，所以就可以使用伪类进行添加文字。效果源码 <el-switch :width="60" :value="getTaskSubscribeState(row)" active-color="#3399FF" inactive-color="#CCCC
2020-12-29 16:39:13
2334
2
原创 JavaScript中的“null”与“undefined“在进行数值比较时，当作0处理?null == 0?
分析在开发echart图表的时候，用到了Math.max进行比较的时候，如果传回来的是null的时候，比较是正常的，但是传undefined的时候却是不正常。代码分析使用比较符号可以发现，null在比较的时候，是当作0处理的。全等与不全等可以发现，在判断是否等于的时候，是不相等的，这也比较符号“逻辑”。undefined的表现如何可以看到，无论怎么比较都是为falseMath.max中的表现这里看得出来，null在这些操作符号中，视作为0。undefined的表现如
2020-12-17 19:48:56
2495
原创 VUE中的watch支持数组函数
前言最近阅读VUE源码，发现watch对一个属性监听的时候，可以传入一个数组函数进行监听源码function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = watch[key] // 可以为数组？ if (Array.isArray(handler)) { for (let i = 0; i < handler.length; i+
2020-12-02 22:10:11
623
原创 raphael.js中拖拽事件在笔记本上不可触发的问题
问题描述最近在改以前的项目代码，问题是通过raphael.js创建出来的svg元素拖动的事件在一些笔记本拖拽不了。一开始还以为是浏览器版本的问题，所以更换浏览器发现还是不行。并且不同笔记本还会出现不同的表现，有些笔记本可以，有些笔记本不可以。问题追踪在这个过程中，不管在哪个平台，页面都没有报错，代码都是正常运行的，这个就需要从raphael.js中找到答案。结果发现项目中引用的是rapheal-min的压缩之后的代码，可读性不强。所以就去找没有压缩过的代码去看。源码阅读一开始还以为源码很难
2020-11-27 19:27:52
309
原创 elementUI富文本组件封装
富文本这里使用的是vue-quill-editor组件作为富文本功能。在VUE中使用vue-quill-editor非常方便，引入组件就可以马上使用，但是通常情况下，我们都需要进行一些自定义的功能，所以需要自己进行二次封装。初始化```javascript<template> <quillEditor class="ql-toolbar" v-model="content" ref="quillEditor" > </quillEd
2020-11-25 11:10:42
4150
1
原创 VUE中使用localStorage实现跨标签页面的通信
前言目前出现了一个需求，需要父页面打开新的子页面，子页面提交表单之后，关闭子页面，然后把数据返回给父页面。本来考虑使用sharedWorker，但是由于兼容性太差了，就弃用了。看到网上的介绍可以使用localStorage来实现，我就尝试了下。下面是一些具体的细节。开始整体流程如图所示：需求分析子页面需要知道自己的父页面对应的是谁，所以父页面打开子页面的时候需要传输一个父页面的KEY值由于表单是使用dialog来显示，需要注意避免出现事件重复注册的，及时销毁事件，保留监听事件的唯一。由于
2020-10-22 19:40:23
3244
原创 electron:主进程与渲染进程
主进程与渲染进程Electron 运行 package.json 的 main 脚本的进程被称为主进程。每个 Electron 中的 web 页面运行在它的叫渲染进程的进程中。区别主进程会通过BrowserWindow创建页面，每个BrowserWindow都有自己的渲染进程运行页面。主进程管理所有web页面和他们对应的渲染进程，每一个渲染进程都是独立。不允许操作GUI的原生API，如果需要的话，必须通过主进程来进行通讯。使用 electron 的 API无论时主进程还是渲染进程，都
2020-09-11 14:36:12
1174
原创 electron迅速上手必看介绍
Electron底层使用的是C++，JS运行框架基于谷歌的 V8 引擎和 Node.js 的开发框架，允许用 JavaScript 开发跨平台（Windows、Mac OS X 和 Linux）桌面应用。Electron 就是 GitHub 推出的技术文档优点热更新，轻量安装跨端开发入门门槛低启动和运行不依赖于网络；桌面应用可以即时启动，不需要等待资源从网络上下载完再启动；桌面应用可以访问计算机的操作系统和硬件资源传统web应用缺点依赖于网络应用大量数据加载会影响网页加载
2020-09-11 14:33:39
493
原创 nodejs 下载url文件
nodejs下载处理二进制文件const http = require('http);function downloadFile(url,pahtName){ http.get(url,(res)=>{ var data = ""; res.setEncoding("binary"); //一定要设置response的编码为binary否则会下载下来的图片打不开 res.on("data", function(chunk){
2020-09-06 09:35:11
2853
原创 引入codemirror时报错，webpack中resolve.extensions配置产生的问题
问题在引入codemirror的时候，找不到对应的CodeMirror对应的函数。原因在于在CodeMirror库中lib的CodeMirror文件有2个，相同的名字。举个例子，在CodeMirror/mode/javascript下的任一个js文件，都是报错的。这里引入了lib/CodeMirror,分析了下，是传入的CodeMirror缺失了对应的方法我们输出JS文件引入的情况。发现了如果没有指名后缀的话，无法找到正确的文件。这个导致的原因是lib文件夹下存在2个相同名字的文件。
2020-08-31 14:01:17
2940
4
原创 css3的filter与svg动画的碰撞
CSS3的filterCCS3中增加了关于filater相关的一些方法。我们看看MDN上兼容性除了IE基本全支持了。下面的是指如果直接使用SVG的filter的支持程度，目前只有火狐支持，不过我们不使用直接使用svg来实现滤镜。SVGmdn上的介绍SVG的标签与HTML的很相似，基本上可以直接使用。在前端中主要使用它来制作一些小的图标和小动画，因为相对于栅格图形而言，矢量图内存大小更大，也不好制作。并且由于CSS3的强大性能，很多动画直接使用CSS3就可以完成很好了。2者的碰撞这个de
2020-08-28 14:37:53
429
原创 vscode中prettier与eslint一起使用格式化时候会报错
代码风格与代码检测冲突我们经常使用prettier与eslint进行代码格式化与代码检测，但是经常遇见格式化之后依然存在代码检测的异常，这主要是因为eslint的配置没有与prettier的规则设置为相同。我查看了网上给的设置都比较过时了，prettier官方提供了一个新的方法例子通过prettier格式化之后，报错设置方法首先在vscode的setting.json中添加prettier的设置 "editor.codeActionsOnSave": { // For ESLi
2020-08-26 11:52:46
3262
原创 带你快速入门webgl与shader着色器渲染基础
webgl的初见（二维）你是谁？WebGL经常被当成3D API，人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。 想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器， 另一个叫片断着色器，并且使用一种和C或C++类似的强类型的语
2020-07-29 14:41:44
2401
原创 毕业礼物——“广工云毕业”小程序开发
项目介绍由于疫情的影响，我们学校无法进行正常的毕业照流程，所以学院找到了我，希望能够开发一款自动合成的毕业照的小程序。解决方案前端：小程序开发后台：知晓云人脸融合接口：腾讯云人脸融合体验由于腾讯云的人脸融合需要付费，所以能够体验的时间为2020年6月-2020年7月微信搜索“广工云毕业”即可进行...
2020-07-05 15:07:36
661
3
原创 fabric 使用网络URL导致toData导出出现跨域问题
问题描述使用farbic.image生产图片的时候，需要将canvas导出成图片出现跨域问题分析这是由于canvas导出toDataURL不允许引用跨域的图片，所以出现报错。通过阅读源码，发现其实fabric加载图片的时候是通过创建img标签来下载图片数据，所以只需要在img标签设置允许跨域即可解决这个问题。img.crossOrigin = 'anonymous'解决方案第一种：把图片转为base64案例：let base64 = ''// 服务器传输base64代替url路径le
2020-05-27 00:04:32
1424
原创 《代码整洁之道》笔记04——数据结构
数据抽象隐藏变量内部结构，可以通过抽象取值和设置的方法，让用户无须关心数据的实现而就能操作数据本体。例如：class Point { getX:function(){}; getY:function(){}; setX:function(){}; setY:function(){};}当然并不是一味的暴露取值和赋值器就可以完成。例如：class Vehi...
2020-05-06 00:45:08
265
原创 《代码整洁之道》笔记03——注释
注释是在代码表达意图时遭遇的失败。注释不能美化糟糕的代码用代码来阐述好注释法律信息对基本信息的注释对意图的解释阐释警示TODO注释，程序员认为应该去做，但是由于一些原因没用实现完的注释。放大不合理之物的重要性公共API描述坏注释喃喃自语/废话注释多余的注释误导性注释循规式注释：不需要给每一个函数进行注释日志式注释能用函数和变量时就别用注释用于位置标识的注...
2020-05-06 00:44:07
241
原创 《代码整洁之道》笔记02——函数
函数主体短小函数应该以完成功能为前提，函数主体能短小就多短小。一件事函数应该只完成一件事，如果函数存在多种事件处理，需要进行解构整合。如果该函数处理的都在同一抽象层，则代表该函数制作一件事。每个函数一个抽象层级自顶向下阅读，如果出现不同抽象层级的应当进行重构。Swtich语句尽量将它使用到抽象底层使用描述名称函数越短小，功能越集中，就越容易取得好名称。不要害怕长名称。函数参数...
2020-05-06 00:42:53
290
原创 《代码整洁之道》笔记01——有意义的命名
有意义的命名名副其实例如代码中如果出现thsList,theArray这些命名，应该赋予更加具有实际用途的命名。比如用于保存用户名的数组：usersNameArray避免误导避免留下掩藏代码本意的错误线索。例如：使用了语言的预留的变量名使用了与系统设计有误导的命名：userNameList如果这个变量名不是一个List类型使用大写的O小写的l来命名变量，使之看起来像数字的 0，1...
2020-05-06 00:41:45
244
原创 fabricjs给元素添加事件侦听导致可能的内存泄漏问题
场景由于需要给每一种元素设置一个独立的工具栏，所以就需要给每一个元素设置一个独立的事件去修改对应的工具栏的值比如一个元素的角度显示问题。我们可以给元素添加一个rotate事件，去动态修改工具栏的angle的值。代码： this.gettersTarget.on('rotating', arg => { // 设置角度的angle值 this.angl...
2020-04-14 20:07:51
2506
1
原创 fabricjs 设置背景颜色与文字背景颜色等无法更新页面内容
前提在做毕设的时候，发现fabric.Textbox中有一些属性设置之后，刷新页面无法触发代码演示// this.gettersTarget 是选取的fabric对象// backgroundColor (newValue) { if (this.watcherFlag()) { let {color} = newValue this.ge...
2020-04-11 21:04:10
3535
5
原创 从0开始搭建一个疫情地图小程序——小程序篇
为什么选小程序主要还是服务器的费用的问题，小程序开发结合云服务器可以省掉很多运维的问题，加上我这次开发主要是为了熟悉小程序的组件开发与echart在小程序绘制地图的性能表现。前端页面展示首页切换页面各地详细页面源代码前端实现这里并不全部讲前端的代码，主要讲我在开发的时候遇到的坑。组件开发拿我首页上，每天数据的显示，我将它封装为一个组件。和VUE框架有很多的相同点，比如......
2020-03-10 22:18:06
13504
19
原创 从0开始搭建一个疫情地图小程序——数据爬虫篇
前言其实这个小程序一个月前就已经做好了，但是当时忙着实习和毕设还有一些乱七八糟的事情，所以拖到现在才来做总结。文章目录前言源代码数据来源分析请求中国地图svg数据一些制作好的图片从JS文件请求入手从url网址发现爬虫接口编写爬虫搭建服务器未处理的数据使用cheerio解析html将这些文件保存到我们需要的格式并且保存为js文件保存文件删除文件源代码数据来源在春节的时候，疫情地图一开始用的...
2020-03-04 22:17:06
3703
1
mock+express搭建本地服务器模拟数据
2019-12-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人