吃瓜群众欢乐多-CSDN博客

原创常见查找dom元素的几种方式

document.getElementById只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的document.querySelector返回节点子树内与之相匹配的第一个 Element 节点。如果没有匹配的节点，则返回null。匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。查找第一个匹配 class属性的html元素这个例子中，会返回当前文

2021-01-16 21:48:23 3504

原创 js创建对象的三种模式（工厂模式、构造函数模式、原型模式）

1、工厂模式new Object()function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { console.log(this.name); }; return o;}let person1 = createPerson("Nic

2021-01-16 20:25:35 341

原创内存管理

在使用垃圾回收的编程环境中，开发者通常无须关心内存管理。不过，JavaScript运行在一个内存管理与垃圾回收都很特殊的环境。分配给浏览器的内存通常比分配给桌面软件的要少很多，分配给移动浏览器的就更少了。这更多出于安全考虑而不是别的，就是为了避免运行大量JavaScript的网页耗尽系统内存而导致操作系统崩溃。这个内存限制不仅影响变量分配，也影响调用栈以及能够同时在一个线程中执行的语句数量。将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如.

2021-01-15 22:26:00 165

原创 js的执行环境与作用域

4、执行环境与作用域变量或函数的上下文决定了它们可以访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象（variable object），而这个上下文中定义的所有变量和函数都存在于这个对象上。全局上下文是最外层的上下文。在浏览器中，全局上下文就是我们常说的 window 对象，因此所有通过var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁

2021-01-15 21:48:26 98

原创基本类型和引用类型作用域和内存

基本类型undefined,null,String,Number,Boolean和Symbol保存原始值的变量是按值（byvalue）访问的，因为我们操作的就是存储在变量中的实际值基本类型不能添加属性引用类型保存在内存中JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象，因此，引用类型的值是按引用访问的。引用类型能添加属性1、复制变量值基本类型var str = 'lisa';v

2021-01-15 21:33:46 106

原创手写一个Promise-核心源码（分步骤讲解运行过程）

Promise的用法new Promise((resolve, reject) => { resolve(1); console.log(2);}).then(r => { console.log(r);},error=>{ console.log(error)});Promise()中传入两个resolve和reject两个函数，.then()中传入两个函数（成功执行，失败执行）。1、new PromiseFunc 时初始化PromiseFunc 的 .

2021-01-13 17:00:02 202

原创深拷贝-序列化与反序列化的弊端

知识点：1.取不到值为undefined的键2.NaN和无穷转变为null3.原型内容4.date对象转为date字符串下面举个例子：let obj = { a:undefined, b:null, c:true, d:'', e:123, f:{}, g:[], h:NaN, i:Infinity, j:new Date(), k:function () { console.log("k.

2021-01-12 15:49:33 547

原创 import和require的区分

require会加载fs的所有方法，运行时加载// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。

2021-01-12 10:59:51 125

原创 constructor、class、super之间的关系

我们在弄清楚关系之前，我们首先要清楚各自的概念.1、classclass是一种语法糖类和模块的内部，默认就是严格模式不存在变量提升由于本质上，ES6 的类只是 ES5的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。2、constructorconstructor 是一种用于创建和初始化class创建的对象的特殊方法，class Polygon { constructor() { this.name = 'Polygon'; }}

2021-01-12 10:04:50 1746 1

原创 class类和普通构造函数（Constructor）继承的实现

classclass Parent { constructor(name, age) { this.name = name; this.age = age; this.run = this.run } run() { return `${ this.name } is running, age is ${this.age}`; } sleep() { return `${ this.name } is sleeping, age is $.

2021-01-11 15:44:50 643

转载 Symbol实用场景

可以避免实例自定义的属性或方法覆盖原型上的属性或方法

2021-01-11 11:47:50 214

原创 JavaScript：原型链

一切皆对象对象是由函数创建的原生构造函数：Array,String,Boolean,Number,RegExp,Functionlet test = new Function("name","age","console.log(name,age)");test('zzz',19);//zzz,19一个函数能充当两个作用，函数也是对象（能调用），也能new，同时函数含有构造函数的功能（类函数）function User(){} let user = new User();User.p.

2021-01-07 10:00:37 90

原创箭头函数与普通函数的区别

JavaScript 箭头函数箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。函数function，函数，是一个可以被其他代码或其自身调用的代码片段，或者是一个指向该函数的变量。当函数被调用时，参数被作为输入传递给函数，并且函数可以返回输出。在 JavaScript 中，函数也是一个对象。函数名是作为函数声明或函数表达式的一部分声明的标识符。函数的作用.

2021-01-04 17:19:01 2335

原创 JavaScript表达式和运算符之：逻辑或赋值（||= ），逻辑空赋值（??=），逻辑与赋值（&&=），空值合并操作符（??），可选链式操作符（?.）

逻辑或赋值（||= ），逻辑空赋值（??=），逻辑与赋值（&&=），空值合并操作符（??），可选链式操作符（?.）

2021-01-04 11:13:22 1528 6

原创 TypeScript常用数据类型（包含字符串，数组对象，函数，泛型等类型）

基本的TS类型用法和设置

2021-01-04 10:24:05 2217

原创 TypeScript处理对象中的额外属性（未定义的属性）

TypeScript中额外的属性检查报错信息如何解决？举例说明// 已知interface和createSquareinterface ObjType { name?: string; age?: number;}function createSquare(config: ObjType): {name?: string; age?: number} { return {name: config.name, age: config.age}}TypeScript会认为这段代码.

2020-12-31 17:04:04 11407

原创 TypeScript枚举的运用实例

原来的写法//0:未提交,1待复核,2:已通过,3:已驳回import { Tag } from "antd";import React from "react";//0:未提交,1待复核,2:已通过,3:已驳回export default ({status}) => { switch ( status ) { case 0: return <Tag color="#108ee9">未提交</Tag>; case 1: .

2020-12-31 16:27:28 619 1

原创 React实现列表点击某一项高亮显示的实现2种思路和demo，其他语言也类似思想

实现1：选中列表的某行高亮显示，之前我的实现思路是list[index].checked = ‘高亮’实现2：设置selectKey,选中某行，就将 selectKey = index，再在渲染的列表判断item.index === selectKey 如果相等，就高亮，否则就无效果思路一、设置checkedimport React from "react";class Test extends React.Component { state = { list: [{id: 11.

2020-12-24 15:14:58 2956

原创基于ant.design的FormList，通过配置生成动态列表

目前只配置了输入框和文本框，需要的可自定义添加type实现效果如图const initValues = [ {type:'input',name:'start',label:'最小值',initValue:'',}, {type:'input',name:'end',label:'最大值',initValue:'',}, {type:'text',name:'unit',label:'采购单位',initValue:'盒',rules:[]}, {type:'input',name

2020-12-08 09:28:57 4283 2

原创 react hooks 中useCallback的作用，实例讲解

useCallback如何起作用？实例讲解import React, { useState, useCallback, useEffect } from 'react';const set = new Set();export default function Parent() { const [count, setCount] = useState(1); const [val, setVal] = useState(''); const callback = useCallbac

2020-12-03 17:03:08 1239 3

原创禁用chrome控制台

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-

2020-11-26 09:26:52 2793

原创打印功能-打印预览，打印部分页面

window.print()默认打印整个页面，可是我只想打印页面的部分样式，最简单的一种方法是使用 css 的媒体查询有针对打印的样式，用@media print设置打印时除了要打印的内容，其它全部隐藏即可<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

2020-11-17 16:48:04 337

原创 componentDidMount，componentWillUnmount在react hooks中如何使用？

实例 componentDidMount() { this.refreshData(); window.addEventListener('scroll', this.handleScroll); } componentWillUnmount() { window.removeEventListener('scroll', this.handleScroll, false); }分别相当于 useEffect(()=>{ refreshDa.

2020-11-11 15:04:30 5453

原创 qiankun-前端微服务父项目与子项目的配置

前提，用umi建立两个项目，参考链接一、父项目1.package.json// yarn add @umijs/plugin-qiankun -D "devDependencies": { "@umijs/plugin-qiankun": "^2.7.0"}2.config.tsimport { defineConfig } from 'umi';export default defineConfig({ define: { 'process.env.apiUrl

2020-08-18 10:54:32 2555

原创 ant design页面切换动画

我想实现登录页面，页面之间切换，有动画效果实现代码// duration number 450 动画时间 ,// 当duration为数组是，Array[inTime,outTime]，第一个参数表示显示动画过渡时间，第二个表示消失动画过渡时间，当我设置为[450,0]时，实现了无缝切换 <Button onClick={()=>{this.setState({page:'youName'})}}>点击切换</Button> <Queue

2020-08-06 15:34:44 2411

原创 react（ant.design）项目加载三方验证码TCaptcha.js的Demo

import React, { useState } from 'react';import Script from 'react-load-script';import { message } from "antd";const DynamicScriptExample: React.FC<{}>=()=> { const [scriptLoaded,setScriptLoaded] = useState(false); const handleScriptError

2020-07-24 10:07:56 2478

原创用umi搭建项目微服务-qiankun微服务的配置

一、父项目的搭建// 1.新建项目yarn create @umijs/umi-app// 2.下载依赖yarn// 3.在packjson的devDependencies中添加qiankun依赖yarn add @umijs/plugin-qiankun --dev // 或 npm install @umijs/plugin-qiankun --save4.main/.umirc.ts中配置Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件

2020-07-23 09:26:09 5997 7

原创 antd的form表单的输入框设置不能输入空格（以电话输入框为例）

概况实现效果：当复制粘贴电话号码到输入框时,难免不小心复制一些莫名的字符到输入框，但是输入框不能识别，以下面这个str为例解决办法：getValueFromEvent问题let str = "135 3898 8889‬‬"这个str的长度是电话号码，应该是11位+2个空格，共13位。但是不知为啥，我删除了2个空格就是校验不成功，如下图分析经过分析发现，这个字符串长度是14，因为该字符串最后一位是一个未知字符。导致校验不成功解决办法（getValueFromEven..

2020-07-18 11:03:30 5680

原创 react hook - useEffect详解

1、不传递useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。2、传递空数组3、传递count4、传递props的对象传递的useState返回的setter//1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行

2020-07-15 15:59:54 7174 1

原创父组件异步传递的props，子组件更新显示

父组件import React from "react";import Component from './components/useEffect'class Test extends React.Component { state = { count:1 } changeNumber =()=>{ let {count} = this.state; count++; this.setState({ count }) .

2020-07-15 15:28:31 1181

原创控制台报错：如何在组件销毁的时候将异步请求撤销

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.当我们点击组件A后，组件A需要3秒的时间才能获取

2020-07-10 15:08:37 990

react源码-简易的demo-通俗易懂

空空如也