一些学习的研究
文章平均质量分 55
Shopee_Rex
学习ing
展开
-
prettier在代码提交前自动格式化
prettier使用husky配置git提交自动格式化文件原创 2022-04-21 23:30:27 · 5043 阅读 · 2 评论 -
安装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 · 19779 阅读 · 0 评论 -
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 · 1813 阅读 · 0 评论 -
css深度选择器/deep/ 在89版本后失效
问题:高版本样式异常正常版本异常版本定位通过查找节点信息,很快就发现了部分样式失效了。在高版本这一份样式识别不了,去掉deep,就正常了官方弃用89版本遗弃deepless/sass在scope可以继续使用/deep/吗?可以的,loader会自动将scope下的deep的解析成全局样式,并添加对应的hash进行识别,所以可以正常使用。全局样式不要使用/deep/...原创 2021-10-08 11:59:25 · 677 阅读 · 0 评论 -
vite2.0原理简析
本文仅作阅读笔记,建议阅读原文。地址:浅谈 Vite 2.0 原理,依赖预编译,插件机制是如何兼容 Rollup 的?vite原理速度快的原因利用了 ES Module加载模块支持,所有依赖模块不是一股脑的编译,而是代码按需进行实时加载。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传传统的 bundle 模式是这样的:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7R8qmsvU-1629388833235)(G:\noteB.转载 2021-08-20 00:04:58 · 366 阅读 · 0 评论 -
vue2-ace-editor与el-dialog使用时,无法及时更新编辑器的内容
问题如果在el-dialog中使用vue2-ace-editor,在第二次弹出的时候,如果编辑器的内容发生了变化,但是编辑器并没有正确的更新,需要点击一下编辑器才能成功更新到。原因由于ace编辑器是jquery的库,它本身的库并不是根据数据驱动来设计,所以数据变化之后,编辑器不一定能正确出现,是因为库本身做了一些限制。所以,我们需要在源码上找到问题所在。el-dialog异常问题只有在弹框内使用,并且二次展示的时候才会出现异常。从经验分析,vue2-ace-editor应该是正确设置到值了,但原创 2021-06-28 14:46:03 · 1594 阅读 · 3 评论 -
【低版本谷歌浏览器兼容】:低版本逗号引发的代码解析错误
最近在重构Jquery的项目,项目部署上线之后,发现低于59版本的谷歌浏览器无法解析一些JS文件。错误如下:看代码发现是多余的逗号导致的解析错误。去掉这个逗号就能正常解析了。使用prettier避免这种错误prettier格式化工具,可以设置配置来避免这种兼容问题。{ "trailingComma": "es5",}配置之后,逗号只会在数组和对象中允许逗号结尾,其它一律去掉。如果配置了all的话,就会出现低版本的兼容问题例子:函数返回值当做参数时,都会添加一个逗号。 .原创 2021-05-06 13:51:47 · 794 阅读 · 0 评论 -
微前端乾坤(qiankun)初尝试
介绍qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。公司有一个门户网站需要嵌入其他系统,使用iframe会有很多的兼容性问题,如果使用qiankun框架,不仅可以绕过这些iframe的坑,还可以进行很多的“骚操作”。快速上手qiankun官网的快速上手很简单,不是因为他们懒得写,而是引入qiankun的确是非常简单。只需要在主应用中引入qiankun,微服务做相应的配置,就可以,下面就介绍我在项目中如何引入。主应用原创 2021-03-01 18:43:35 · 3062 阅读 · 1 评论 -
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 · 34244 阅读 · 28 评论 -
vscode中的eslint的ts文件不会错误提示,但是编译的时候报错了
这是因为vscode的eslint的配置没有设置typescript文件。第一步 打开设置首选项》设置第二步:搜索validate第三步:添加typescript结果在ts文件提示eslint错误了。原创 2021-02-02 10:33:46 · 7129 阅读 · 1 评论 -
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 · 2625 阅读 · 0 评论 -
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 · 638 阅读 · 0 评论 -
VUE中使用localStorage实现跨标签页面的通信
前言目前出现了一个需求,需要父页面打开新的子页面,子页面提交表单之后,关闭子页面,然后把数据返回给父页面。本来考虑使用sharedWorker,但是由于兼容性太差了,就弃用了。看到网上的介绍可以使用localStorage来实现,我就尝试了下。下面是一些具体的细节。开始整体流程如图所示:需求分析子页面需要知道自己的父页面对应的是谁,所以父页面打开子页面的时候需要传输一个父页面的KEY值由于表单是使用dialog来显示,需要注意避免出现事件重复注册的,及时销毁事件,保留监听事件的唯一。由于原创 2020-10-22 19:40:23 · 3364 阅读 · 0 评论 -
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 · 2876 阅读 · 0 评论 -
引入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 · 3050 阅读 · 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 · 455 阅读 · 0 评论 -
vscode中prettier与eslint一起使用格式化时候会报错
代码风格与代码检测冲突我们经常使用prettier与eslint进行代码格式化与代码检测,但是经常遇见格式化之后依然存在代码检测的异常,这主要是因为eslint的配置没有与prettier的规则设置为相同。我查看了网上给的设置都比较过时了,prettier官方提供了一个新的方法例子通过prettier格式化之后,报错设置方法首先在vscode的setting.json中添加prettier的设置 "editor.codeActionsOnSave": { // For ESLi原创 2020-08-26 11:52:46 · 3403 阅读 · 0 评论 -
《代码整洁之道》笔记04——数据结构
数据抽象隐藏变量内部结构,可以通过抽象取值和设置的方法,让用户无须关心数据的实现而就能操作数据本体。例如:class Point { getX:function(){}; getY:function(){}; setX:function(){}; setY:function(){};}当然并不是一味的暴露取值和赋值器就可以完成。例如:class Vehi...原创 2020-05-06 00:45:08 · 276 阅读 · 0 评论 -
《代码整洁之道》笔记03——注释
注释是在代码表达意图时遭遇的失败。注释不能美化糟糕的代码用代码来阐述好注释法律信息对基本信息的注释对意图的解释阐释警示TODO注释,程序员认为应该去做,但是由于一些原因没用实现完的注释。放大不合理之物的重要性公共API描述坏注释喃喃自语/废话注释多余的注释误导性注释循规式注释:不需要给每一个函数进行注释日志式注释能用函数和变量时就别用注释用于位置标识的注...原创 2020-05-06 00:44:07 · 246 阅读 · 0 评论 -
《代码整洁之道》笔记02——函数
函数主体短小函数应该以完成功能为前提,函数主体能短小就多短小。一件事函数应该只完成一件事,如果函数存在多种事件处理,需要进行解构整合。如果该函数处理的都在同一抽象层,则代表该函数制作一件事。每个函数一个抽象层级自顶向下阅读,如果出现不同抽象层级的应当进行重构。Swtich语句尽量将它使用到抽象底层使用描述名称函数越短小,功能越集中,就越容易取得好名称。不要害怕长名称。函数参数...原创 2020-05-06 00:42:53 · 299 阅读 · 0 评论 -
《代码整洁之道》笔记01——有意义的命名
有意义的命名名副其实例如代码中如果出现thsList,theArray这些命名,应该赋予更加具有实际用途的命名。比如用于保存用户名的数组:usersNameArray避免误导避免留下掩藏代码本意的错误线索。例如:使用了语言的预留的变量名使用了与系统设计有误导的命名:userNameList如果这个变量名不是一个List类型使用大写的O小写的l来命名变量,使之看起来像数字的 0,1...原创 2020-05-06 00:41:45 · 251 阅读 · 0 评论 -
从0开始搭建一个疫情地图小程序——数据爬虫篇
前言其实这个小程序一个月前就已经做好了,但是当时忙着实习和毕设还有一些乱七八糟的事情,所以拖到现在才来做总结。文章目录前言源代码数据来源分析请求中国地图svg数据一些制作好的图片从JS文件请求入手从url网址发现爬虫接口编写爬虫搭建服务器未处理的数据使用cheerio解析html将这些文件保存到我们需要的格式并且保存为js文件保存文件删除文件源代码数据来源在春节的时候,疫情地图一开始用的...原创 2020-03-04 22:17:06 · 3734 阅读 · 1 评论 -
前端的file流文件处理与一些用法与nodejs搭建后台进行处理
前言最近遇到了一个需要处理文件上传的需求,趁这个机会顺便把前端的一些文件处理做下总结浏览器上的文件HTML上传文件,一般是通过 <input type="file" />input设置type="file",html页面就会自动生成一个按钮,可以选择文件上传。vue来测试input上传文件我们用vue中的ref来获取input上的元素 <input t...原创 2020-02-03 12:05:19 · 1595 阅读 · 5 评论 -
vue eslint 中写了lang=less 依然语法错误
报错信息less{css-rcurlyexpectred}less{ruleorselectorexpected}less{emptyRules}分析我这个是公司内部的框架,用的webpack版本比较旧,所以安装eslint插件的时候,可能有些版本问题没更上,导致less语法识别不出。这个报错只是eslint没有添加less检查的语法,所以添加了lang=less找不到对应的规则...原创 2019-12-25 14:43:16 · 2151 阅读 · 0 评论 -
nextjs集合redux中的HOC流程图理解
最近在学nextjs,学到了一个自己手写hoc去集合redux和nextjs的,通过代码不太好理解,所以就写成流程图去理解 getInitialProps HOC每次路由都会执行传给HOC组件getOrCreateStore作为props传给ComHOC的参数是ComgetInitialPropsHOC的getInitialPropsctx参数是继承于nextjs获取全局的redux的store...原创 2019-11-09 22:30:01 · 814 阅读 · 0 评论 -
作为参数传入数组之后,使用concat和push不同
作为参数传入数组我们都知道引用类型作为参数,是值传递,所以当你直接给参数指向另外一个数组的时候,是不会影响到原数组的,和作为参数传入的值。我们看看例子来理解function test(arr){ console.log(arr) // [1] arr = [2] console.log(arr) // [2]}var arr1 = [1]test(arr1)console.lo...原创 2019-10-31 21:10:52 · 262 阅读 · 0 评论 -
fabricjs文档阅读(三)
群组群组是Fabric最强大的功能之一。它们就是它们听起来的样子——一种将任何fabric对象组合成单个实体的简单方法。我们为什么要这么做?当然,能够将这些对象作为一个对象来工作!还记得canvas上的任意数量的Fabric对象是如何用鼠标分组的吗?一旦分组,所有对象都可以一起移动甚至修改。他们组成一个团体。我们可以缩放这个组,旋转,甚至改变它的表示属性——颜色、透明度、边框等等。这正是组的...翻译 2019-08-02 16:16:55 · 3627 阅读 · 0 评论 -
小程序markdown文件解析和代码高亮(四)———优化篇
优化目录 动画为了美观一点,目录显示一闪一现有点突兀,考虑人的感官的舒适度,我觉得给目录加一个左移动的动画即可。因为这个目录是用组件写的,小程序最近发展的比较快,18年的时候还不太支持组件开发,现在就已经有支持了,并且用过之后感觉还不错。这里就不太赘叙组件的写法了,主要是如何给组件写动画的效果。组件的wxml<view class="marsk" bindtap='backt...原创 2019-07-23 22:22:38 · 211 阅读 · 0 评论 -
小程序markdown文件解析和代码高亮(三)
使用towxml简单说下,这个是可以讲html和markdown文件进行转换为wxml,支持很多富文本的编辑,我们在上一篇文章将towxml的组件复制到小程序的common后,就可以直接使用了首先在需要使用到的页面,需要导入main.js var main_js_1 = require("./common/towxml/main.js"); Page({ da...原创 2019-07-23 18:34:36 · 670 阅读 · 0 评论 -
小程序markdown文件解析和代码高亮(二)
静态页面设计完之后,我们在小程序上实现静态页面。这里就不全部讲了,就拿首页简单说明下。文件存放页面,主要一个是首页,其他是存放文档内容。组件我们讲下载好的towxml和一些ui图片放在common文件夹中,我们只需要copy完towxml中的一部分文件即可,如图。页面实现首页页面比较简单,就一个标题加2个转向按钮。wxml文件<view class="contain...原创 2019-07-23 17:55:34 · 626 阅读 · 0 评论 -
小程序markdown文件解析和代码高亮(一)
扫码体验想法由于最近阅读阮一峰的ES6文档觉得很不错,但是手机浏览网页会很吃力,所以打算把阮一峰的ES6文档移植到小程序上,打开既方便,浏览起来也比较方便。开始申请一个微信小程序号,跳过这部分得到一个属于自己的APPID。安装微信小程序的开发者工具在github上下载towxml的项目组件简单设计文档阅读一般注重文字,所以UI和页面风格应该以简约为主。ES6已经有主题颜...原创 2019-07-23 17:22:35 · 921 阅读 · 0 评论 -
微信小程序自适应方法
微信小程序适配适配?如何适配原理rpx如何利用rpx图片适配元素布局其他总结适配?由于每一个手机屏幕大小尺寸不一致,这就导致了小程序页面显示的差异存在,为了尽量避免因为尺寸而出现的界面混乱。如何适配原理我们以每一个屏幕宽度为标准尺,通过比例计算获取相应的大小和位置。这样可以尽可能适配各种机型,但是如果面对差距比较大的设备,如PC、ipad等,就需要考虑不同设备的适配方案。一般都是可以获取...原创 2019-07-06 00:48:41 · 11201 阅读 · 0 评论 -
ARJS、THREEjs做出一个扫码播放视频的效果
最近研究arjs感觉可以搞下扫码播放视频的效果效果图原创 2019-05-17 13:49:32 · 2503 阅读 · 2 评论 -
JavaScript face++ 人体识别API 与 人体抠像功能(二)
保存图片上传图片图片处理效果保存图片 saveImage =document.getElementById('save'); saveImage.addEventListener('click',function () { alert(&quot;1&quot;); var mycan = document.getElementById(&quot;tes...原创 2018-06-07 21:17:29 · 2623 阅读 · 0 评论 -
JavaScript face++ 人体识别API 与 人体抠像功能(一)
最近在开始接触网上API调用 完成了一个关于face++人体识别API,并通过这个API实现人体抠像功能。既然要实现人体抠像,我们顺便学习下,JavaScript调用摄像头的方法吧。有个博客写的很好 大家可以去看这个 我摄像头主要是参考他写的博客。我这里简单介绍下首先在html添加标签 <video><audio>这2个标签分别代表视频和音频1.打开摄像头有2个版本的方法,...原创 2018-05-31 21:59:52 · 3356 阅读 · 4 评论 -
关于C语言 指针的理解(一)
C语言的指针一些运用的情况从大一开始接触C语言算起,零零散散地感觉上手了不少。但是有时候遇到用指针变量的时候会出现奇怪的错误。所以,想研究一下指针变量的各种情况下的变化和可能出现的错误。这是我第一次写博客,可能有些表达不够清晰的地方,请见谅。指针保存的是地址,而地址指向该变量单元。因此,将地址形象化的称为“指针”。意思是通过它能找到以它为地址的内存地址。自己写了接近一年的编程,个人感觉指针有个很方...原创 2018-03-29 16:45:31 · 261 阅读 · 0 评论 -
javascript新手对命名空间使用会遇到的无法触发的问题
以上是参观了一些大神的解释,非常容易理解,要在JavaScript实现命名空间其实非常简单格式参照第一个就可以了,把一些变量放在里面就可以变成该js文件下的变量但是对于小白来说要如何使用还是有点疑惑。因为如果直接把所有代码放到命名空间后会发现,需要调用的函数都调用不了。(function(){ function show() { alert("11"); }})...原创 2018-04-17 13:45:47 · 208 阅读 · 0 评论 -
fabricjs文档阅读(四)
自由画笔如果说canvas还有什么可以说的亮点—那自然就是能够自由地在canvas绘画.fabric自然也提供了许多方法来进行这一交互功能.只要设置属性isDrawingMode为true就可以实现自由绘画.这时,鼠标就变成一个画笔,通过点击就可以在canvas画布进行绘画.只要设置了isDrawingMode为true你就可以随意地在canvas进行绘画.每次鼠标抬起之后,你所绘画的路径都...翻译 2019-08-02 19:10:03 · 4184 阅读 · 8 评论 -
fabricjs文档阅读(一)
初入fabric今天,我想向您介绍Fabric.js——一个强大的javascript库,它能够让使用HTML5 canvas变得轻而易举。Fabric为canvas提供了一个跟踪的对象模型,以及一个SVG解析器、交互层和一整套其他不可缺少的工具。这是一个完全开源的项目,由麻省理工学院授权,多年来做出了许多贡献。为什么使用Fabricweb Canvas提供一些非常好的图像API,但是这些...翻译 2019-08-02 13:59:12 · 8103 阅读 · 11 评论 -
前端开发的workers——web workers、share workers和service workers
突破单线程的瓶颈WEB WORKERSweb worker就是一个后台执行JS文件的方法,能够给前端传递信息,前端也可以传递信息给web wokers.web workers是一个全新的上下文,与创建它的线程无关。不可以执行dom操作没有window这个对象通过postMessage传递消息兼容性if (window.Worker) {// 是否可以使用workers .....原创 2019-09-18 03:22:56 · 2168 阅读 · 0 评论