- 博客(108)
- 收藏
- 关注
RSS订阅原创 小程序底层原理
小程序底层原理参考：https://www.bilibili.com/video/BV1Mh411h7JQ双线程设计小程序有渲染层（webview线程管理）和逻辑层（客户端js解释引擎线程）组成。提升安全性逻辑层无法直接获取到渲染层的元素dom；对js语法限制（不能new对象，page外面执行脚本等），防止xss攻击；防止开发者获取用户敏感数据；提升页面加载性能逻辑代码执行不影响页面的渲染，区别于h5的单线程渲染层和逻辑层都基于客户端Native作为桥接进行间接通信：
2022-01-09 21:44:07
1070
原创 css滚动贴合ScrollSnap
css滚动贴合ScrollSnap参考资料：2行 CSS 实现滚动贴合 Scroll Snap 特效scroll-snap-type/*滚动方向x轴，任何时候都强制滚动*/scroll-snap-type: x mandatory;/*滚动方向y轴，接近容器边缘时才滚动*/scroll-snap-type: y proximity;/*滚动方向任意，强制滚动*/scroll-snap-type: both mandatory;语法：none | [ x | y | block |
2021-11-29 17:06:55
553
原创 Referrer Policy
Referrer Policy参考：Referrer Policy 介绍Referrer PolicyReferrer-Policy浏览器的同源策略介绍Referrer Policy中文翻译过来是“来源页面政策”，该字段存在于http请求的公共部分General中，用于过滤 Referrer 报头内容当用户在浏览器上点击一个链接时，会产生一个 HTTP 请求，用于获取新的页面内容，而在该请求的报头中，会包含一个 Referrer，用以指定该请求是从哪个页面跳转页来的，常被用于分析用户来源等
2021-11-20 22:40:19
3106
1
原创 npm依赖冲突问题
npm依赖冲突问题同名不同版本号npm包在用一项目中使用：仓库源码：https://github.com/rayhomie/antdVersionTest我们以antd作为例子，想在一个项目中同时使用antd3和antd4：（如果要单独使用一个版本的包的话，需要把包单独拿出来）此时我们npm i安装下依赖，在页面中同时使用antd3和antd4的Form组件进行测试引入样式到全局：我们看下效果，发现两个版本的Form组件都可以正常使用，但是样式会冲突：下面是ant3和ant4样式冲突导
2021-11-04 14:42:39
4674
原创 iframe事件冒泡的问题
iframe事件冒泡的问题在react中遇到了遇到一个问题，导致的原因就是：iframe的事件只能冒泡到iframe下的window，不能冒泡到父页面的window。实现思路：通过监听iframe的点击事件，使用js实现自动点击button，来收起popover。（存在问题：iframe跨域）在本地开发时，只能把项目跑在本地的不同端口上，所以是跨域的，线上环境不跨域。（如果想要实现本地模拟正式线上环境，需要本地启动nginx服务器代理到相同端口下）方法1：domain因为此时两个页面的主域都是
2021-10-17 19:50:05
2194
原创 vue3学习之路
一、cdn引入基本使用template的写法data属性必须是函数计算属性的使用其他属性（props、watch、emits、setup、生命周期等）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
2021-09-15 22:17:51
921
原创 React将htmlcanvas报表转为docx并下载
思路：向后端请求数据，解析结果，渲染成相应的图表文字形成html页面。使用file-saver和htmlDocx库来实现导出下载doc文件import { saveAs } from 'file-saver'import htmlDocx from 'html-docx-js/dist/html-docx'const handleExport = () => { echartsRef.current.forEach(instance => { const $cha
2021-09-08 15:32:24
619
原创 JavaScript常见设计模式
Javascript常⻅设计模式设计模式总的来说是一个抽象的概念，是软件开发人员在开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当⻓的一段时间的试验和错误总结出来的。1 、工厂模式工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。// 简单工厂模式：只需要一个正确的参数，就可以获取到你所需要的对象，用于生成实例function Animal(opts) { var obj = n
2021-08-03 14:14:00
254
1
原创 从零搭建gitlabci环境
从零搭建gitlabci环境学习途径搭建环境将gitlab镜像拉到服务器上跑起来。1】拉取镜像使用docker拉取gitlab/gitlab-ce的镜像docker拉取nginx镜像#查看本地镜像docker images#从远程仓库拉取gitlab/gitlab-ce的镜像docker pull gitlab/gitlab-ce#从远程仓库拉取nginx镜像docker pull nginxdocker images#REPOSITORY TAG
2021-07-28 22:33:28
1114
原创 html5 drag api
html5 drag api参考：html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）html5 drag api详解drag - Web API 接口参考 | MDN1】拖拽和释放定义拖拽：Drag释放：Drop2】源对象和目标对象3】相关APIdragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
2021-07-28 16:49:25
2452
原创 docker初试
Dockerdocker是一个开源的应用容器引擎，不是一个虚拟机，但是实现了虚拟机的资源隔离。核心概念镜像：创建虚拟机前需要下载一些系统预设环境软件（差不多就是镜像）容器：类比一个正在运行中的一个虚拟机Dockerfile：一个配置文件，用于描述指定一个镜像如何构建环境。远程仓库：保存着很多公有的镜像（包括Ubuntu镜像、Nginx镜像、MySQL镜像、Tomcat镜像等）当然也可以将我们自己搭建的镜像通过push上传上去。步骤...
2021-07-23 23:59:15
98
原创 hox解读
hox源码解读react-reconciler使用到了react-reconciler库，暂时不知道拿来干嘛的，先看一篇文章了解下：React源码剖析：react、 react-dom、react-reconciler 的关系。reactreact负责描述特性，提供ReactApi。类组件、函数组件、hooks、contexts、refs…这些都是React特性，而 react 模块只描述特性长什么样、该怎么用，并不负责特性的具体实现。react-domreact-dom 负责实现特性。reac
2021-07-21 21:36:25
439
原创 antd树形控件编辑递归处理
antd树形控件编辑递归处理题目：请根据下面的数据结构，使用antd的“树形控件”组件，构建一棵树形结构的，**并且支持对每个节点名称进行编辑修改（**编辑方式可以是弹窗编辑，也可以是将节点名称变为input框直接修改）。要求：自建React项目，可在本地运行，尽量保持代码风格良好可读。树形结构数据：[ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key
2021-06-21 21:10:07
1176
原创 web animations api
web animations apiWeb Animations API 允许同步和定时更改网页的呈现, 即DOM元素的动画。它通过组合两个模型来实现：时序模型（描述动画时间）和 动画模型（描述动画样式）。接口对象：1】Animation提供播放控制、动画节点或源的时间轴。//1.构造函数(Animation构造函数返回一个新的Animation对象实例)var animation = new Animation(effect, timeline);/*参数 effect（可选）将Key
2021-06-20 14:22:46
738
原创 重学node
1】浏览器引擎浏览器内核就是指的：排版引擎（页面渲染引擎）。Gecko：早期网景、火狐使用。Trident：微软开发，IE4~11浏览器，但是Edge转向Blink。Webkit：苹果基于KHTML开发、开源。用于Safari、谷歌之前也使用。Blink：是Webkit的一个分支，Google开发，目前用于谷歌、Edge、Opera等。JavaScript引擎职责：JS是高级语言------>汇编语言------->机器语言----->cpu执行SpiderMonk
2021-05-09 17:27:36
282
原创 V8优化之推荐使用TS
V8优化之推荐使用TS我们来看一下官方对V8引擎的定义：V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行。V8可以独立运行，也可以嵌入到任何C ++应用程序中。V8引擎本身的源码非常复杂，大概有超过100w行C++代码，但是我们可以简
2021-05-08 16:57:13
760
原创 鼠标事件offsetX会传递给子元素
鼠标事件offsetX会传递给子元素本来是想要通过e.offset来创建XY轴二维坐标系的，当事实上很难办到，所以我改用了通过div.offsetWidth（元素宽度包括border）、div.offsetLeft（元素距整个网页左边缘的长度）、e.pageX（鼠标事件中获取鼠标距离整个网页左边缘的长度）来实现。...
2021-05-03 12:21:37
446
原创 localStorage纯前端缓存实践
localStorage纯前端缓存实践8】localStorage缓存js实践思路:js包都不以script标签的形式插入到html中，而是需要以dom的形式动态设置script，并写入脚本。判断bundle缓存是否过期：使用htmlwebpackplugin打包时不插入script标签，而是插入z89e0af6.bundle.js但是不让它显示。（我们需要手动写插件进行拦截）在index.html中写脚本进行判断。Dll动态链接库拆一些公共的文件：react/react-dom/vu
2021-05-02 19:46:44
402
1
原创 react-native开发问题以及处理
React Native搭建开发环境npm i -g react-native-cli react-native init demo01react-native run-ios获取屏幕宽度import { Dimensions,StatusBar,SafeAreaView,Text} from 'react-native';import React from 'react';const App = () => React$Node = ()=>{ retur
2021-04-08 20:55:03
857
原创 hover内部指定子类的样式
hover内部指定子类的样式如下图：想要实现的是鼠标hover在外部容器上，其子元素变化不同的样式。上代码：（css的hover内部还可以进行写选择器来写对应的子元素样式）.ant-steps-item-container {// 外部容器 &:hover { .ant-steps-item-icon {// 整个圆圈⭕️ background-color: #1890ff; transition: all 0.3s; .ant-steps-i
2021-01-29 17:02:10
441
原创 css3属性resize用户可以手动跳整元素大小
css3属性resize用户可以手动跳整元素大小resize属性指定一个元素是否是由用户调整大小的。**注意：**resize属性适用于计算其他元素的溢出值是不是"visible"。默认值：none继承：no版本：CSS3JavaScript 语法：object.style.resize=“both”resize: none|both|horizontal|vertical值描述none用户无法调整元素的尺寸。both用户可调
2021-01-15 17:21:40
198
原创 判断一段文字的width
判断一段文字的width将一段文字字符串传入函数动态创建一个div元素，然后返回获取div的宽度即可：（思想就是和图片上传预判断图片的宽高一致）export const getTextWidth = ({ str, overWidth, document,}: { str: string;//需要判断的一段字符串 overWidth: number;//需要判断的宽度阈值(单位px) document: any;}) => { var width = 0; va
2021-01-15 17:05:40
355
原创 antd的Table列选择、列拓展
antd的Table列选择、列拓展列选择：rowSelection属性//选择的项目存放在数组中const [selectedRow, setSelectedRow] = useState<GoodsListType[]>([]);//选择此项const onSelect = (value: any) => { selectedRow.some(i => i.key === value.key) ? setSelectedRow(selectedRow.fil
2021-01-15 16:57:43
2877
原创 2021-01-11-雪碧图做表情管理器
雪碧图做表情管理器雪碧图的原理：将所有的表情都放在一张大图上，然后使用background-image、 background-position、width、height属性去定位显示每个表情。（所以需要预先做一个表情定位的映射表）//<i class="icon icon-home"></i>:global { .icon-s01 { background-image: url(http://xdfe-new.s3.cn-east-2.jdcloud-oss.c
2021-01-15 16:56:02
437
原创 虚拟列表key复用问题
虚拟列表key复用问题我使用的虚拟列表是@umijs/hooks提供的useVirtualList。const { list, containerProps, wrapperProps } = useVirtualList(data, { overscan: 30, itemHeight: 48,});key= Math.random().toString().split('.')[1]//动态随机数<div className="list" key={key}>
2021-01-06 10:19:03
244
原创 mongodb学习笔记
MongoDBMongoDB是nosql数据库。没有行和列的概念，用JSON键值对来存储数据。集合就相当于“表”，文档就相当于“行”一、基本使用mongo：连接数据库show dbs：查看当前数据计算机中的数据库use DB_name：使用切换到数据库、创建数据库（use 之后才能使用db对象进行操作）db：查看当前所在的数据库show collections：查看数据库中的表（集合）1】插入数据db.user.insert({"username":"zhangsan","age":20
2021-01-03 13:34:02
170
3
原创 多行省略和选择器
一、多行省略1】私有属性如果使用less预处理器，中间的两行注释不能去掉。下面的代码可以实现多行省略。（注意注释的细节）display: -webkit-box;/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */-webkit-line-clamp: 2;overflow: hidden;word-break: break-all;work-break属性：属性规定自动换行的处理方法。
2020-12-26 15:47:34
252
原创 自启服务mock联调跨域问题
自启服务mock联调直接在地址栏访问后端接口，不可能出现跨域，跨域一般出现在ajax请求中进行跨域访问：配置cors：成功实现跨域mock请求：
2020-12-23 11:09:26
789
原创 踩坑scrollIntoView
踩坑scrollIntoViewElement.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。页面（容器）可滚动时才有用！element.scrollIntoView（）; // 等同于element.scrollIntoView(true)element.scrollIntoView（alignToTop）; //布尔参数element.scrollIntoView（scrollIntoViewOptions）; //对象参数alignToTop[
2020-12-21 13:35:44
2164
原创 Nodejs服务端
Nodejs服务端一、http模块//引入http模块const http = require('http');//创建http服务http.createServer((request, response) => { console.log(request.url)//获取url //设置响应头 response.writeHead(200, { 'Content-Type': 'text/plain;charset="utf-8"' }) //结束响应并返回给客户端 r
2020-12-20 21:05:15
483
原创 antd表单
在知更新版运营管理开发过程中，遇到表单特别多的情况。<Form.Item label="通知类型" wrapperCol={{ span: 5 }}> {getFieldDecorator('type', { initialValue: notice_info.type || 1, rules: [{ required: true, message: '请选择通知类型' }], })( <div> <Select>
2020-12-20 12:34:41
833
1
原创 less中使用global前序修改antd的原始组件样式
遇到这个问题是因为我想要修改antd中的tooltips组件的样式：也就是想要修改tooltips下的字的宽度。如果直接在tooltips组件上使用style或者overlayStyle:{{width:300}}是不会生效的。因为这个tooltips组件把文字包了两层。我们需要对tooltips组件设置类名，然后使用css选择器去获取对应的文字dom节点：注意，如果不使用:global{}不能正常使用选择器，修改antd组件样式。...
2020-10-21 19:04:32
5189
原创 react函数组件是怎样执行的？
react函数组件是怎样执行的？总结：1.首先初始化，会按顺序执行组件中的所有函数，然后组件被挂载到根节点上。遇到useState执行会生成一个state和setState存在当前组件作用域中遇到useEffect之后回去订阅其中的消息，然后再组件挂载后去发布消息遇到useMemo或者useCallback就会根据他们依赖的状态去缓存，属性（函数返回结果值）或方法2.当setState状态改变后，又会去执行对应的组件函数。遇到useState也会去执行，返回修改后的状态（指向新的地址，所
2020-10-14 19:51:30
1243
原创 实现下拉加载更多
import React, { useState, useEffect } from 'react'import produce from "immer"import { Select } from 'antd'const { Option } = Selectconst SelectAntd = () => { const data = [//源数据 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,
2020-10-14 09:47:59
1075
原创 函数组件和类组件和dva视图更新问题
类组件setState视图更新：import React from 'react'export default class ThisSetState extends React.Component { state = { num: 1 } render() { return <div onClick={() => { this.setState(() => { this.st
2020-10-13 18:02:07
922
原创 Umi Hooks
useRequest核心特性：自动请求/手动请求、SWR(stale-while-revalidate)、缓存/预加载、屏幕聚焦重新请求、轮询、防抖、节流、并行请求、loading delay、分页、错误重试、请求超时管理、suspense、加载更多，数据恢复 +滚动位置恢复…const {data,loading,error,run,cancel}=useRequest(requsetFunc,options)1】默认请求在组件初次加载时，自动触发该函数执行，而且useRequest会生产异步返回
2020-10-10 15:04:10
2666
原创 react hook 造轮子
一、sass的使用1、@import方式引入scss文件，后面必须带后缀名scss@import "main.scss";2、Partials方式引入base.scss文件,文件必须以（下划线）开头，可以不用带后缀名@import "_base";sass @import和css @import命令的区别：CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。Sass Part
2020-10-04 14:28:23
737
原创 React过渡动画react-transition-group
React过渡动画安装react-transition-group# npmnpm install react-transition-group --save# yarnyarn add react-transition-group可导入使用的有四个组件对象：Transition（不常用）CSSTransition（它的属性结合css控制组件出现、消失）SwitchTransition（控制两个组件之间状态切换）TransitionGroup（当有一组组件的动画时，需要使用它包裹）
2020-09-30 14:57:33
453
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人