前端
文章平均质量分 63
Shopee_Rex
学习ing
展开
-
css深度选择器/deep/ 在89版本后失效
问题:高版本样式异常正常版本异常版本定位通过查找节点信息,很快就发现了部分样式失效了。在高版本这一份样式识别不了,去掉deep,就正常了官方弃用89版本遗弃deepless/sass在scope可以继续使用/deep/吗?可以的,loader会自动将scope下的deep的解析成全局样式,并添加对应的hash进行识别,所以可以正常使用。全局样式不要使用/deep/...原创 2021-10-08 11:59:25 · 677 阅读 · 0 评论 -
【低版本谷歌浏览器兼容】:低版本逗号引发的代码解析错误
最近在重构Jquery的项目,项目部署上线之后,发现低于59版本的谷歌浏览器无法解析一些JS文件。错误如下:看代码发现是多余的逗号导致的解析错误。去掉这个逗号就能正常解析了。使用prettier避免这种错误prettier格式化工具,可以设置配置来避免这种兼容问题。{ "trailingComma": "es5",}配置之后,逗号只会在数组和对象中允许逗号结尾,其它一律去掉。如果配置了all的话,就会出现低版本的兼容问题例子:函数返回值当做参数时,都会添加一个逗号。 .原创 2021-05-06 13:51:47 · 795 阅读 · 0 评论 -
微前端乾坤(qiankun)初尝试
介绍qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。公司有一个门户网站需要嵌入其他系统,使用iframe会有很多的兼容性问题,如果使用qiankun框架,不仅可以绕过这些iframe的坑,还可以进行很多的“骚操作”。快速上手qiankun官网的快速上手很简单,不是因为他们懒得写,而是引入qiankun的确是非常简单。只需要在主应用中引入qiankun,微服务做相应的配置,就可以,下面就介绍我在项目中如何引入。主应用原创 2021-03-01 18:43:35 · 3066 阅读 · 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 · 1454 阅读 · 0 评论 -
移动端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 · 2774 阅读 · 1 评论 -
移动端echarts的tooltip点击图表外部隐藏
描述在移动端没有hover事件,所以触发echart的高亮事件只有点击事件,这个时候如果有页面滚动事件的时候,滚动的时候并不能隐藏tooltip。这个时候页面滚动是不会隐藏的。除此之外,如果页面同时多个图表,这个时候会出现多个tooltip,这个产品认为可能体验会比较不好,希望能够一个页面只高亮一个图表。方案需要做到跨图表状态管理,很明显选择使用vuex来存储状态是比较方便。所以这里使用vuex来存储图表直接是否存在高亮的属性。同时为了引入方便,这里使用mixin来专门处理这个属性值的变化。原创 2021-01-12 15:20:46 · 5736 阅读 · 4 评论 -
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 · 2627 阅读 · 0 评论 -
raphael.js中拖拽事件在笔记本上不可触发的问题
问题描述最近在改以前的项目代码,问题是通过raphael.js创建出来的svg元素拖动的事件在一些笔记本拖拽不了。一开始还以为是浏览器版本的问题,所以更换浏览器发现还是不行。并且不同笔记本还会出现不同的表现,有些笔记本可以,有些笔记本不可以。问题追踪在这个过程中,不管在哪个平台,页面都没有报错,代码都是正常运行的,这个就需要从raphael.js中找到答案。结果发现项目中引用的是rapheal-min的压缩之后的代码,可读性不强。所以就去找没有压缩过的代码去看。源码阅读一开始还以为源码很难原创 2020-11-27 19:27:52 · 322 阅读 · 0 评论 -
VUE中使用localStorage实现跨标签页面的通信
前言目前出现了一个需求,需要父页面打开新的子页面,子页面提交表单之后,关闭子页面,然后把数据返回给父页面。本来考虑使用sharedWorker,但是由于兼容性太差了,就弃用了。看到网上的介绍可以使用localStorage来实现,我就尝试了下。下面是一些具体的细节。开始整体流程如图所示:需求分析子页面需要知道自己的父页面对应的是谁,所以父页面打开子页面的时候需要传输一个父页面的KEY值由于表单是使用dialog来显示,需要注意避免出现事件重复注册的,及时销毁事件,保留监听事件的唯一。由于原创 2020-10-22 19:40:23 · 3366 阅读 · 0 评论 -
electron:主进程与渲染进程
主进程与渲染进程Electron 运行 package.json 的 main 脚本的进程被称为主进程。每个 Electron 中的 web 页面运行在它的叫渲染进程的进程中。区别主进程会通过BrowserWindow创建页面,每个BrowserWindow都有自己的渲染进程运行页面。主进程管理所有web页面和他们对应的渲染进程,每一个渲染进程都是独立。不允许操作GUI的原生API,如果需要的话,必须通过主进程来进行通讯。使用 electron 的 API无论时主进程还是渲染进程,都原创 2020-09-11 14:36:12 · 1198 阅读 · 0 评论 -
electron迅速上手必看介绍
Electron底层使用的是C++,JS运行框架基于谷歌的 V8 引擎和 Node.js 的开发框架,允许用 JavaScript 开发跨平台(Windows、Mac OS X 和 Linux)桌面应用。Electron 就是 GitHub 推出的技术文档优点热更新,轻量安装跨端开发入门门槛低启动和运行不依赖于网络;桌面应用可以即时启动,不需要等待资源从网络上下载完再启动;桌面应用可以访问计算机的操作系统和硬件资源传统web应用缺点依赖于网络应用大量数据加载会影响网页加载原创 2020-09-11 14:33:39 · 513 阅读 · 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 · 456 阅读 · 0 评论 -
vscode中prettier与eslint一起使用格式化时候会报错
代码风格与代码检测冲突我们经常使用prettier与eslint进行代码格式化与代码检测,但是经常遇见格式化之后依然存在代码检测的异常,这主要是因为eslint的配置没有与prettier的规则设置为相同。我查看了网上给的设置都比较过时了,prettier官方提供了一个新的方法例子通过prettier格式化之后,报错设置方法首先在vscode的setting.json中添加prettier的设置 "editor.codeActionsOnSave": { // For ESLi原创 2020-08-26 11:52:46 · 3407 阅读 · 0 评论 -
带你快速入门webgl与shader着色器渲染基础
webgl的初见(二维)你是谁?WebGL经常被当成3D API,人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。 想要利用WebGL完成更复杂任务,取决于你能否提供合适的代码,组合使用点,线和三角形代替实现。WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器, 另一个叫片断着色器,并且使用一种和C或C++类似的强类型的语原创 2020-07-29 14:41:44 · 2540 阅读 · 0 评论 -
毕业礼物——“广工云毕业”小程序开发
项目介绍由于疫情的影响,我们学校无法进行正常的毕业照流程,所以学院找到了我,希望能够开发一款自动合成的毕业照的小程序。解决方案前端:小程序开发后台:知晓云人脸融合接口:腾讯云人脸融合体验由于腾讯云的人脸融合需要付费,所以能够体验的时间为2020年6月-2020年7月微信搜索“广工云毕业”即可进行...原创 2020-07-05 15:07:36 · 682 阅读 · 3 评论 -
fabricjs给元素添加事件侦听导致可能的内存泄漏问题
场景由于需要给每一种元素设置一个独立的工具栏,所以就需要给每一个元素设置一个独立的事件去修改对应的工具栏的值比如一个元素的角度显示问题。我们可以给元素添加一个rotate事件,去动态修改工具栏的angle的值。代码: this.gettersTarget.on('rotating', arg => { // 设置角度的angle值 this.angl...原创 2020-04-14 20:07:51 · 2574 阅读 · 1 评论 -
从0开始搭建一个疫情地图小程序——小程序篇
为什么选小程序主要还是服务器的费用的问题,小程序开发结合云服务器可以省掉很多运维的问题,加上我这次开发主要是为了熟悉小程序的组件开发与echart在小程序绘制地图的性能表现。前端页面展示首页切换页面各地详细页面源代码前端实现这里并不全部讲前端的代码,主要讲我在开发的时候遇到的坑。组件开发拿我首页上,每天数据的显示,我将它封装为一个组件。和VUE框架有很多的相同点,比如......原创 2020-03-10 22:18:06 · 13562 阅读 · 19 评论 -
前端的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 评论 -
Buffer() is deprecated due to security and usability issues.webpack 报错
问题描述:有时候打包的时候会不时地报错Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.看了下webpack的文件,发现了问题。由于使用了new ...原创 2019-12-25 11:47:33 · 7373 阅读 · 3 评论 -
element-ui中上传upload组件中的遇到的一些需求和解决方案
对于上传的钩子,想要传输自己的数据需求:需要检测上传的视频列表是否有重复的名字使用·before-upload·的钩子函数,在上传前去判断,如果存在则返回false <el-upload :ref="item.key" :data="{ classId, videoName: item...原创 2019-12-05 21:55:55 · 1511 阅读 · 0 评论 -
dom给元素添加多个clasname,dom获取属性名的值
问题一:我们后期如果需要给一个节点新增加一个calssname,如何进行操作呢?var dom = document.getElementById("dom")dom.className = 'classname1 classname2'在类名之间加个空格即可。如果类名需要动态添加如何修改?只需要使用新语法``即可var clasname = 'classname3'var dom...原创 2019-10-17 16:44:15 · 617 阅读 · 0 评论 -
小程序markdown文件解析和代码高亮(五)————请求优化篇
前言距离上次的文章过了1个多月,我们今天来继续优化和更新需求。微信小程序由于审核机制,如果每次需要更新数据的话,就需要重新提交审核和修改,我们能不能吧数据保存到外部,通过修改外部数据达到更新小程序的目的。由于每次换章节都重新请求一个全新的文件,我们是否可以缓存到本地,减少用户请求次数。针对第一个请求我们一开始是使用一个js文件进行保存数据的,所以我们对程序内部只是暴露一个数据接口,所...原创 2019-10-12 19:27:17 · 528 阅读 · 0 评论 -
nodejs自己搭建一个服务器来理解浏览器的缓存机制
搭建本地服务器安装必要的包npm install nodemon --s-devnpm install express --s-devnodemon方便我们开发的时候,js文件更新自动编译执行express是一个服务器渲染框架,能够搭建服务器开始搭建服务器搭建nodejs服务器const fs=require('fs')// nodejs自带const path = requi...原创 2019-09-08 04:37:41 · 589 阅读 · 0 评论 -
获取dom元素操作整理
文章目录获取元素属性和方法方法属性增删改操作创建添加克隆删除自定义属性修改样式document可以获取的盒子模型属性js盒子模型获取指定元素的 CSS 样式获取元素属性和方法整理与参考方法document.getElementById([ID])// 通过id获取元素节点document.getElementsByTagName([Tag-name])// <input name...原创 2019-09-01 16:24:46 · 261 阅读 · 0 评论 -
JavaScript 对象的创建与继承——继承篇
文章目录继承篇原型链继承借用构造函数继承继承篇原型链继承当我访问一个对象实例的属性时候,这个就会在实例的本身找是否存在这个属性,如果没有则访问[__proto__]或者prototype所以,如果我们需要实现继承,可以通过修改构造函数的原型来实现,这样每一个实例都可以得到父类的属性和方法。我们直接代码来看下如何实现吧!var Father = function(age) { thi...原创 2019-08-29 02:41:51 · 158 阅读 · 0 评论 -
JavaScript 对象的创建与继承——创建篇
对象每一个语言最重要与最基础的数据结构非对象莫属,因为可以通过它实现其他任何数据结构。什么是对象在JS语言中,对象的定义未:无序属性的集合,其属性可以包含基本值、对象或者函数,换句话说,就是对象里包含许多属性,这些属性通过映射可以指向任何类型的值。创建一个对象通过实例Object来创建一个对象var o = new Object()o.name = 'Rex'o.age =...原创 2019-08-28 02:17:15 · 217 阅读 · 0 评论 -
数据结构之排序算法--------JavaScript篇
文章目录排序算法简单排序算法冒泡排序选择排序插入排序高级排序希尔排序快速排序排序算法简单排序算法冒泡排序像可乐里面的气泡一样,每一个数都自行的向上比较,如果符合就停下,不符合就继续冒泡对未排序的元素从头到尾依次与相邻元素比较,如果不符合条件则调换位置,符合则进行下一个元素比较时间复杂度(n2n^2n2),空间复杂度(111),稳定 function bubbleSort (ar...原创 2019-08-14 21:19:26 · 217 阅读 · 0 评论 -
JavaScript Promise使用与实现-----自己写一个Promise
梳理一下我们现在明白了如何使用Promise了,所以我们需要来根据需求来思考下如何实现一个Promise首先Promise是一个对象,因为我们每次是通过new来实例一个PromisePromise是对象,则代表存在Promise中有一个构造函数,这个构造函数接受一个参数:函数参数这个函数参数已经有了具体规则,就是接收2个参数resolve和rejected,分别代表这成功回调和失败回调...原创 2019-08-26 15:42:07 · 486 阅读 · 0 评论 -
JavaScript Promise使用与实现-----如何使用?
如何使用promise一般来说,我们处理异步事件都时候都是函数里面套函数,但是这样不仅不美观而且可读性非常差,就出现了回调地狱的问题fs.readdir(source, function (err, files) { if (err) { console.log('Error finding files: ' + err) } else { files.forEach(...原创 2019-08-19 18:23:35 · 437 阅读 · 0 评论 -
JavaScript连续赋值的执行顺序问题
引子一道阿里的面试题let a = { n:2}let b = aa.x = a = { l:2}// 说出 a 和 b的输出值我第一次看到这个题目是懵逼的,因为平时没注意=的多次赋值的执行顺序的问题。第一种答案:a => { l:2, x:{ l:2 }}b=> { n : 2}第二种答案:a => { l:2}b=&...原创 2019-08-19 16:04:57 · 2222 阅读 · 5 评论 -
数据结构之红黑树
红黑树什么是红黑树一种根据特别规则而生成的二叉查找树普通的二叉查找树左子树上所有结点的值均小于或等于它的根结点的值。右子树上所有结点的值均大于或等于它的根结点的值。左、右子树也分别为二叉排序树。文字理解不能,就看图吧)]如果我们需要查找10的时候如何进行查找?先查找根节点由于10 > 9,因此查看右孩子13:由于10 < 13,因...原创 2019-08-14 15:14:39 · 146 阅读 · 0 评论 -
nodejs利用websocket搭建一个聊天室
搭建服务器搭建一个返回网页的端口const express = require('express')const app = express()const path = require('path')const fs = require('fs')app.use(express.static(path.join(__dirname, 'public')))//监听端口app.list...原创 2019-09-09 02:48:28 · 1328 阅读 · 0 评论 -
webpack新手快速上手篇
文章目录最简单的例子多入口文件Loader插件PLUGINS环境变量最简单的例子// main.jsdocument.write('<h1>Hello World</h1>');配置文件webpack.config.jsmodule.exports = { entry: { bundle1: './main1.js' }, output: {...原创 2019-09-16 20:11:29 · 194 阅读 · 1 评论 -
一篇理清Web的用户端存储
用户端存储为了减少HTTP请求和实现维持服务器和客户端的状态联系,就需要用户端存储数据。有了这个,才能让静态网页迈向了动态网页和离线网页的变化。Storage兼容性:IE8+ chrome safari4+localStorage在浏览器关闭,然后重新打开后数据仍然存在。通过Window.localStorage 属性来实现。权限:同一个DOM源的网页才能访问方法增/改:·...原创 2019-09-19 14:11:40 · 218 阅读 · 0 评论 -
前端开发的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 评论