todayoncemore的博客

2021-06-30

todayoncemore — Tue, 13 Jul 2021 17:01:04 +0800

axios拦截器配置导致post请求数据格式跟预期不一样 vue响应式更新

最长无重复子数组

todayoncemore — Fri, 11 Jun 2021 14:00:23 +0800

求解最长无重复子数组，而不是最长无重复子数组的长度 function maxSubArr(arr) { let max = 0 let index = 0 let queue = [] for (let i = 0; i < arr.length; i++) { let ele = arr[i] while (queue.find(item => item.value === ele)) { queue.sh

2021-06-04

todayoncemore — Fri, 04 Jun 2021 16:30:58 +0800

// 把一段代码文本中的驼峰写法转成下划线写法 // （如："var oneVar = getOneVar(CONST)" 转成 "var one_var = get_one_var(CONST)" ） function replace(str) { return str.replace(/([a-z])([A-Z])/g, ($0, $1, $2) => { return $1 + '_' + $2.toLowerCase() }) } console.log(re

反转链表JavaScript版本

todayoncemore — Fri, 04 Jun 2021 16:27:09 +0800

参考该博客用JavaScript实现 function ListNode(x) { this.val = x; this.next = null; } function ReverseList(pHead) { let pre = null let next = null while(pHead.next){ next = pHead.next pHead.next = pre pre = pHead

自定义call, apply，bind

todayoncemore — Sun, 30 May 2021 19:19:06 +0800

参考自己实现call,apply,bind 但是这篇博文实现bind的逻辑还是有问题的而且，bind传参应该有两种形式，所以我的实现方式如下： Function.prototype.myBind = function (context) { fn = this || window let args = [...arguments].slice(1) console.log(args) if ([...arguments].slice(1).length) {

react router嵌套路由注意事项

todayoncemore — Wed, 26 May 2021 13:45:16 +0800

如上图所示，如果Entry组件里边写了嵌套路由，那么不要写exact，否则嵌套路由不生效，path不能是"/"，否则会报错

cross-fetch要正确设置headers

todayoncemore — Mon, 17 May 2021 20:21:28 +0800

今天给create-react-app设置了proxy，然后在登录页面call API登录，从Network看username和password是传给后端API了的，但是后端API就是接收不到参数排查好久，才发现，原来使用cross-fetch call API一定要正确设置headers ...

Flex布局

todayoncemore — Mon, 17 May 2021 18:46:25 +0800

import React, { useState } from 'react' export default () => { const childArr = ['red', 'green', 'orange', 'purple'] const flexDirectionArr = ['row', 'row-reverse', 'column', 'column-reverse'] const alignItemsArr = ['stretch', 'flex-start', 'flex

webpack性能优化

todayoncemore — Sat, 15 May 2021 19:43:03 +0800

Tree Shaking 代码分离（Code Splitting）入口起点防止重复动态导入缓存输出文件名提取引导模板模块标志符

webpack动态导入

todayoncemore — Sat, 15 May 2021 14:54:12 +0800

按照webpack官网教程尝试动态导入lodash发现不起作用检查webpack配置文件，发现是因为：将lodash配置为外部依赖了，注释掉externals之后重启项目就好了。所以动态导入的模块不可以是外部依赖如下所示，点击click按钮会执行print方法，这个时候浏览器会请求lodash模块并动态导入进来，从Network可以看出来lodash是单独打包并延迟加载的顺便提一句，react是原生支持import的，但是要用async, await需要安装 @babel/plugin-tr.

Webpack实现React Lazy Loading

todayoncemore — Sat, 15 May 2021 12:47:24 +0800

请参考react router Code Splitting

JavaScript里边的call, apply, bind

todayoncemore — Thu, 13 May 2021 17:56:47 +0800

call, apply都是改变函数上下文之后立即执行不同的是，call多个参数依次传递，用逗号分隔；apply多个参数用一个数组传递 bind改变函数上下文不会立即执行，需要手动调用，传参数的方式跟call一样，但是可以在bind的时候传参，也可以在调用的时候传参 let tom = { name: 'tom' } function greet(age, address) { console.log(`I am ${this.name}, I am ${age} years old,.

能否完美地拼成矩形

todayoncemore — Wed, 12 May 2021 13:12:04 +0800

function isPerfectRectangle(matrix) { if (!matrix.length || !matrix[0].length) { return false } let left = Infinity let right = -Infinity let top = -Infinity let bottom = Infinity let area = 0 let set = new Set()

求两个字符串的最长公共子串

todayoncemore — Tue, 11 May 2021 21:33:27 +0800

求两个字符串的最长公共子串 function LCS(str1, str2) { let arr = [] for (let i = 0; i < str1.length; i++) { arr.push([]) for (let j = 0; j < str2.length; j++) { if (str2[j] === str1[i]) { if (i && j &