- 博客(121)
- 收藏
- 关注
RSS订阅原创 原生js实现分页
原生javascript分页 html分页与ajax数据请求结合使用 前端js分页1. page.css.pagination { padding:5px; font-family: '微软雅黑',Arial,Verdana,arial,serif;}.pagination ul { list-style: none; padding-left: 0; font-size: 0;}.pagination ul li { padding: 0 10px;
2022-04-12 15:25:53
2039
原创 angular知识点
1、声明属性的几种方法public 共有 *（默认）可以在这个类里面使用，也可以在类外面使用protected 保护类型 只有在当前类，和它的子类里面可以访问private 私有 只有在当前类才可以访问这个属性2、指令解析HTMLcontent = '<h2>我是一个HTML标签</h2>'<span [innerHTML]='content'></span>循环domarr = [1,3,2,4,5]<ul
2021-10-31 22:51:16
337
原创 google charts
google echarts使用的时候，引入的包比echarts小//在html中引入方式 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>//在项目中引用npm install chart.jsgoogle echarts<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-
2021-08-18 13:46:04
753
转载 js 树形结构数据 已知某一子节点 一次向上获取所有父节点
已知树形结构 res。现在有一个对象是{code: 1,name: “水上分局”},想向上依次获取取得父级，比如说水上分局 父节点是汉阳区 汉阳区父节点是武汉市 武汉市父节点是湖北省 最后将 汉阳区 武汉市 湖北省var res = [{ code: 1, name: "湖北省", children: [{ code: 1, name: "武汉市", children: [{ code: 1, .
2021-08-04 20:07:34
3331
1
原创 数组的遍历方法的区别
数组的5中遍历方法，forEach,map,some,every,filter1.forEach没有返回值(返回值为undefined)，可以改变数组本身forEach到底可以改变原数组吗？这几天在平时练习的时候，发现一个很匪夷所思的问题！就是我的印象中，forEach是可以改变原数组的呀！！！???，but ！为什么现在这么简单的字符串数字组成的数组，咋就永远改不了原数组那？？？咋就这么费劲的吗？？？后来，在各种尝试无果后，硬是逼着我，无奈的打开了项目，我就想看看平时我都用的这么理所当然可以改
2021-06-08 01:28:59
190
原创 video标签动态设置src
<video width="300" height="250" controls style="display: none;margin: auto;" id="videos"> <source type="video/ogg" src=''/> <source type="video/mp4" src='' /> <source type="video/webm" src='' /> </vid
2021-05-19 11:22:34
4286
原创 组件封装注意事项
https://github.com/YvetteLau/Blog参考文章尽可能低耦合，组件之间的依赖越小越好比如不要直接修改父组件状态。最好从父级传入所需信息，不要在公共组件中请求数据传入数据添加校验处理事件的方法写在父组件中易用性拓展性可维护性可重用性一个封装组件提供 props 控制其行为而不是暴露其内部结构。1、封装耦合：耦合是决定组件之间依赖程度的系统特性松耦合（易修改、易复用、易测试）可以在不影响应用其它部分的情况下对某一块进行修改任何组件都可以替换
2021-04-27 22:38:22
6062
原创 基于react封装的一个步骤条组件
子组件tsx文件import React from 'react';import './staticOA.less'export enum LineMode { Left, Right, NoLine, JustLine,}export default function StaticOA(props: any) { const { data, lineMode, personMessageMode, stepNum, istop, isError,
2021-04-27 21:55:58
850
原创 基于react封装的一个类似Form.List功能的组件
子组件（Form.List组件）import React from 'react';import { Form, Col, Row, Select } from 'antd'const { Option } = Selectinterface Iprops { data: Idata[] setData: any}interface Idata { nickNameId: number | undefined nameId: number | undefine
2021-04-25 16:51:08
687
原创 indexedDb的使用
浏览器数据库IndexedDB入门教程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-04-15 19:03:30
204
原创 移动端h5页面预览word文档
在web端预览word文档，可以使用iframe来实现。但由于兼容性问题，并不能使用iframe在安卓和ios上预览文件经测试发现，mammoth插件可以实现该功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
2021-04-08 10:14:19
8040
2
原创 动态加载script文件
方法一(不建议使用)：document.write(<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"><\/script>)document.write('<script>new VConsole()<\/script>');当脚本中存在以 document.write 的方式向页面内写入内容时，各浏览器对于执行各个线程的顺序可能不一致此现象造成在各浏览器里，某
2021-03-30 14:03:57
853
1
转载 代理
代理技术如何实现一般实现代理技术的方式就是在服务器上安装代理服务软件，让其成为一个代理服务器，从而实现代理技术。常用的代理技术分为正向代理、反向代理和透明代理。正向代理一般情况下，如果没有特别说明，代理技术默认说的是正向代理技术。关于正向代理的概念如下：正向代理是一个位于客户端【用户A】和原始服务器(origin server)【服务器B】之间的服务器【代理服务器Z】，为了从原始服务器取得内容，用户A向代理服务器Z发送一个请求并指定目标(服务器B)，然后代理服务器Z向服务器B转交请求并将获得的内容
2021-03-19 12:00:16
403
原创 jQuery使用demo
1、jQuery的方法获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值<div id="dd">hello</div><input type="text" id='text' value="mmm">//获取非表单元素的值$('#dd'
2021-03-18 14:38:42
593
转载 useMemo的使用方式
下面我们通过一个实例，来理解下 useMemo的用法。父组件function App() { const [name, setName] = useState('名称') const [content,setContent] = useState('内容') return ( <> <button onClick={() => setName(new Date().getTime())}>name</button>
2021-03-15 11:34:56
11830
转载 setState是同步还是异步
在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。1、this.setState的两种定义方式定义初始状态state = { count: 0 },如果此时有一个按钮，点击按钮让计数加1，我们可以有两种写法(1)传递对象 this.setState({ count: this.state.count + 1})(2)传递函数 this.setState((state, props) =>.
2021-03-15 11:31:10
2958
原创 useEffect与react生命周期
useEffect的使用componentDidMount()组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染componentWillUnmount ()在此处完成组件的卸载和数据的销毁。clear你在组建中所有的setTimeout,setInterval移除所有组建中的监听 removeEventListenercomponentDidUpdate组件更新完毕后，react只会在第一次初始化成功会进入componentDid
2021-03-07 11:20:44
2224
原创 js宏任务和微任务
1、js为什么是单线程什么是进程？进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）什么是线程？线程：是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）浏览器是多进程的放在浏览器中，每打开一个tab页面，其实就是新开了一个进程，在这个进程中，还有ui渲染线程，js引擎线程，http请求线程等。 所以，浏览器是一个多进程的。大家都在说js是单线程的，但是为什么要设计成单线程？这主要和js的用途有关，js是作为浏览器的脚本语言，主
2021-02-23 10:47:29
544
原创 使用antd下拉框远程搜索（模糊查询）
html<Form.Item label="客户姓名" name="customerId" rules={[{ required: true, message: '请选择客户姓名' }]}> <Select placeholder="请选择客户姓名" getPopupContainer={trigger => trigger.parentNode} onChange={onCustomerChange} showSearch onSearch=
2021-02-20 17:30:23
3346
原创 HTML5和websoket权威指南
HTML5和websoket权威指南1、websocket入门ws和http相比，具有的优点？ws解决了http实时通信的不足之处，可实现双向通信http通过’轮询‘技术，可以定时发出求情，获取服务器的最新信息。但该方法在低信息率的情况下，将打开或关闭许多不必要的连接。ws减少了延迟，因为一旦建立ws连接，服务器能在消息可用时发送它们。2、websocket apiwebsocket由网络协议和websocket api组成实例化一个websoket对象var ws = new WebSo
2021-02-19 10:36:50
257
原创 es6 标准入门
es6 标准入门阮一峰 es6 标准0、疑难点问题一：关于全局变量a的值的问题var a = [];for (var i = 0; i < 10; i++) { //每次循环时，a[i]都等于函数function () { console.log(i);} ,循环时函数未调用 a[i] = function () { console.log(i); };}//调用数组a中的函数，此时，循环结束，全局变量为10，所以a中的函数调用后都为10a[6](); // 10
2021-02-18 16:25:15
632
转载 JS开发必须知道的41个技巧
Array1.数组交集普通数组const arr1 = [1, 2, 3, 4, 5 , 8 ,9],arr2 = [5, 6, 7, 8, 9];const intersection = arr1.filter(function (val) { return arr2.indexOf(val) > -1 })console.log(intersection) //[5, 8, 9]数组对象数组对象目前仅针对value值为简单的Number，String，Boolan数据类型con
2021-02-07 16:51:12
233
转载 JavaScript中的各种骚操作
01.数组去重正常我们实现数组去重都是通过双层变量或者indexOf的方式。（1）双层for循环去重function unique(arr) { for(var i=0;i<arr.length;i++) { for(var j=i+1;j<arr.length;j++) { if(arr[i] === arr[j]) { arr.splice(j,1); j--
2021-02-07 14:12:38
262
原创 HTML5 拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽2</title> <style type="text/css"> body{ height: 600px; border: 1px solid green; }
2021-01-19 11:14:27
155
原创 根据后端返回的地址下载PDF文件
需求在谷歌(Chrome)浏览器中,使用a标签属性download下载pdf链接文件，如果是相同域时,可以直接下载;但是如果域不同,则不是下载，而是直接打开页面预览文件。但是需求是直接点击下载文件,而不是打开预览；以及下载后台返回的文件流。方法一/* * 根据后端返回的pdf文件的地址，下载pdf文件 * url 完整的路径 * fileName 文件名 * type 文件类型，如.pdf */const fileLinkToStreamDownload = (url: string,
2021-01-15 17:20:01
3475
2
原创 react 省市二级联动组件
import React, { useState } from "react";import { Select } from 'antd';// 省市二级联动组件const { Option } = Select;const provinceData = ['安徽', '澳门', '北京', '福建', '甘肃', '广东', '广西', '贵州', '海南', '河北', '河南', '黑龙江', '湖北', '湖南', '吉林', '江苏', '江西', '辽宁', '内蒙古', '宁夏',
2020-12-26 16:46:32
1384
1
原创 proxy基础入门
proxy官网Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。1、术语handler包含捕捉器（trap）的占位符对象，可译为处理器对象。traps提供属性访问的方法。这类似于操作系统中捕获器的概念。target被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。2、语法const p = new Proxy(target, handler)参
2020-12-24 17:57:10
1018
1
原创 用react-custom-scrollbars插件美化 滚动条
react-custom-scrollbars官网安装npm install react-custom-scrollbars --save使用import React from 'react';import { Scrollbars } from 'react-custom-scrollbars';const Demo: React.FC = () => { return( <> <Scrollbars style={{ height:
2020-12-24 14:31:47
1487
1
原创 mobx入门教程
官网1、安装npm install mobxnpm install mobx-react2、mobx要点1、定义状态并使其可观察可定义任何数据类型变量import {observable} from 'mobx';var appState = observable({ timer: 0});2、创建视图以响应状态当 appState 中相关数据发生改变时视图会自动更新。import {observer} from 'mobx-react';@observercl
2020-12-24 11:24:51
629
原创 react 实现导出功能
1、不与后端接口联调，使用插件xlsx-oc插件安装npm i xlsx-oc使用，实例import React, { useState, useEffect } from 'react'import { Button, message, Table } from 'antd';import { exportExcel } from 'xlsx-oc'interface PostData { current: number pageSize: number com
2020-12-23 21:02:06
3754
原创 svg入门笔记
位图：由像素点组合成图像 canvas矢量图：以数学向量方式记录图像，内容以线条和色块为主. svgsvg是基于xml的技术文件后缀.svg<svg></svg>是最外层的根结点xmlns定义svg命名空间<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DT
2020-12-07 17:49:19
170
原创 onscroll 事件和onScrollCapture事件
onscroll 事件在元素滚动条在滚动时触发。HTML 中:<element onscroll="myScript">JavaScript 中:object.onscroll=function(){myScript};JavaScript 中, 使用 addEventListener() 方法:object.addEventListener("scroll", myScript);<!DOCTYPE html><html><head>
2020-11-24 10:47:48
7084
原创 TypeScript入门
ts是js的超集，为js添加类型系统0.环境安装要使用ts,先在系统中全局安装TypeScriptnpm install typescript -g在VS code中直接运行，先将ts文件转化为js文件//将ts文件转化为js文件tsc fileName //执行文件node fileName或者直接在文件中安装ts-node插件npm install -g ts-node安装之后可以直接执行ts文件//执行文件tsnode fileName1、ts的组成模块函数
2020-11-23 14:47:15
1330
原创 React hook的使用
Hook是什么一组钩子函数的集合功能：增强了函数组件的功能状态生存周期hook不能提供所有的生命周期的功能引用其它功能，可以自定义hookhook的使用class组件 功能齐全，但使用麻烦 状态、生存周期、引用函数组件+hook 功能齐全，而且使用方便 状态、生存周期、引用、其它1、useState和useEffect的使用在使用useState() Hook 时，必须遵循 Hook 的规则仅顶层调用 Hook ：不能在循环，条件，嵌套函数等中调用useState(
2020-11-19 16:39:50
210
原创 react router使用方法
react-router可以让跟组件动态的去挂载不同的其它组件，根据用户访问的地址动态的加载不同的组件一、react路由配置1、找到react router官方文档2、安装rect-router-dom npm install react-router-dom —-save3、找到项目的跟组件，引入rect-router-domimport { BrowserRouter ,Link,Route } from "react-router-dom"4、配置路由exact表示严格匹配组件要
2020-11-18 17:38:57
1973
原创 题目
1、给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]var twoSum = function(nums, target) { var result nums.some(
2020-11-11 10:46:49
102
原创 react中组件间传值
子组件Children传值(msg)给父组件Parent父组件import React ,{useState}from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import styles from './Welcome.less';import Child from './Child';export default (): React.ReactNode => { const [msg,s
2020-11-06 10:47:24
790
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人