- 博客(14)
- 收藏
- 关注
RSS订阅原创 React 组件抽离（key-value）,高效基础展示
组件抽离组件抽离的目的提高代码开发效率，减少重复代码输出原则1、数据驱动组件提取，必须是由数据来控制组件的表现形式，否则就失去了组件的通用性。2、可扩展一个成功的组件，首先需要满足基础的使用，其次需要接受自定义样式和内容。当你理解到抽离组件的两大原则，此时，你已经可以独立进行组件抽离。接下来，以key-value基础展示为例子，抽离组件。import React, { useEffect, useState, useRef } from 'react';import { isEmpty
2022-04-29 10:37:38
1013
原创 React、Ant Desgin自定义加载动画，lottie-web 将json解析成动画
在项目中，遇到需要在网页首屏，展示动画的需求，你会想到怎么做？思路一：设计师导出gif图片，用img进行展示。缺点：图片失真，影响效果。思路二：设计师导出json文件，用插件解析成动画展示。缺点：由于当时时间紧张，且不知道怎么操作，放弃了这个方案。直到在下一个项目中，遇到需要自定义加载动画效果的需求，再次把该方案提上日程。在项目中，应该多去思考，凡事都有解决方案。lottie-web 将json解析成动画。一、安装依赖npm install lottie-web --save或者yarn
2022-04-21 10:30:40
1694
原创 在React中，使用html2canvas，进行截屏下载。
使用html2canvas，进行截屏下载。import React, { useRef } from 'react';import printPage from 'html2canvas';const Index=()=>{ const printElement = useRef() as React.MutableRefObject<any>; const onPrintPage = async () => { const ele = printElemen
2022-04-20 18:09:48
1197
原创 正则表达式（匹配中英文、子母、数字）
正则表达式一、匹配中文[\u4e00-\u9fa5]二、英文字母[a-zA-Z]三、数字[0-9]四、匹配中文、英文、数字及下划线^[\u4e00-\u9fa5_a-zA-Z0-9]+$// 同时判断输入长度[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}五、常规匹配// 不能以_开头(?!_)// 不能以_结尾(?!.*?_$)// 至少一个汉字、数字、字母、下划线[a-zA-Z0-9_\u4e00-\u9fa5]+// 与字符串结束的地方匹配
2022-03-04 17:12:30
7470
3
原创 git 使用操作教程
git 使用操作教程git安装可以查看 廖雪峰 的官方网站一、git配置在git中，我们使用git config 命令用来配置git的配置文件，git配置级别主要有以下3类：仓库级别 local 【优先级最高】用户级别 global【优先级次之】系统级别 system【优先级最低】执行以下命令$ git config [--local|--global|--system] user.name "Your Name" // 这里填写git账号$ git config [--local|
2022-02-21 15:51:19
624
原创 React 文件流下载（前、后端）
前端通过接口，获取到后端返回的文件流，前端需要解析文件流，通过a标签的click()事件进行下载。import React from 'react';import { Button } from 'antd';const Index = (props: Props) => {/** * 删除含有 null 或者 undefined 的字段 * @param data 要检测的数据 */const deleteNullOrUndefinedField=(data: object)=&
2022-02-18 17:23:43
4465
原创 常见校验方法（正则表达式）
/* eslint-disable max-len, no-useless-escape */const rules = { // url校验 url: /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?
2022-02-18 10:06:45
203
原创 React 中使用 braft-editor 富文本编辑器（带上传图片功能）
react中使用富文本编辑器（带上传图片功能）在react中使用富文本编辑器，但是没有上传图片功能，只提供上传接口。话不多说，上代码。import React, { Component } from 'react';import BraftEditor from 'braft-editor';import { Upload, Icon } from 'antd';import { ContentUtils } from 'braft-utils';import { uploadImage }
2020-10-19 18:16:03
2952
1
原创 从URL输入到页面展现背后发生了什么？
从URL输入到页面展现背后发生了什么？从 URL 输入到页面展现经过以下过程：大致流程如下：1、在浏览器输入URL；2、浏览器进行DNS域名解析，查找到域名对应的IP地址；3、浏览器与服务器建立TCP连接；4、浏览器发起请求、服务器处理请求并通过TCP连接返回响应;5、浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用；6、解析HTML文档、构建DOM树、下载资源、构造CSSOM树、执行js脚本；渲染页面。相关知识点一、浏览器进行DNS域名解析，查找到域名对应的IP地址。
2020-07-06 11:18:30
348
1
原创 JavaScript之执行上下文，函数编译执行的过程
一、执行上下文执行上下文概念JS代码在执行前，JS引擎总要做一番准备工作，这份工作其实就是创建对应的执行上下文当执行一个函数的时候，就会创建一个执行上下文，这个执行上下文内就会收集变量，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。通俗的来说，函数执行上下文就是一个普通对象其中包含了3个属性 ：1、变量对象AO，用来存放变量2、this3、作用域链（自己的作用域、父类的作用域、全局作用域）VO是全局的变量对象执行上下文类别执行上下文有且只有三类，全局执行上
2020-05-16 18:08:05
391
原创 JavaScript之作用域、作用域链
JavaScript之作用域、作用域链作用域一、作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定了当前执行代码对变量的访问权限。1、1 全局作用域只要声明在函数外部的变量就称为全局变量，在代码中任何地方都能访问到全局变量的对象就拥有全局作用域（所有没有var直接赋值的变量都属于全局变量）。1、2 函数作用域在函数内声明的变量只能在函数内部访问到（局部变量），那么，我们就称能够访问到这个局部变量的区域为函数作用域。1、3 块级作用域块级作用域，使用let、c
2020-05-16 17:27:21
192
原创 JavaScript之变量、变量提升
JavaScript之变量、变量提升变量提升JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）变量的概念在JavaScript中 变量是用来存储数据值的容器。在JavaScript中声明变量的方式1、var 声明变量var a=1;特点:1、具有变量提升console.log(a); //undefinedvar a=1;2、不具有块级
2020-05-16 10:11:09
194
原创 JavaScript快速创建对象的方法
创建对象的五种方法（学习笔记）一、对象1、对象的概念对象的创建方式1、json对象的创建 { }2、new Object（）3、new Function（）4、Object.create（）5、new Class{}一、对象1、对象的概念1、对象抽象概念：属性的无序集合（无序属性的集合，其属性可以包含属性值，对象或者函数）2、对象具体概念：万物皆为对象对象的创建方式1、json对象的创建 { }json对象的方式来创建对象，主要目的就是为了包装多个属性（数据）var obj = {};2
2020-05-11 20:09:36
431
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人