我也要用- 博客(390)
- 资源 (1)
- 论坛 (1)
- 收藏
- 关注
RSS订阅
原创 提高VUE性能优化的九种方式
1、函数形组件（functional）2、子组件拆分（利用组件内部运行，不影响其他外部组件）3、局部变量 （多赋值给局部变量，减少不断计算）4、用v-show，不用v-if（v-if操作dom结构，性能低）5、用keep-alive（缓存页面）6、用mixins（mixins引入的js后执行，延迟装载Defer）7、time slicing 分批处理（用requestAnimation...
2019-07-22 17:39:33
1356
原创 vue+element-自定义指令，防止重复提交及重复发送http请求；节流throttle与防抖debounce举例说明
方法一、控制标签全局directive的写法// 提交以后禁用按钮一段时间，防止重复提交import Vue from 'vue';Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-d...
2018-12-11 14:10:01
6475
1
原创 apply、call、bind区别、用法-如何改变this的指向，以及实用场景
经常在各种三方插件看到这几个，但是对其用法区分一直懵懵懂懂的，今天抽空做了个总结正常调用f1函数，this指向window改变this指向bind若想要f1里的this依旧指向window，可如下设置（如：vue中使用导入js代码，若想js中正常使用this,则必须通过以下方式中的任意一种改变this指向）apply、call、bind区别、用法都是用来改变函...
2018-04-24 11:13:38
265
原创 React.memo 减少React重新渲染
当父组件发生改变时，传递给子组件的props不变，子组件在相同 props 的情况下渲染相同的结果。那么子组件没必要重新渲染。通过React.memo可以提高性能import React, { useState } from 'react';function ChildComponent( props: any ) { console.log( 'child render' ); const { data: { num } } = props; return <div>
2021-04-07 16:07:54
9
原创 React Function实时获取输入框值：React Hook - useRef
修改输入框后，send，function 组件捕获渲染的值总是上一次send的值,如何解决这个问题export default function ProfilePage() { const [message, setMessage] = useState(''); const showMessage = () => { console.log('message: ' + message); //获取的永远是上一次send之前的值 点击前输入框的值 }; const hand
2021-04-07 10:07:29
14
原创 React-高阶组件的使用说明
概念高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。举例说明常用userInfo的数据全局共享i
2021-04-06 12:04:08
13
原创 ant design中的Form.List 如何支持dependencies
1、单个官网例子：打开2、多个Form.List<Form name="dynamic_form_nest_item" onFinish={ onFinish } autoComplete="off"> <Form.List name="users"> { ( fields, { add, remove } ) => ( <> { fields.map( ( field ) => ( <S
2021-04-01 15:38:22
17
原创 (React ant design Warning): dispatch: settings/changeSetting should not be prefixed with names
原因：在namespace为’settings’的js文件中调用dispatch，不需要加上settings前缀,解决办法：删除settings/即可import { Reducer, Subscription } from 'umi';const SettingModel= { namespace: 'settings', state: defaultSettings, reducers: { changeSetting(state = defaultSettings, { p
2021-03-03 14:26:47
39
1
原创 用ant.design实现一个form table，实现在table中输入和校验。并且获取table列表值
用ant.design实现一个table表格，实现输入和校验。能够实时获取form值实现效果如图代码如下ListTableForm.tsximport React, { useEffect, useState } from "react";import { Form, Table } from 'antd'import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";import styles f
2021-02-09 09:48:24
188
原创 umi ant.design 项目打包后@ant-design文件占据内存太大
现在遇到一个问题，npm run build后打包文件由30M，用npm run analyze "analyze": "cross-env ANALYZE=1 umi build",分析后发现是图标库占据内存的原因。
2021-02-04 17:22:20
99
原创 基于ant.design做一个可编辑的table表格，且实现可校验样式、增加、删除数据
主要利用Form.List的field进行拓展，结合table使用嵌套表单字段需要对 field 进行拓展，将 field.name 和 field.fieldKey 应用于控制字段。// 只贴关键代码const onFinish = (values)=>{ console.log(values) // 可以得到table}<Form initialValues={ {table:[{name:'lily'},{name:'lisa'}]} } onFinish={ onFi
2021-02-03 17:45:40
121
原创 代码整洁之道-多个if else代码的优化
1、利用对象let a=0,b=1;let result = '';if(a===1){ if(b===1){ result='a' } if(b===0){ result='b' }}if(a===0){ if(b===1){ result='c' } if(b===0){ result='d' }}优化为let obj = { 1: { 0: 'a', 1: 'b', }, '-1': {
2021-01-28 09:19:05
35
转载 执行上下文栈
函数多了，就有多个函数执行上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢？JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。从上面的流程图，我们需要记住几个关键点：JavaScript 执行在单线程上，所有的代码都是排队执行。一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行
2021-01-18 12:26:33
16
转载 Document - Web API 接口参考 | MDN
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像table,body这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。Document接口描述了任何类型的文档的通用属性与方法。根据不同的文档类型（例如HTML、XML、SVG，...），还能使用更多 API：使用"text/html"作为内容类型（content type）的 HTML 文档，还实...
2021-01-16 22:32:41
24
原创 常见查找dom元素的几种方式
document.getElementById只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的document.querySelector返回节点子树内与之相匹配的第一个 Element 节点。如果没有匹配的节点，则返回null。匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。查找第一个匹配 class属性的html元素这个例子中，会返回当前文
2021-01-16 21:48:23
169
原创 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
31
原创 内存管理
在使用垃圾回收的编程环境中，开发者通常无须关心内存管理。不过，JavaScript运行在一个内存管理与垃圾回收都很特殊的环境。分配给浏览器的内存通常比分配给桌面软件的要少很多，分配给移动浏览器的就更少了。这更多出于安全考虑而不是别的，就是为了避免运行大量JavaScript的网页耗尽系统内存而导致操作系统崩溃。这个内存限制不仅影响变量分配，也影响调用栈以及能够同时在一个线程中执行的语句数量。将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如.
2021-01-15 22:26:00
26
原创 js的执行环境与作用域
4、执行环境与作用域变量或函数的上下文决定了它们可以访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象（variable object），而这个上下文中定义的所有变量和函数都存在于这个对象上。全局上下文是最外层的上下文。在浏览器中，全局上下文就是我们常说的 window 对象，因此所有通过var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁
2021-01-15 21:48:26
8
原创 基本类型和引用类型作用域和内存
基本类型undefined,null,String,Number,Boolean和Symbol保存原始值的变量是按值（byvalue）访问的，因为我们操作的就是存储在变量中的实际值基本类型不能添加属性引用类型保存在内存中JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象，因此，引用类型的值是按引用访问的。引用类型能添加属性1、复制变量值基本类型var str = 'lisa';v
2021-01-15 21:33:46
15
原创 手写一个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
33
原创 深拷贝-序列化与反序列化的弊端
知识点：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
51
原创 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
17
原创 constructor、class、super之间的关系
我们在弄清楚关系之前，我们首先要清楚各自的概念.1、classclass是一种语法糖 类和模块的内部，默认就是严格模式 不存在变量提升 由于本质上，ES6 的类只是 ES5的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。2、constructorconstructor 是一种用于创建和初始化class创建的对象的特殊方法，class Polygon { constructor() { this.name = 'Polygon'; }}
2021-01-12 10:04:50
82
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
77
原创 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
20
原创 箭头函数与普通函数的区别
JavaScript 箭头函数箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。函数function，函数，是一个可以被其他代码或其自身调用的代码片段，或者是一个指向该函数的变量 。 当函数被调用时，参数被作为输入传递给函数，并且函数可以返回输出。在 JavaScript 中，函数也是一个对象。函数名是作为函数声明或函数表达式的一部分声明的标识符。函数的作用.
2021-01-04 17:19:01
69
原创 JavaScript表达式和运算符之：逻辑或赋值（||= ），逻辑空赋值（??=） ，逻辑与赋值（&&=），空值合并操作符（??），可选链式操作符（?.）
逻辑或赋值（||= ），逻辑空赋值（??=） ，逻辑与赋值（&&=），空值合并操作符（??），可选链式操作符（?.）
2021-01-04 11:13:22
106
4
原创 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
406
原创 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
76
原创 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
111
原创 基于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
491
原创 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
422
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
84
原创 打印功能-打印预览，打印部分页面
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
47
原创 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
716
原创 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
950
react源码-简易的demo-通俗易懂
2020-03-31
juan_taylor的留言板
发表于 2020-01-02 最后回复 2020-01-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝