WarrenLee的博客

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。

getOption(chart1)对应的option只要复制echart你需要的示例option即可。

有上面的代码可知，我们需要取到jwt token校验后的user属性，因此我们需要封装对应装饰器去取到，由于该currentUser装饰器的逻辑简单，只需要取对应req的user即可import {import {

如果使用vue实现则把useLayoutEffect里面的逻辑放mounted钩子里面。

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。如何使网页变灰，css3提供了一个滤镜特效，通过filter:gratscale(1)

1.前端渲染优化：一些大数据的接口，刷新页面后需要重新获取接口，可以使用该插件。以上都是官方GitHub的用法，网上很多都没讲好，所以po在这里供大家参考。

实现前需要了解这些Intersection Observer API根据MDN的文档，“Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。”。通俗讲，就是一个能够监听元素是否到了当前视口的事件，一步到位使用例子对于实现一张图片的懒加载，我们可以采用ntersection Observer + dataSet。假如我们的电脑是1920*1080的话，现在有个图片，他距离顶部有1500px，我们希望在它在滚动到可视区

import React from 'react'import ReactDom from 'react-dom'import ReactMarkdown from 'react-markdown'import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'import {atomDark} from 'react-syntax-highlighter/dist/esm/styles/prism'// Did you kn

问题描述不同标签页下进行切换时，会导致echart图的切换，当切换时标签页中的echart图会缩在一起,如下图所示：原因antV中该组件不能刷新视图重新执行render，也即不会触发echarts图的初始化销毁等阶段，这几个tab中的echarts是同时加载的。解决useState声明一个变量a并把它绑定antv的组件Tabs属性activeKey，并且添加onchange方法，方法里setState改变该变量a，触发render触发echarts图的初始化销毁等阶段...

前端 MVC 阶段在对比之前，我们需要知道促使前端 MVC 阶段的背景，是因为前端脚本具备读写数据、处理数据、生成视图等功能，页面需求开始变得复杂起来。此时，前端生态迫切需要开发出轮子工具，目的是便利开发者来管理他们的代码，“时势造英雄”，属于前端的 MVC 框架诞生了。前端MVC模式主要分为三部分：视图（View）：用户界面控制器（Controller）：业务逻辑模型（Model）：数据模型View 作为用户界面，发送指令给 Controller，Controller 要求 Model 改变状

<el-tree :data="data" node-key="id" :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <!-- data.icon为data里的icon属性，用于识别icon图片 --> <i

1.开始TypeScript实战01–封装并发布一个库2.踩到的坑（1）npm 发布包报错：have permission to publish “XXX”. Are you logged in…（2）注册的npm官网账号没有进行邮箱验证，没有发布的权限。In most cases, you or one of your dependencies are requesting...

DataV,主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用组件风格边框：带有不同边框的容器装饰：用来点缀页面效果，增加视觉效果图表：图表组件基于Charts封装，轻量易用其他：飞线图/水位图/轮播表/…可视化库特点开源免费：长期维护，不断添加新组件以丰富组件库开箱即用：大部分组件设置宽高或配置简单的数据即可使用视觉绚丽：通过组合不同的配置项可以达到多变的视觉效果优点：相比于产品使用的大屏，其布局以及样式可变性强抽象层次太高，入门简单组件样式炫酷痛点..

1，使用display:-webkit-box解决把display:flex改成display:-webkit-box解决问题

可以用于对div里面的文字进行居中，对上对齐，对下对齐。集体实现是：对上对齐<div style="display:table;width:100px"><div style="display:table-cell;width:100%">123123</div></div>对下对齐<div style="display:table;width:100px"><div style="display:table-cell;width

1.延迟函数const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : reject('fail') }) const getRes = async (data) => { t

本文来源于Echarts中文文档 Echarts中文文档（1）如何把第四列设为X轴，第二列设为Y轴series:{ encode:{x:3，y:1}, ...}（2）如何把第四行设为X轴，第二行设为Y轴series:{ encode:{x:3，y:1}, seriesLayoutBy:'row', ...}``(3)如何让第一列和第二列出现在提示框中？series:{ tooltip:[1,2] ...}（4）数据没有维度名，如何定义维度名？dataset:{ d

解决方法：node-sass安装链接releases可以在该博客参考链接注意下载的链接路径必须准确

Vue3.0已经推出，但是2.0依旧是稳定强大的生态系统。v-once当我们只是调用一次data里的值时，我们不希望它随着值的改变而改变，因此，可以使用v-once，例如，<div id="app"><h2>{{mess}}</h2><h2 v-once>{{mess}}</h2></div><script>const app=new Vue({el:"#app",data:{ mess:"你好"}

1.Node.js的弊端Node.js之父Ryan Dahl（瑞安达尔）承认当初创建Node的时候，犯下了一些不可逆的错误。主要可以总结为以下十种错误：没有作用的index.js设计Node没用JavaScript异步处理Promise对象安全性较低使用gyp来实现build系统没有提供FFI而继续保留gyp内建package.json，这样太过依赖npm和yarn内建package.json造成的模块概念不准确容易使用require（“任意模块”）require进入的module没

主要是因为pm2服务不会随着cmd的Ctrl+C的结束而结束原因。而此时如果服务报错的话，pm2会不停地报错，这时候log文件下的.error就会不停地生成报错。这时候需要在终端运行：pm2 stop all能解决问题。...

本文章主要思想由ThoughtWorks@李光毅授权分享@李光毅，知乎专栏「前端技术漫游指南」以及图书《高性能响应式Web开发实战》作者。曾就职于爱奇艺、百度、知乎等互联网公司，目前就职于 ThoughtWorks，从事全栈开发相关工作。1，理论性的讨论前端架构前端架构满足的是非功能需求，什么是非功能性需求？就是可拓展性，可用性，可靠性，可维护性，可测试性。一个业务功能需求，可以有多种多样的方法去实现，之所以称满足的是非功能性的是因为它们和我们的业务需求没有任何关系。可是，运用框架和模式，是能

1.Vue生态圈之----Vue CLI3学习整理----browserslisthttps://www.cnblogs.com/adhehe/p/11175372.html2.vue-cli3脚手架的配置以及使用https://www.cnblogs.com/XCWebLTE/p/9546756.html3.IE浏览器兼容问题http://jartto.wang/2016/12/06/talk-about-ie-compatible-over-again/...

React 的核心思想是：封装组件。各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。React 大体包含下面这些概念：组件JSXVirtual DOMData Flow一丶基本方式index.jsimport React from 'react'i...

nest.js入门笔记11.what is Nest（NestJS）？是用于构建高效，可扩展的Node.js服务器端应用程序的框架。特点：（1）使用渐进式JavaScript，内置并完全支持TypeScript（但开发人员能够使用纯JavaScript进行编码）（2）并结合了OOP（面向对象编程），FP（功能编程）和FRP（功能反应式编程）的元素。（3）在底层，Nest利用了诸如Express之类的健壮的HTTP Server框架，并且可选择配置为也使用Fastify（4）在这些常见的Node

一丶JavaScript1.application/x-www-form-urlencoded与application/json的区别：https://blog.youkuaiyun.com/java_xxxx/article/details/81205315（总结：i）, content-type:application/json的数据格式：json字符串，application/x-www-for...

1.为什么relative不能给行内元素设置宽高？定位中，Static和relative两个定位不能给行内元素设置宽高。，是因为Position:fixed，Position: relative，行内元素转换为行内块元素。2.层级问题 （谁高）总结：定位高于浮动，浮动高于标准流用法：1、必须有定位。（除去static之外）。2、给定z-index的值为层级的值。（不给默认为0）（层...

在 JavaScript 中使用内存基本上在 JavaScript 中使用分配的内存，意味着在其中读写。这可以通过读取或写入变量或对象属性的值，甚至传递一个变量给函数来完成。垃圾回收机制由于发现一些内存是否“不再需要”事实上是不可判定的，所以垃圾收集在实施一般问题解决方案时具有局限性。下面将解释主要垃圾收集算法及其局限性的基本概念。内存引用…...

css3实现轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ padding: 0; ...

在面试中，我们往往会遇到手撕代码，下面介绍javascript手写三种常见算法快速排序 function quick(str){ if(str<=1){//递归需要结束条件，当数组元素剩1时，返回 return str; } var mid=Math.floor(str.length/2);//选择中间索引，Math.f...

1 一个MVVM框架和jQuery操作DOM节点有什么区别？JQ操作DOM节点是要用$符号对dom节点进行属性改变，事件注册，事件触发，例如，Hello, BatMan!var name = 'Homer';$('#name').text(name);而，MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：...

问题1.如果是改变单个input的value值，并实时改变html的value这个可以参考博客：https://www.cnblogs.com/hbujt/p/5550672.html很赞！可以实现的！问题2。但是，我的情况比较复杂，我是通过获取日期控件的值将其放在input上，可是，问题就来了！单个input是通过blur,click,mouseover这些事件来实现对value的实时...

说明：vue项目用的mui框架和mintUI框架，是参考一位博主的框架。自己做的主要完成：基于Vue2.0, 原生DOM,Axios通过录入住宿时间和选择房型，并且加入购物车实现模拟预订酒店.步骤如下1 点击“住宿时间”，分别填写入住和离开日期，再点击确定日期，最后点击提交2 到goodsList页面，点击录入住宿时间，选择合适的房型，点击 立即购买3 最后到购物车页面，点击“更新...

**基于MUI框架+css+js写的简易仿微信App**功能页面展示代码详见功能页面展示代码详见https://github.com/WarrenLee19/myWeiXin

**主页面展示：**页面代码（HTML）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度一下，你就知道&lt;/title&gt; &lt;...

沃伦record@TOC网站主页面![Alt]=(https://avatar.youkuaiyun.com/7/7/B/1_ralf_hx163com.jpg（div盒子模型（CSS略））HTML代码如下&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/html"&gt;&lt;head lang="en"&gt; ...