csu_zipple-优快云博客

原创 http-proxy-middleware onProxyRes中文数据乱码的解决方案

onProxyRes相关代码：option.onProxyRes = function (proxyRes: any, req: any, res: any) { // 参考：https://www.jianshu.com/p/f8ac6e813b96 const oriWriteHead = res.writeHead; const oriWrite = res.write; const oriEnd = res.end;

2020-05-09 14:19:30 3298 2

原创 Webpack和Koa2代理WebSocket

相关运行环境：mac os: 10.14.5 (18F132)chrome： 81.0.4044.122Node：v10.16.1npm: v6.14.4Webpack-dev-server: v3.9.0http-proxy-middleware: 1.0.3Koa2-connect: 1.0.2koa: 2.7.0webpack代理webpack-dev-s...

2020-05-07 10:06:12 1092

原创封装WebSocket

功能一般来说，WebSocket应该具有以下功能：断线重连单例模式发布订阅超时提示心跳保活错误处理源码源码使用ts编写：/** * @file websocket链接相关 * @author zoubo01<zoubo01@baidu.com> */interface SubscribeList { [index: string]: Funct...

2020-04-28 16:20:08 1530

原创 Vue使用自定义指令实现拖拽行为

需求通过自定义指令的方式实现拖拽效果，预期的使用方式为： <div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div>更重要的一个需求点：拖拽元素内部的子元素可以自行阻止拖拽行为比如： <div ...

2020-04-23 15:56:37 1131

原创 Not implemented: navigation (except hash changes)

error在进行jest单元测试的时候，报了这样的错误。解决办法在给location重定义之前删除原有属性即可：delete window.location;Object.defineProperty(window, 'location', { value: { href: url, hash: '' }});...

2020-04-20 14:12:45 5238

原创 ElTable实现空单元格自动填充占位符

ElTable实现空单元格自动填充占位符‘–’根据前端开发规范及UE建议，考虑给表单的空单元格插入占位符‘–’，一开始的想法很简单，在el-table-column中渲染时对传入的data进行判断即可，相关代码如下：<el-table-column label="按键" width="100px"> <span class="c-one-line did-desc-t...

2020-04-09 19:55:38 8180

原创元素移动后鼠标hover效果不消失的问题解决方案分析

问题描述MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) OS: 10.14.5 (18F132)Chrome: 79.0.3945.88<div class="hover"> test</div>.hover:hover { color: blue;}鼠标移动在该div元素上，点击后通过...

2020-01-14 17:15:42 7367

原创在lerna中使用npm link时未发布的package报404

如何在lerna中调试包含私有包依赖的package项目结构.├── README.md├── lerna.json├── package.json└── packages ├── module-a │ ├── README.md │ ├── bin │ ├── node_modules │ ├── package-lock.js...

2019-11-13 10:24:46 3740 1

原创 vue-clipboard2在vue的created生命周期中直接调用copyText方法报错的原因分析

vue-clipboard2在vue的created生命周期中直接调用copyText方法报错先说现象：在created生命周期中会进入reject状态（被catch到），不在生命周期的方法中调用而通过click事件来调用会正常进入resolved状态（成功进入then阶段）。下面进行相关源码分析：出错代码：created() { this.$copyText('asdasdasd...

2019-11-07 14:52:13 5345

原创 Object.fromEntries不兼容低版本浏览器

fromEntries是es10提出来的方法polyfill和babel都不转换这个方法，所以…

2019-11-07 09:44:55 3218 3

原创 LeetCode - 94. 二叉树的中序遍历

/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @return {number[]} */var...

2019-11-06 22:12:24 203

原创 LeetCode - 58. 最后一个单词的长度

/** * @param {string} s * @return {number} */var lengthOfLastWord = function(s) { s = s.trim(); const len = s.length; let ret = 0; for (let i = len - 1; i >= 0; i--) { ...

2019-11-06 21:54:53 181

原创 LeetCode - 6. Z 字形变换

暴力解法…/** * @param {string} s * @param {number} numRows * @return {string} */var convert = function(s, numRows) { let arr = []; for (let i = 0; i < numRows; i++) { arr.p...

2019-11-05 22:31:14 238

原创 vue-cli及create-react-app源码分析

vue-cli及create-react-app 工具调研vue-cli v3项目创建过程分析vue-cli的运行命令为vue create [projectName]在vue-cli项目v3分支中，找到package/@vue/cli/bin/vue.js，这个文件里定义了vue-cli的相关命令：program .command('create <app-name>')...

2019-11-05 20:16:56 855

原创利用node检查git commit的文件名是否规范

hooks利用git的hooks来触发文件名校验shell or node?how to check? rule?

2019-11-05 09:29:20 1108

原创 LeetCode - 122. 买卖股票的最佳时机 II

不知道都是些什么神仙，绞尽脑汁想了个O(n)出来…竟然只超过了2/3/** * @param {number[]} prices * @return {number} */var maxProfit = function(prices) { const len = prices.length; let profit = 0; let min = prices[0...

2019-11-04 22:19:53 165

原创 Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

最近同事在进行单测时报了这个超时错误，待测方法如下： fetchData(...args) { const requestParams = { //... }; return new Promise((resolve, reject) => { http.post('api', requestParams)...

2019-10-25 13:55:39 4370

原创 LeetCode - 219. 存在重复元素 II

只想到用双指针做，但是速度太慢了，不过明显两次循环时有部分操作可以跳过，但是不想做了。/** * @param {number[]} nums * @param {number} k * @return {boolean} */var containsNearbyDuplicate = function(nums, k) { while (k > 0) { ...

2019-10-24 22:52:07 2250

原创 299. 猜数字游戏

/** * @param {string} secret * @param {string} guess * @return {string} */var getHint = function(secret, guess) { const len = secret.length; let dict = {}; let bulls = []; let co...

2019-10-18 19:35:12 207 2

原创 TypeError: this[MODULE_TYPE] is not a function

在利用mini-css-extract-plugin插件抽取css时遇到这个错误解决方案https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73

2019-10-18 14:49:52 2364

原创 LeetCode - 19. 删除链表的倒数第N个节点

/**Definition for singly-linked list.function ListNode(val) {this.val = val;this.next = null;}//*@param {ListNode} head@param {number} n@return {ListNode}*/var removeNth...

2019-10-12 22:20:46 166

原创 dce和tree shaking

dce和tree shaking为了在弱网环境下降低网络延迟以获取更好的用户体验，我想这些关于如何降低代码体积的技术都是值得研究的。目前降低网络延迟的一个方法是降低js代码的体积，本文研究的就是在压缩代码之前的降低体积的方法——DCE以及Tree Shaking。其实Tree Shaking也可以说是DCE的另一种思路的实现方式。常规dcedce 即 dead code eliminatio...

2019-10-11 10:48:34 353

原创 MarkDown: TODO LIST的写法

以前写todo List都是用有序列表或者无序列表，没办法直观的看到事情的完成程度，markdown提供了一种todolist的写法（偶然间在Vue3的README.md中看到的????）记得找个女朋友天凉了，记得加衣喔今日份单词打卡了解tree shaking和dce1. - [ ] 记得找个女朋友2. 天凉了，记得加衣喔 1. - [x] 今...

2019-10-11 09:48:59 33648 5

原创 let和const定义的变量到底存在哪？

let和const定义的变量到底存在哪？我们知道let和const定义的变量在window上是直接获取不到的，那么这个变量会存放在哪个对象中呢？在chrome中打开控制台调试会发现变量作用域Scope中有两个对象，一个是Script一个是Global。let和const定义的变量存在与Script作用域中，var定义的变量存在与Global中（即window）。参考链接https:/...

2019-10-09 10:41:15 2318

原创 Webpack打包css到js中css样式不起效果

今天通过修改webpack的moudle.rules属性来将css打包到js中，其实就是去除了MiniCssExtractPlugin.loader。这样能够实现打包效果，但却在项目中引用时发现css无法加载到dom上。通过分析打包后的js文件，可以发现css代码都是被exports.push到exports变量中了。exports.push([module.i, "/* left-menu...

2019-10-09 10:02:46 3301

原创 webpack项目中样式中的~和script中的@在项目中的区别

样式中的~和script中的@在项目中的区别在项目的单组件文件中经常可以看到这两种模块引入方式：import LogoSvg from '@src/components/svg-icon/LogoSvg';@import "~@src/css/variables.less";可以发现两者有些许不同：在less中前面加了一个波浪号，而在script中没有。那么两者的区别在哪里呢？web...

2019-10-09 10:02:01 354

原创 require.context是什么

前言最近在工作中发现项目开始用require.context来管理项目的模块结构了，比较好奇require.context到底是什么，有什么作用。作用通过正则遍历文件夹获取文件的上下文，可以很方便的帮助项目批量（自动）导入相关配置。用法require.context接收三个参数：开始的目录路径，是否遍历子目录，正则返回一个函数包含三个参数：resolve，keys，idThe ex...

2019-09-26 18:31:33 645

原创为什么CSS选择器解析是从右往左匹配？

在平时的开发过程中，我知道CSS选择器是从右往左匹配的，但是不知道为什么是从右往左而不是从左往右。这里记录一下分析心得。我们知道dom树和css会合成为render树，这个操作实际上就是是需要将css附着到dom树上，因此需要根据选择器提供的信息对dom树进行遍历，才能将样式成功附着到对应的dom元素上。假如我们有这样一颗dom树： .main / ...

2019-09-26 18:30:42 3518

原创 border-radius:50%及超过50%的表现形式

border-radius:50%和100%的区别50%与100%表现一样是因为当临角两个弧半径之和超过临接边的长度时，浏览器会按照两个半径的比例缩小至刚好等于临接边的长度。比如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&gt...

2019-09-24 10:13:36 2911 1

原创 LeetCode - 739. 每日温度

暴力解法：/** * @param {number[]} T * @return {number[]} */var dailyTemperatures = function(T) { let ret = []; const len = T.length; for (let i = 0; i < len; i++) { for (let j ...

2019-09-20 23:49:58 189

原创 LeetCode - 485. 最大连续1的个数

按照连续和的做法做的:/** * @param {number[]} nums * @return {number} */var findMaxConsecutiveOnes = function(nums) { let ret = 0; let temp = 0; nums.forEach(it => { if(it) { ...

2019-09-20 23:38:46 145

原创 LeetCode - 1025. 除数博弈

这是一道数学题…多推导一下可以猜测偶数就赢~/** * @param {number} N * @return {boolean} */var divisorGame = function(N) { return N % 2 === 0;};

2019-09-19 22:12:37 163

原创 LeetCode - 283. 移动零

按照题目，很快写出来这样的代码：var moveZeroes = function(nums) { const len = nums.length; for (let i = len - 1; i >= 0; i--) { if (nums[i] === 0) { for (let j = i; j + 1 < len; j++...

2019-09-18 23:04:57 139

原创 LeetCode - 20. 有效的括号

利用栈来存储遍历的结果，每次将栈顶元素与当前元素进行匹配。判断是否能够组成括号，不能就push进去，能就将栈顶元素pop出来。/** * @param {string} s * @return {boolean} */var isValid = function(s) { const len = s.length; let ret = []; for (let ...

2019-09-18 22:11:56 144 1

原创 ES7中的decorator的用法及原理

最近在工作中用到了装饰器，部分代码片段如下：const {invokeComp} = decorators;@invokeComp('@pns-title-tab')class BindingList extends ListPage { // code}用到了@这样的装饰器。我习惯把它称为注解，不过貌似装饰器这样的说法更为准确。Decorator 的写法与 Java 里的...

2019-09-17 19:39:33 531

原创 LeetCode - 5. 最长回文子串

根据自己的理解用双指针做的，速度很慢：/** * @param {string} s * @return {string} */var longestPalindrome = function(s) { const len = s.length; let ret = ''; for (let start = 0; start < len; start++)...

2019-09-16 23:02:17 159

原创 San+Moment: Uncaught TypeError: Cannot read property 'call' of undefined

Uncaught TypeError: Cannot read property 'call' of undefined at NumberListPartial.<anonymous> (moment.min.js:1) at re.fire (moment.min.js:1) at re.set (moment.min.js:1) at moment...

2019-09-11 19:31:01 410

原创 LeetCode - 121. 买卖股票的最佳时机

双指针，一个从前往后，一个从后往前。/** * @param {number[]} prices * @return {number} */var maxProfit = function(prices) { const len = prices.length - 1; let ret = 0; for (let start = 0; start <= l...

2019-09-10 23:03:37 165

原创 LeetCode - 16. 最接近的三数之和

按照三数之和的思路做，结果速度和内存都这么慢…/** * @param {number[]} nums * @param {number} target * @return {number} */var threeSumClosest = function(nums, target) { nums = nums.sort((a, b) => a - b); co...

2019-09-10 22:31:40 158