- 博客(62)
- 收藏
- 关注
RSS订阅转载 普通对象添加iterator
// 1.为对象添加Symbol.iterator属性const todos = { life: ['吃饭', '睡觉', '打豆豆'], learn: ['语文', '数学', '外语'], work: ['喝茶'], // 添加Symbol.iterator标识接口以及iterator实现 [Symbol.iterator]: function () { const all = [...this.life, ...this.learn, ...this.work] .
2021-02-26 14:44:58
378
转载 SSH 命令的三种代理功能（-L/-R/-D）
ssh 命令除了登陆外还有三种代理功能：正向代理（-L）：相当于 iptable 的 port forwarding 反向代理（-R）：相当于 frp 或者 ngrok socks5 代理（-D）：相当于 ss/ssr如要长期高效的服务，应使用对应的专用软件。如没法安装软件，比如当你处在限制环境下想要访问下某个不可达到的目标，或者某个临时需求，那么 ssh 就是你的兜底方案。正向代理：所谓“正向代理”就是在本地启动端口，把本地端口数据转发到远端。用法1：远程端口映射到其他机器.
2021-02-24 10:51:23
1209
转载 带宽、浏览器同域并发数、性能优化
带宽简介 “把城市交通道路比作网络，道路会出现单车道、双车道、四车道、八车道。你开着一辆车，在路上行驶，途径单车道、双车道、四车道、把车道，最后到达目的地。”上述场景中出现了几个关键词：城市交通： 网络 整个车道的宽度： 带宽 单车道、双车道、四车道、八车道： 带宽大小 你开的车子： 网络传输的信息而 带宽是用来传输信息的，信息肯定有一个具体的量值，我们称它为 数字信息流。 数字信息流的单位是 bit(比特)，时间单位是 s(秒)，所以描述 带宽的单位是 bit/s(比...
2021-01-19 11:24:04
592
原创 URLSearchParams
const { search } = this.props.location const paramsString = search.substring(1) const searchParams = new URLSearchParams(paramsString) const name = searchParams.get('name') const age = searchParams.get('age') console.log(name);...
2021-01-12 19:15:50
165
转载 react-router-dom下的BrowserRouter和HashRouter，页面刷新404
HashRouter包裹下访问根服务: 假设为localhost:3000/import { HashRouter as Router, Route, Redirect } from 'react-router-dom'; // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改import Home from './pages/Home/index';import Hooks from './p
2020-11-27 18:19:24
1124
转载 react 打包后，项目部署完毕，刷新页面报错（404）
原因解析：之所以你在浏览器内可以由首页跳转到其他路由地址，是因为这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并没有刷新网页访问后台，是JS动态更改了location。当你刷新时，你首先是访问的后台地址，然后返回的页面内加载了React代码，最后在浏览器内执行；也就是说如果这个时候报404，是因为你后台并没有针对这个路由给出返回HTML内容，也谈不上执行React Router了。解决方案一：如果你期望所有的路由都由React Router来定义，只有你的后台，无论
2020-11-27 18:07:22
5290
转载 webpack-proxy-重写set-cookie
module.exports = { // ... devServer: { proxy: { '/api': { // ... onProxyRes: function(proxyRes, req, res) { const cookies = proxyRes.headers['set-cookie'] const cookiePathRegex = /(p|P)ath=\/\w*;/ .
2020-09-01 16:34:00
860
转载 浏览器缓存
什么是浏览器缓存MDN 上是这样解释浏览器缓存的：A browser cache holds all documents downloaded via HTTP by the user ... without requiring an additional trip to the server.意思就是，浏览器缓存保存着用户通过HTTP获取的所有资源，再下一次请求时可以避免重复向服务器发出多余的请求。通俗的说，就是在你访问过一次某个网站之后，这个站点的文字、图片等所有资源都被下载到本..
2020-08-26 22:16:16
155
转载 写一个前端性能监控工具
用什么监控关于前端性能指标，W3C 定义了强大的 Performance API，其中又包括了 High Resolution Time 、 Frame Timing 、 Navigation Timing 、 Performance Timeline 、Resource Timing 、 User Timing 等诸多具体标准。本文主要涉及 Navigation Timing 以及 Resource Timing。截至到 2018 年中旬，各大主流浏览器均已完成了基础实现。...
2020-08-25 12:53:58
349
转载 Webpack
前言Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。WebPack和Grunt以及Gulp相比有什么特性其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的
2020-08-25 10:38:44
142
转载 CSS层叠上下文、层叠等级、层叠顺序、z-index
一个“片面”的理解以往，由于自己使用z-index的频率不大，所以对这个CSS属性存在比较片面的认识。一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序。z-index值越大在Z轴上就越靠上，也就是离屏幕观察者越近。最后才发现这个认识存在很大的问题：首先，z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。 判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，这个堆叠顺序
2020-08-24 23:01:49
447
转载 浏览器的回流与重绘 (Reflow & Repaint)
写在前面在讨论回流与重绘之前，我们要知道：浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时
2020-08-24 17:30:47
225
转载 JavaScript基础——深浅拷贝
前言说到深浅拷贝，必须先提到的是JavaScript的数据类型，之前的一篇文章JavaScript基础心法——数据类型说的很清楚了，这里就不多说了。需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。浅拷贝浅拷贝的意思就是只复制引用，而未复制真正的值。const originArray = [1,2,3,4,5];const originObj = {a:'a
2020-08-18 00:04:41
160
转载 Promise 必知必会（十道题）
Promise 想必大家都十分熟悉，想想就那么几个 api，可是你真的了解 Promise 吗？本文根据 Promise 的一些知识点总结了十道题，看看你能做对几道。以下 promise 均指代 Promise 实例，环境是 Node.js。题目一const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2)})promise.then(() =>
2020-08-17 10:50:38
410
转载 JavaScript基础——this
什么是this在传统面向对象的语言中，比如Java，this关键字用来表示当前对象本身，或当前对象的一个实例，通过this关键字可以获得当前对象的属性和调用方法。在JavaScript中，this似乎表现地略有不同，这也是让人“讨厌”的地方~ECMAScript规范中这样写：this 关键字执行为当前执行环境的 ThisBinding。MDN上这样写：In most cases, the value of this is determined by how a function
2020-08-12 14:19:49
124
转载 在数组的指定位置插入一个数组
问题：arr1 = ['a', 'b', 'c']arr2 = ['1', '2', '3']把数组arr2插入数组arr1的第二个元素b后面；思路：插入特定的位置，我们首先会想到splice，splice用法如下。index是索引，howmany是删除多少个元素，后面的item是插入的元素arrayObject.splice(index,howmany,item1,.....,itemX)直接splice(2, 0, arr2)，但是结果：['a', 'b', ...
2020-07-24 12:13:50
2854
转载 无限级递归树
const data = [ { "area_id": 5, "name": "广东省", "parent_id": 0, }, { "area_id": 6, "name": "广州市", "parent_id": 5, }, { "area_id": 7, "name": "深圳市", "parent_id": 5,.
2020-07-10 00:01:42
249
原创 react全局监听路由变化
关于WithRouter作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上介绍一个简单应用通过withRouter将三个属性传入组件的props上，路径变化，属性就会变化，属性变化，就会触发componentWillReciveProps这个钩子，我们可以利用这个钩子做一些处理，而要监听路由的变化，就要监听整个项目的路由，所以我们要找到最大的组件 最大的组件是App，但是他是函数式组件，所以我们找到下一
2020-07-02 13:26:05
11012
转载 react-router-dom实现全局路由登陆拦截
首先我们建一个文件routerMap.js用来存储所有的路由信息，定义需要登陆拦截的页面(auth)：//routerMap.jsimport Index from '../containers';import Detail from '../containers/detail';import Home from '../containers/home';import List from '../containers/list';import Topics from '../contain
2020-07-02 11:22:16
1445
转载 性能分析webpack-bundle-analyzer
webpack插件的github地址是：https://github.com/webpack-contrib/webpack-bundle-analyzer/我个人是直接执行 npm run dev 或者 npm run build 就可根据分析工具的配置进行查看package.json "dev": "cross-env webpack-dev-server --open --config ./webpack.config.dev.js --color" "build": "cro.
2020-06-11 16:31:38
2219
转载 屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
咱们从手机开始说起吧。先上一张图，给大家看看关于手机屏幕方面的一些参数。红框内的三个参数，大家一定都不陌生，我也不陌生。不过讲真的，就在不久前，我连手机的屏幕尺寸到底是怎么算出来的都不知道。下面我们开始慢慢讲。屏幕（主屏）尺寸是什么，怎么算？下面这张图是华为荣耀7的尺寸图，图上写的是5.2英寸。那么这个5.2英寸到底是怎么算出来的呢？在说这个问题之前，我们先进行一下单位的换算。我们平时是不用英寸这个单位的，我们用的是毫米，厘米，米这些单位。那么英寸和毫米，厘米之间怎样的换算关系呢？我也不知道，所
2020-06-01 12:12:21
721
原创 内存泄漏和内存溢出
内存泄露是申请的内存空间没有被正确释放，导致后续程序里这块内存被永远占用（不可达），而且指向这块内存空间的指针不再存在时，这块内存也就永远不可达了，内存空间就这么一点点被蚕食，借用别人的比喻就是：比如有10张纸，本来一人一张，画完自己擦了还回去，别人可以继续画，现在有个坏蛋要了纸不擦不还，然后还跑了找不到人了，如此就只剩下9张纸给别人用了，这样的人多起来后，最后大家一张纸都没有了内存溢出是指存储的数据超出了指定空间的大小，这时数据就会越界，举例来说，常见的溢出，是指在栈空间里，分配了超过数.
2020-05-15 13:13:44
240
转载 Referrer Policy
我们知道，在页面引入图片、JS 等资源，或者从一个页面跳到另一个页面，都会产生新的 HTTP 请求，浏览器一般都会给这些请求头加上表示来源的 Referrer 字段。Referrer 在分析用户来源时很有用，有着广泛的使用。但 URL 可能包含用户敏感信息，如果被第三方网站拿到很不安全（例如之前不少 Wap 站把用户 SESSION ID 放在 URL 中传递，第三方拿到 URL 就可以看到别人登...
2020-05-07 14:47:02
235
原创 Nginx简单配置
nginx_conf文件#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worke...
2020-03-19 15:25:35
141
原创 webpack环境变量配置
步骤一：运行跨平台设置和使用环境变量的脚本windows不支持NODE_ENV=development的设置方式当您使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。 （异常是Windows上的Bash，它使用本机Bash。）同样，Windows和POSIX命令如何使用环境变量也有区别。 使用POSIX，您可以使用：...
2020-03-14 00:33:24
2729
原创 antd+table+switch
一、{title:'状态',dataIndex:'is_enable',key:'is_enable',render:(text,record)=>{return<Switch...
2020-02-14 17:32:17
2654
原创 安装tnpm
npm i -g npminstall --registry=http://registry.npm.alibaba-inc.comnpminstall -g tnpm --registry=http://registry.npm.alibaba-inc.com
2020-02-10 16:01:26
20850
转载 JavaScript 高性能数组去重
一、测试模版数组去重是一个老生常谈的问题，网上流传着有各种各样的解法为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{ return index})let arr2 = Array.from(new Arra...
2019-12-27 11:52:29
104
原创 React Hook Forwarding Refs父组件调用子组件方法
const Father = () => { const NcRef = useRef() NcRef.current.changeVisible(false) //在这里调用了子组件的setVisible方法 return ( <div> <Child ref={NcRef} /> </div > )...
2019-11-26 18:04:46
2580
原创 Antd Table 整行样式
<Tablecolumns={item.columns.map((col,index)=>{return{...col,onHeaderCell:()=>{...
2019-11-26 13:24:13
2686
转载 Vue 不能检测到对象属性的添加或删除
1、划重点了：Vue 不能检测到对象属性的添加或删除官网——深入响应式原理（https://cn.vuejs.org/v2/guide...）中介绍到：受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让...
2019-11-21 17:44:31
499
转载 React.Fragment
React.Fragment官方文档：React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签：render() { return ( <> <ChildA /> <ChildB /> ...
2019-11-12 14:58:25
256
转载 TypeScript---- 类型断言
类型断言有两种形式。 其一是“尖括号”语法：let someValue: any = "this is a string";let strLength: number = (<string>someValue).length;另一个为as语法：let someValue: any = "this is a string";let strLength: num...
2019-11-06 11:49:33
425
转载 TypeScript 数据类型——枚举 (Enum)
如 TypeScript 官方文档所说，枚举类型是对 JavaScript 标准数据类型集的扩充。对于熟悉 C# 的开发者来说，枚举类型并不陌生，它能够给一系列数值集合提供友好的名称，也就是说枚举表示的是一个命名元素的集合，因而它能够使您的程序避免因硬编码的值而显杂乱且难以维护。今天，我们将围绕枚举类型展开以下几个内容：枚举基础 背后的 JavaScript 及其可扩充性 常量枚举 ...
2019-11-05 17:18:05
6591
1
转载 CommonJS，AMD，CMD和ES6的模块
在JavaScript中，模块是把实现某个特定功能的代码放在一起并包装，实现解耦和复用。在ES6之前，ECMA Script并不包含模块的概念，自然也没有模块语法，但的确有一些通用的模式来创建模块，比较流行的就是CommonJS，AMD以及CMD。在ES6中，引入了模块的语法。本文讲按照时间顺序，依次介绍上述几种模块。最早的模块模式在没有CommonJS、AMD之前，开发者也会想一些办法...
2019-09-25 15:16:48
120
转载 ECharts实现折线图颜色分段及垂直X轴的markline标注
注：案列展示地址https://gallery.echartsjs.com/editor.html?c=xBkYIDiWWl&v=1一、预期效果可以根据传递的参数的不同生成相应的折线图分段二、技术要点1、需要根据传参分割原有折线图的数据，用于生成不同的series子元素，便于后面的折线图分段展现。2、折线图平行于y轴的markline实现并不友好，对于高度最高是在初...
2019-08-16 17:36:33
6643
转载 react 中通过ref获取高阶（HOC）子组件实例的解决方案
今天写react项目遇到一个父子组件通信的问题。这是一个非常常规的问题了，随便搜一下就能得到解决方案。总体来说可以分为两类：子组件需要获取父组件的信息，这通过props就可以解决； 父组件需要知道子组件的信息，这可以通过ref解决。我们这里讲的属于后者，但是又有些特殊，特殊就在于子组件是个高阶组件，比如使用@connect @withRouter包裹过的组件（其实大部分组件都会被这两...
2019-08-16 09:12:04
1752
转载 ajax请求失败的状态码都是0
前言今天遇到个奇怪的问题，使用JQuery的ajax请求，后台的Controller层也接收到请求了，一切处理很正常，但是很奇怪，浏览器Debug发现，responseText是”error”，状态码是0.请求源码如下：$.ajax({ type: "POST", url: targetUrl, cache: fa...
2019-07-17 11:47:05
1051
原创 Antd合并
let group_row_span = [];let x = '';let count = 0;let start_index = 0;for (let index = 0; index < data.group.length; index++) { const ele = data.group[index].exec_target; if (in...
2019-05-24 11:52:55
283
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人