前端杂事
csu_zipple
fe
展开
-
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 · 3140 阅读 · 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 · 1020 阅读 · 0 评论 -
封装WebSocket
功能一般来说,WebSocket应该具有以下功能:断线重连单例模式发布订阅超时提示心跳保活错误处理源码源码使用ts编写:/** * @file websocket链接相关 * @author zoubo01<zoubo01@baidu.com> */interface SubscribeList { [index: string]: Funct...原创 2020-04-28 16:20:08 · 1452 阅读 · 0 评论 -
Vue使用自定义指令实现拖拽行为
需求通过自定义指令的方式实现拖拽效果,预期的使用方式为: <div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div>更重要的一个需求点:拖拽元素内部的子元素可以自行阻止拖拽行为比如: <div ...原创 2020-04-23 15:56:37 · 1061 阅读 · 0 评论 -
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 · 5070 阅读 · 0 评论 -
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 · 7951 阅读 · 0 评论 -
元素移动后鼠标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 · 7102 阅读 · 0 评论 -
在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 · 3660 阅读 · 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 · 5278 阅读 · 0 评论 -
Object.fromEntries不兼容低版本浏览器
fromEntries是es10提出来的方法polyfill和babel都不转换这个方法,所以…原创 2019-11-07 09:44:55 · 3090 阅读 · 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 · 175 阅读 · 0 评论 -
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 · 149 阅读 · 0 评论 -
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 · 208 阅读 · 0 评论 -
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 · 802 阅读 · 0 评论 -
利用node检查git commit的文件名是否规范
hooks利用git的hooks来触发文件名校验shell or node?how to check? rule?原创 2019-11-05 09:29:20 · 1056 阅读 · 0 评论 -
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 · 127 阅读 · 0 评论 -
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 · 4275 阅读 · 0 评论 -
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 · 2209 阅读 · 0 评论 -
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 · 178 阅读 · 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 · 2305 阅读 · 0 评论 -
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 · 145 阅读 · 0 评论 -
web前端学习--仿QQ空间留言板功能
主要技术要点: css:利用position属性和margin属性实现基本布局。 jq/js:留言板功能使用prepend实现最新的留言在顶部显示。 其中易出错的地方已经在源代码中有注释了,欢迎大家批评指正。防QQ空间留言板功能html页面: 漠丶叹尘的空间 This is原创 2016-12-20 13:13:14 · 41891 阅读 · 4 评论 -
jquery+css实现自定义对话框功能(不使用插件)
当今网络上各种jquery对话框插件层出不穷,可是我为什么要放弃这些插件选择自己使用jquery和css来自定义对话框的呢?有两方面的原因,一个是有利于自己更加深入的了解css和jquery的特性,另一方面也可以更加的兼容自己的项目。这里面有几个关键性的技术点,但是我们先不着急讲解这些,各位先看看下面的效果吧,再来决定是否看下去。在后面我会给出自己在实现这两种对话框时遇到的问题,以及解决它们的办法原创 2017-04-21 20:53:45 · 26018 阅读 · 3 评论 -
React 组件间通信
在经历了许多的html+css+js的传统网页制作之后,最近开始上手react了。学了一点语法之后就开始了react的项目, 然而事情不总是一帆风顺的。刚上手的时候,项目的进度就是一团糟。各种迷之bug纷至沓来,在这里真的要提醒诸位,在写react es6语法的时候,html结构中的dom事件千万要注意大小写,比如html结构中的onclick事件,这个在html页面中是这样写的,然而在es6里面原创 2017-07-20 11:15:08 · 12853 阅读 · 2 评论 -
React 创建对话框组件
原生的前端体系创建一个对话框可是再简单不过了。但是如果放到组件化思想下的react体系中,想要制作一个属于自己的对话框还是有一定的麻烦的。主要遇到的问题有两个:一是如何在子组件中创建body下的对话框组件,二是如何删除这个组件。 接下来我们就一步一步解决这两个问题。 我们先写好dialog组件:(所有的样式都不写了,这里实现一个原型)class Dialog extends Component{原创 2017-07-21 15:24:10 · 16900 阅读 · 0 评论 -
React 通过children实现对话框页面跳转
概谈:父组件和children组件的通信方式在上一篇文章中我们实现了一个对话框组件,这次我们通过这个对话框进行页面跳转。 首先,我们对这个对话框组件做一下改进: appendMaskIntoDoc() { ReactDOM.unstable_renderSubtreeIntoContainer( this, <Dialog on原创 2017-07-25 00:29:58 · 1781 阅读 · 1 评论 -
React Error: Minified React error #119
Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional原创 2017-07-25 10:06:35 · 10304 阅读 · 2 评论 -
React 检测页面传值参数
出于一些考虑,这里我在页面跳转时并没有使用React-router框架,仅使用了传统方法实现了页面传值,并且在另一个页面用于检测传递过来的参数是否合法大体思路是这样的,在另一个页面采用一个统一的父组件。在这个组件的生命周期中使用特定的方法来判断,并且完成向子组件传递数据的功能: componentWillMount(){ let url = window.location.sear原创 2017-07-25 10:17:33 · 2145 阅读 · 0 评论 -
关于Foundation 对话框组件关闭后,页面自动滚动的解决办法
你永远也想不到bug会在什么时候出来咬你一口在使用Foundation框架的时候,突然遇到了一个现象:当使用多个button调用同一个id的reveal对话框时,对话框closed后会自动将页面调整到最后一个指向此id的button位置。 在这种情况下,长页面布局在调用对话框后,用户体验性就很差了。 框架不是用来制约人的,因此,遇到的bug总有解决的那一天。给button加上点击事件:原创 2017-09-24 01:35:25 · 312 阅读 · 0 评论 -
前端进阶,从Foundation UI框架开始
我不是第一个吃螃蟹的人最近这些年,前端很火。它火也不是没有道理,有很多东西在这里面。值得深挖。原生HTML也不再像我想的那样能一直生存下去。框架,自动化等工具的出现,像是一把催化剂加速了前端的发展。 不学习,你终究有淘汰的那天 Foundation能做什么还记得很多年前,有一个贵妇人问过法拉第:“先生,您发现的电磁感应有什么用呢?”法拉第这样回到:“女士,你知道刚生下来的孩子有什么用吗?”原创 2017-09-19 07:21:01 · 1701 阅读 · 0 评论 -
自定义封装Jquery ajax方法
jquery自带的ajax方法为什么要封装?在前后端分离或者需要大量使用ajax方法的情况下,一直使用Jquery自身封装的ajax方法是不太实用的,代码冗余量太大。 这里提供自定义的两种封装方法:/** * 使用ajax GET 提交前端数据 * @param url 接口路径 * @param obj 接口所需参数 * @param isAsync 是否接受异步 */functi原创 2017-09-27 20:43:30 · 2212 阅读 · 3 评论 -
js加密地址栏参数并且获解密的地址栏参数
前后端分离要注意的地方为了防止用户的误操作,或者其他的一些攻击手段,我们可以使用地址栏加密的方法来规避这一点(估计也就防防菜鸟,骗一下自己了TAT,谁让控制台那么智能呢,这里还是推荐使用服务器做好安全操作) 代码来了/** * 获取地址栏参数 * @param name 地址栏参数 * @returns {null} */function getQueryString(name){原创 2017-09-27 20:54:24 · 1907 阅读 · 0 评论 -
WebSocket,实现简单的广播功能
改变现在,从通讯开始传统的前端和后端的数据交互是使用轮询方法,会占用大量资源。在如今高速发展的时代,一种能提升效率的方法或者说新技术便显得尤为重要。 websocket便是这样一种技术,有关于它的更多的一些细节,大家可以自行百度。(本博客部分代码来源自网上,向前辈们致敬) 这里看一下广播的演示结果: 不写代码,终究是纸上谈兵(csdn不能把资源免费了!) websocket jar包下原创 2017-09-28 22:41:39 · 7924 阅读 · 3 评论 -
Jquery统计表单文件总大小
所有的代码总是有寿命的,尤其是前端使用struts2上传文件的时候后台设置了maxFileSize,为了用户体验,我们需要在前端判断待上传文件的大小。如果超出设置的最大值,我们简单alert一下,提醒用户重新上传。为此,一个新的技术问题出现了:如何使用js或者jq统计表单文件的大小? 在百度上搜索了许多方法,资料大都是比较久远的时代的代码。在自己机器上测试的时候却是经常性的行不通,控制台频繁报错原创 2017-10-12 19:51:58 · 376 阅读 · 0 评论 -
CSS3实现模糊背景的三种效果
不开头了,直接进入主题。 普通背景模糊效果如下: 使用属性:filter:(2px)普通背景模糊为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。实现思路: 在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:after中只需要继承背景,并且设置模糊,绝对定位原创 2017-10-31 18:58:42 · 133271 阅读 · 20 评论 -
struts2上传文件显示进度条实例---有图有代码,一看就会
2018-03-09 修改js其实是单线程的程序,因此在调用计时器的时候会先把setInterval或者settimeout函数之外的代码全部执行完才开始进入计时器程序…..好吧,这些是经典的面试题…. 啰嗦两句:显示进度条其实没那么困难有时候,不知道是环境问题还是人品问题,遇到的bug总是莫名其妙的。可是说到底还是某个知识点不太熟练。这次吐槽一下前端jquery的submit方...原创 2017-10-16 09:26:19 · 1860 阅读 · 2 评论 -
WebSocket获取httpSession空指针异常的解决办法
小坑:使用requestListner解决不了这个问题!如何获取HttpSession在使用webSocket实现p2p或者一对多聊天功能的时候我们经常会有这样的需求:webSocket服务端需要获取到用户使用数据库的用户信息登录后的HttpSession获取个人资料信息。 于是,你会使用这样的代码:package com.xinyulee.ws;import javax.servlet.ht原创 2017-11-14 22:39:55 · 11132 阅读 · 23 评论 -
基于Struts2和hibernate的WebSocket聊天室的实现教程六:界面原型及通信请求
当你看到这篇文章的时候,相信对点对点聊天室的后台结构已经了解的差不多了。这里我们将实现前端QQ的聊天界面效果,以及如何使用ajax和webSocket进行通信请求。 Intellij项目下载: http://download.csdn.net/download/csu_passer/10125210效果演示打开界面,请求输入用户名(登录凭证) 登录界面:这里我们登录了两个用户(google浏览原创 2017-11-23 14:41:24 · 719 阅读 · 2 评论 -
CSS:a标签不同状态下的显示样式渲染顺序
问题相信很多朋友在刚接触css的时候会遇到这样的问题:超链接访问过后的hover样式消失了,或者说被点击访问过的超链接样式就不再具有hover和active的样式了。措施解决方法很简单:只需要更改a标签不同状态的css样式顺序就行。 因为浏览器解析css的原则是就近原则,因此我们在编写样式表的时候应该要将一般的放在上面,特殊的放在下面。否则的话,一般的样式会覆盖掉写在上面的特殊的样式...原创 2018-02-26 10:50:31 · 496 阅读 · 0 评论 -
css:CSS Sprites介绍
简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。优点CSS Sprites能很好地减少网页的http请...转载 2018-02-26 10:54:15 · 262 阅读 · 0 评论