- 博客(48)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 前端并发请求数量控制
class RequestLimit { constructor(options) { this.unRequsetFn = []; this.limit = options.limit || 2; this.requestCount = 0; } async request(fn) { if (this.requestCount >= this.limit) ...
2021-04-13 12:24:34
1954
原创 js 树形结构过滤保持结构
项目中有个要求根据数据的role字段是否包含在数组中进行筛选数据const permissions = ['admin','system']const treeData = [ { key:"1", name:"aaa", role:"admin", children:[ { key:"1-1", name:"1-1" role:"system", }, { key:"1-2", name:"1-2" role:"sy
2021-01-05 17:30:31
1375
2
原创 Webstorm好用的插件推荐
activate-power-mode狂拽炫酷吊炸天装逼的插件，atom 上的神器啊,抱着试一试的心态一搜,webstorm 上居然也有了,安装之后可以在 window -> activate-power-mode 中关闭震动以及开启彩色模式。TabNine可以记录用户习惯自动补全代码，牛逼ESLint代码检查插件Rainbow Brackets彩虹色的括号，颜......
2019-10-09 11:46:47
19083
4
原创 vue element-ui 时间段选择限制
有个需求就是需要选择一段时间（10天内） 起始时间不能超过当前时间，最多选择10天代码如下：data(){ return { startDate: Date.now(), startSelectableRange: "00:00:00 - 23:59:59", endSelectableRange: "00:00:00 - 23:59:59", }}<el-date-picker @change="startTimeChange" v-model="formData.st
2022-05-26 17:54:00
687
原创 react 组件异步加载
话不多说 直接上代码import React, {Component} from "react";import {Modal} from "antd";const AsyncComponent = loadComponent => ( class AsyncComponent extends Component { state = { Component: null } componentDidMount() { const me = this; if(th
2022-03-22 09:27:43
1829
原创 ag-grid 表格数据更新
setRowData：更新全部数据// 直接调用接口设置表格数据gridOptions.api.setRowData([{id:1,name:"xiaoming",age:12},{id:2,name:"xiaohong",age:13}])setData：更新行数据// 根据ID获得行数据const rowNode = gridOptions.api.getRowNode("id");rowNode.setRowData({{id:1,name:"xiaomingdd",age:14}})
2022-03-17 15:44:20
762
原创 下载文件 需要header携带token
function download(method, url) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.responseType = 'blob'; xhr.onload = function () { const fileName = xhr.getResponseHeader("Content-Disposition").split(";")[1].split("filename=")[1] saveAs(x
2021-09-02 12:14:12
1093
1
原创 逻辑赋值(Logical Assignment)
假设您需要先判断是否为空，再为变量分配数值，那么如下代码便展示了这样的基本逻辑：if (x === null || x == undefined) { x = y }如果您熟悉上面提到的短路计算的工作原理，则可能会使用null-ish合并运算符(coalescing operator)，将上述三行代码替换为如下更简洁的版本。x ?? (x = y) // x = y if x is nullish, else no effect由上述代码可知，如果x为null-ish的话，我们可以使
2021-05-14 11:14:11
932
原创 空值合并(Null-ish Coalescing)
在引入空值合并运算符之前，在输入为空的情况下，JavaScript开发人员需要使用OR运算符–||，以回退到默认值。这就会导致：即使出现合法的、但属于虚假值(falsy values)，也会被回退到默认值的情况。function print(val) { return val || 'Missing' } print(undefined) // 'Missing' print(null) // 'Missing' print(0) // 'Missi
2021-05-14 11:13:32
247
原创 async和await
众所周知，异步性是JavaScript的一项强大功能。许多可能长时间运行、或较为耗时的函数，能够返回Promise，而不会被阻止运行。const url = 'https://the-one-api.dev/v2/book' let prom = fetch(url) prom // Promise {<pending>} // wait a bit prom // Promise {<fullfilled>: Response}, if no errors //
2021-05-14 11:12:53
72
原创 已命名捕获组
已命名捕获组(Named Capture Groups)let re = /(\d{4})-(\d{2})-(\d{2})/ let result = re.exec('Pi day this year falls on 2021-03-14!') result[0] // '2020-03-14', the complete match result[1] // '2020', the first capture group result[2] // '03', the second ca
2021-05-14 11:10:34
95
原创 react 路由缓存
有需求需要切换路由后回到之前的页面保持之前的搜索条件，内容等，所有要用到路由缓存，由于react的机制问题无法实现这中需求，所以找到下面这些辅助实现这种功能React Activation原文文档 ： https://github.com/CJY0208/react-activation/blob/master/README_CN.mdreact-router-cache-route原文文档：https://github.com/CJY0208/react-router-cache-route/bl
2021-03-26 19:24:36
1367
原创 值得推荐的 8 个 React 库
作为一名开发人员，知道哪些库可以用来助你一臂之力是非常重要的。由于 React 生态系统变化得如此之快，跟进发生的一切事情是非常困难的。每天都会冒出新的库。你很有可能会错过一些非常棒的库。这就是为什么我要撰写本文，想将这些 React 库介绍给你。希望这些库能为你做一些繁重的工作，让你的生活更轻松一点！1. React Lazyload当大多数开发人员想到懒加载时，他们通常想到图片。懒加载可以显著提高你的应用程序的性能。React Lazyload 库不仅在懒加载图片方面做的很好，而且在任何影响性.
2021-03-24 18:11:58
402
原创 Ag-Grid使用手记
修改列属性需要先获取到所有列属性， 直接修改其中要修改的属性，并重新设置全部的列属性 groupChange = (checked) => { const {gridApi} = this.state let columnsDef = columns columnsDef.forEach(colDef => { if (colDef.hasOwnProperty("rowGroup")) colDef.rowGroup = check
2021-03-15 13:29:52
1723
原创 滚动条自动滚动到底部
const eleList = document.getElementsByClassName("tab-pane") Array.prototype.forEach.call(eleList, function (ele) { ele.scrollTop = ele.scrollHeight });
2021-03-12 23:35:15
397
原创 常用的正则表达式
// 将回车以逗号分隔string.replace(/\r\n/g, ',').replace(/\r/g, ',').replace(/\n/g, ',').replace(/,{2,}/g, ',')
2021-02-19 13:09:16
194
原创 Antd Form字段正则验证
<FormItem label="IP段" name="ip_segment" {...conmentLayout} rules={[ { required: true, message: '请输入!' }, { pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]).
2021-01-05 17:12:55
1105
原创 Antd Tabs标签页动态加载子组件，会多次渲染的问题
开始我是这样做的<Tabs hideAdd onChange={this.onChange} activeKey={activeKey} type="editable-card" onEdit={this.onEdit} style={{width: "100%"}}> {TabsTitles.map(pane => ( <TabPane tab={pane.title} key={pane.key}>
2020-12-10 01:35:33
5043
原创 一些文档地址
create-react-app 中文文档地址https://www.html.cn/create-react-app/docs/getting-started/ng-grid react版本地址https://www.ag-grid.com/react-grid/
2020-12-09 14:38:59
110
原创 VUE +ElementUI form表单回车提交
只需要在el-form这里添加事件就行了<el-form @key.enter.native="submitForm"> ... ...</el-form>
2019-12-27 11:19:36
2693
原创 create-react-app之antd按需加载样式配置不生效
用create-react-app 创建一个项目后，由于要用到 Antd 想要按需加载，安装官网文档介绍，下载 babel-plugin-import 插件后然后在项目根目录 添加 .babelrc 文件// .babelrc{ "plugins": [ ["import", { "libraryName": "antd", "libraryDi...
2019-11-28 10:38:33
1594
原创 React 脚手架安装项目支持 sass
方法1：create-react-app 安装一个项目yarn add node-sass 安装sass依赖，脚手架本身是配置好了sass的，sass-loader 都有，就是缺少前置依赖 node-sass因为这个项目本身是用yarn安装的,以后如果需要添加其他模块，尽量用yarn安装，如果习惯 npm 请参照第3种方法现在可以快乐的使用 sass 了方法2：cr...
2019-11-27 11:29:23
838
原创 VUE 之 slot 的使用
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot>元素作为承载分发内容的出口。匿名插槽匿名插槽也就是不带name属性的<slot></slot>也叫单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽，不允许有多个。父组件代码如下：// 父组件&...
2019-11-26 11:33:42
202
原创 React 之 Hooks 的使用
Hooks 是React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。// 这个是 Hooks的写法import React, { useState } from 'react';function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setC...
2019-11-21 17:56:41
240
原创 React几个很好用的一些工具
React 开发DvaJS ，它是处理数据流的一个 react 应用框架，在开发 React时有不理解State，view，Action，connect，dispatch 的必看这个UmiJS ，它是一个企业级 react 应用框架，里面有现成区块（区块是快速搭建页面的代码片段）Taro（一次编写，多端运行）官方文档，Taro 是一套遵循 React 语法规范的 多端开发 解决...
2019-11-15 17:58:14
451
原创 前端性能优化
一、 网络层面优化减少http请求，合并资源（js、css、img）减少资源体积，压缩资源（js、css、img）大量数据加载或大量图片加载时使用懒加载或预加载优化使用按需加载，加快首屏渲染速度利用http缓存机制，对资源进行缓存网站用到很多域名时，可使用DNS预解析，提前解析域名使用CDN给网站静态资源加速二、 js 层面优化尽量减少DOM操作，DOM操作尽量做到批量更新...
2019-11-15 17:49:46
82
原创 只会用console.log吗？关于console 的一些用法介绍
console这个我想各位前端大佬应该都不会陌生，一般大部分我想都会使用congsole.log，来打印出自己想看的数据，现在给大家介绍下 console 对象的其他用法，话不多说上代码，看图说话：1、 console.log 与 console.infoconsole.log 与 console.info 用法是一样的console.log("Hello World")console...
2019-11-15 17:26:00
522
原创 react-router Link跳转后不返回页面顶部的问题
遇到的问题由A页面跳转到B页面，B页面停留在A页面的位置，没有返回到顶部。问题分析首先分析下出现此问题的原因： 在项目中使用的是 hashHistory，它是建立在 history 之上的，当路由发生变化时会记住原路由的状态，跳转新页面后默认停留在原页面的位置。解决方法使用 withRouter；withRouter可以包装任何自定义组件，将react-router 的 histo...
2019-11-14 09:22:48
2281
原创 vue 国际化 vue-i18n
首先下载依赖包 vue-i18nnpm install vue-i18n -S创建语言包 en 英文，zh中文// zh.jsconst zh = { about: "关于", home: "首页"};export default zh;// en.jsconst en = { about: "About", home: "Home"};export ...
2019-11-06 09:41:15
181
原创 react-router详解
前言作为 React 全家桶的一员，如果我们想要开发一个 React 应用，那么 react-router 基本上是我们绕不过去的基础。基于此，对它的了解和使用也是必不可少的一步本文将重点介绍实际应用中常用的一些 API 以及实践过程中遇到的一些问题，目标很简单：会用基于 react-router v5.0.1，WEB 应用程序安装国际惯例，首先我们需要安装npm install ...
2019-10-29 10:39:35
329
原创 React-Native环境搭建
前言从零开始撸 React-native相信前端的小伙伴们对 react-native 都有着或多或少的了解。那么，当我们要开始一个 RN 项目的时候,应该怎么开始呢对了，搭建环境以下是我的搭建环境实践，分享给有需要的小伙伴，也是留一个笔记(基于 Windows 系统)如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过以下↓开始首先，我们需要知道都需要哪些东西N...
2019-10-29 10:34:53
138
转载 webpack发布策略
前言前一篇文章 Webapck基础搭建 我们了解了一下 Webpack 的基本配置,已经可以使用它简单的搭建一个打包环境。但是，Webpack 的功能不仅仅就这么简单，不然也不会成为前端最流行的模块化打包工具那么，它还有哪些我们需要了解的功能呢，下面，我们一点点去了解一下吧如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过好了，废话不多说，以下 ↓准备工作既然我们要使用...
2019-10-29 10:31:10
116
转载 webpack基础配置
前言虽然一直在接触 webpack ，不过都是在项目开发时遇到问题去看看文档，并没有系统化地学习、消化。这篇文章将从 webapck 最基本的配置开始说起，直到成功打包一个简单的项目。分享给需要入门的小伙伴，也是留一个笔记基于 webpack 4.x如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过好了，废话不多说，以下 ↓概念对于刚接触 webapck 的同学来说，可...
2019-10-29 10:30:05
93
原创 JS 数组的常用方法归纳
改变原数组的方法shift()：将第一个元素删除并且返回删除元素，空即为undefinedunshift()：向数组开头添加元素，并返回新的长度pop()：删除最后一个并返回删除的元素push()：向数组末尾添加元素，并返回新的长度reverse()：颠倒数组顺序sort()：对数组排序splice(startIndex,length,…item) 删，增，替换数组元素，返回被删除...
2019-10-28 15:41:34
311
原创 Webstrom 快捷键
1. 必备快捷键Ctrl+/：注释当前行Ctrl+Shift+/：当前位置插入注释Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的Ctrl+Shift+A：选择当前标签前后，修改标签用的F11：全屏Shift+F11：全屏免打扰模式，只编辑当前文件Alt+F3：选择所有相同的词Alt+.：闭合标签Alt+Shift+数字：分屏显示Alt+数字：切换打开第N个文...
2019-10-26 10:56:11
173
原创 react国际化 react-intl
首先 下载导入插件 react-intlnpm install react-intl@2 -S注意： 在这里说下，网上搜了很多都没说下载2.x版本的，现在下载的是3.x的版本,结果被这个版本坑了好久，各种报错，大家下载的时候注意了我是在路由页面开始的，用法跟redux差不多，需要用 IntlProvider 组件把根组件包裹起来// IndexLaout.jsimport {addL...
2019-10-24 15:25:12
402
原创 前端一些要会的知识点
前端开发中79条不可忽视的知识点汇总https://juejin.im/post/5d8989296fb9a06b1f147070夯实JavaScript功底，前端要会的手写方法https://juejin.im/post/5d26ebf36fb9a07eea329c41...
2019-10-17 11:41:17
123
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人