- 博客(34)
- 收藏
- 关注
RSS订阅原创 前端补齐起止日期之间的所有日期与月份的简单方法
最近在做的一个图表可视化需求里面要求: 选定起止日期之后对起止日期里面每一天的数据进行展示,由于后端对数据的处理是没有数据就不返回, 所以起止日期之间的date列表需要前端进行处理, 任意选择两个起止时间之后需要得到的日期和月份列表如下:再换个日期显示一下:实现思路:一开始觉得需要自己处理每一个月的月份长度问题, 这样的话还得加上闰月的计算代码, 感觉虽然...
2019-12-11 18:23:41
856
原创 IE项目使用iframe之后内存持续升高的解决办法
问题背景最近一年多在做的项目是一个大数据的产品平台, 做一些数据类的产品, 主要是做一些客户的分群筛选, 客户画像, 策略配置之类的功能, 项目使用的技术栈是vue, 项目的一些产品页会被公司的几个其他的平台调用. 出现问题的这个页面是一个用户的画像页, 调用方是业务方坐席的使用平台, 一个运行在IE上的项目, 调用的方式是使用iframe将页面嵌入.问题的产生周一我们收到...
2019-10-27 23:41:43
2369
1
原创 文件上传编码格式不对
解决方案一：1、将编码方式 enctype设置为："multipart/form-data"如： <form action="${ctx}/executeImport" method="post" enctype="multipart/form-data">方案二：用elementUI 上传组件库...
2019-10-17 17:44:08
1450
原创 vue 项目为echarts图添加点击事件 及常见的两问题分析
vue 项目里用echarts已经很长一段时间了，项目的配置项什么的也查了不少， 但是隔断时间换个项目， 很多内容都容易忘记，或者掉进之前踩过的坑， 所以下面做个简单的记录：步骤一：本地安装echartsnpm install echarts --save步骤二：在main文件里面先引入echars：import echarts form ‘echars’;...
2019-10-08 18:06:25
3594
原创 vue-cli3 项目启动报错 unexpected token... 居然是因为node版本过低
最近在接手一个vue-cli3搭建的app项目的新需求时， 发现自己拉下代码之后启动一直报错,报错是unexpected token...对应的报错文件是 项目\node_modules\read-pkg\index.js ，具体是里面有一个...options 的运算操作报错，导致项目起不起来后面捣鼓一圈， 走了点弯路， 还是把问题解决了， 问题的解决过程如下:...
2019-09-16 15:20:43
5682
1
转载 缓存机制
http缓存机制：https://www.cnblogs.com/ranyonsue/p/8918908.htmlWeb 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。在具体了解 HTTP 缓存之前先...
2019-09-09 09:09:24
169
转载 前端错误捕获
原文链接：https://blog.csdn.net/qq_26702033/article/details/79863485前端错误的分类：及时运行错误：代码错误；资源加载错误；及时运行错误的捕获方式：- try-catch- window.onerror,注册window.onerror事件。window.onerror = function(){}1资源加载错...
2019-08-28 15:09:36
488
原创 自定义输入框样式修改
input 上样式outline： none包装框：.outter-box input:focus { border: 1px solid #4e7aeb;}
2019-08-28 10:30:33
2184
原创 vue项目页面滚动到特定元素的的四种方法
最近在做一个关于语音识别的项目, 涉及到语音消息的实时推送, 语音内容的识别与内容关联话术推荐, 做的时候需要实现一个识别出来的内容关联客户对话内容的功能, 简而言之就是实现一个点击跳转到在实时更新的对话框内与当前内容相关联的特定元素的功能, 实现的过程中用一个很巧妙的办法解决了, 这里记录一下.方法一:利用锚链接 / 直接改变hash值说道页面内的跳转, 有过一段时间开发经验的同学想到...
2019-08-18 23:00:39
9522
2
VUE技术揭秘阅读笔记之vue源码构建
一：vue的源码构建是基于rollup关于rollup， 我们需要提前了解并知道的是，rollup是一种最近比较火的前端工程化构建工具， 提供了多种打包方式，并且可以通过format属性设置你想要打包成的代码类型： amd - 输出成AMD模块规则，RequireJS可以用 cjs -CommonJS规则，适合Node，Browserify，Webpack等 es...
2019-08-11 23:23:03
175
原创 flutter与RN对比
本周五下午公司组织了三场分享:一场是关于前端微架构;一场是关于flutter的介绍;一场是关于react native项目实战flutter最近热度很高,是由 Google 的工程师团队打造的，用于创建高性能、跨平台的移动应用的框架, RN 也是使用率较高的跨平台移动应用开发框架.flutter的介绍当中并未介绍实际开发案例, 而选择使用RN技术的项目组则是考虑到由于flu...
2019-08-04 23:29:25
1790
转载 Express中间件的原理及实现
最近在学习的内容里面有关于中间件原理以及实现,认真了解一下,发现其原理并不难转一篇写得不错的文章做下记录, 转载地址:https://www.jianshu.com/p/797a4e38fe77参考文章：初学nodejs一：别被Express的API搞晕了GitHub，欢迎star：https://github.com/BadWaka/node-express-middlewa...
2019-07-21 23:01:39
312
转载 继承的八种方式
JavaScript高级程序设计上介绍了六种继承的方式, 本来想自己写笔记记录一下,后来在网上看见这篇文章总结得很好,先转过来~文章一下内容转载自:https://segmentfault.com/a/11900000168910091、原型链继承构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针...
2019-07-21 22:57:01
540
转载 vue的双向绑定原理及实现
前言使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：代码： 效果图：是不是看起来跟vue的...
2019-07-14 23:35:44
180
原创 深入理解GET和POST的区别
一说到get后post的区别 可能我们最先了解到的是下面的这些内容:·GET 在浏览器回退时是无害的· GET 产生的 URL 地址可以被收藏，而 POST 不可以· GET 请求会被浏览器主动缓存，而 POST 不会，除非手动设皿置· GET 请求只能进行 URL 编码，而 POST 支持多种编码方式· GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数...
2019-07-07 23:02:53
230
转载 输入URL后的加载过程
输入url后的加载过程从输入 URL 到页面加载完成的过程中都发生了什么计算机网络体系结构应用层(HTTP、SMTP、FTP、POP3) 运输层(TCP、UDP) 网络层(IP(路由器)) 数据链路层(网桥(CSMA/CD、PPP)) 物理层(集线器)1. 查找域名对应IP地址这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存......
2019-06-25 14:20:08
364
转载 前端模块化 AMD、CMD与Common.js的区别
前端模块规范有三种：CommonJs,AMD和CMD。CommonJs用在服务器端，AMD和CMD用在浏览器环境AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。AMD:提前执行（异步加载：依赖先执行）+延迟执行CMD:延迟执行（运行到需加载，根据顺序执行）模块函数写法 function f1()...
2019-06-25 14:17:44
192
原创 web安全指XSS与CSRF
根据《图解http》一书关于web攻击的介绍，攻击的模式有两大类,主动攻击与被动攻击主动攻击:主要针对服务器上的资源进行攻击,代表攻击方式有SQL注入与OS命令注入.被动攻击:攻击者并不是直接对web应用发起攻击, 而是通过一定的引诱或者圈套策略发起攻击.被动攻击中最常见的两种攻击方式是XSS与CSRF:xss(cross-site-scripting)：跨站脚本攻击...
2019-06-23 23:21:10
183
原创 call与apply的模拟实现
前段时间看了冴羽github上call与apply的模拟实现,文章由浅入深将整个实现的过程循序渐进地完善道来, 这里记录一下我学习过之后的一些总结:整个模拟实现的过程分为三步:第一步: 完成一个初步的call模拟调用过程;第二步: 完善入参的传递与调用;第三步: 补全调用对象缺失时的状况,代码实现apply调用;第一步模拟调用的原理:根据call的定义:call()...
2019-06-16 23:49:12
177
转载 深入理解 requestAnimationFrame
随笔-34 文章-12 评论-371requestAnimationFrame 知多少？在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 r...
2019-05-29 18:01:49
231
原创 js 实现数组内容根据多条件排序的几种方法
最近需要实现一个统计对话中所出现的高频单词的功能，需要前端计算显示排名前四的高频词汇，这样的统计遵循两个条件：首先按照单词出现的次数从大到小进行排序，然后在单词出现次数相同的情况下，最新出现的单词优先排在前面：思考之后，我想出来的解决方案思路简单来说是，首先统计出每个单词的出现次数以及最后一次出现时的下标数，按照每个单词是出现次数进行第一轮排序，排序之后，根据单词出现次数对次数相同的单词再...
2019-05-22 15:47:28
4748
原创 position fixed 固定定位失效问题及解决方案
最近在项目开发过程中遇到了一个固定定位失效的问题，当给一个元素设置了position： fixed并设置了距离top和left的距离之后发现位置居然一直不正确，fix固定定位失效了。由于出现这个bug的地方使用了better-scroll， 初步猜想失效的原因可能是使用的better-scroll.js插件， 后来在网上查找了一番，发现原来使用isscroll.js滚动库以及在移动端设置-we...
2019-05-20 14:54:32
17860
原创 div跟随鼠标实现效果
实现思路：div脱离文档流,设置为固定定位：position: fixed;left: Number(event.clientX - event.offsetX + ‘偏移常量’)；top: Number(event.clientY- event.offsetY+ ‘偏移常量’)；如果div位置过低：if（top值> (window.innerHeight -...
2019-04-12 16:09:31
377
原创 JS 手动实现日历效果
最近的开发任务需要自己实现一个查看某年某月，每天不同事件的概览功能，展示的页面是一个日程表的形式， 所以这个功能就需要手动实现一个JS日历的功能，日历的页面拿掉所有应该在每日显示的事件，页面需要的效果简略版如下：由于我们的项目开发框架目前是vue，所以获取当月日历的话，重点是生成一个需要显示的当月每天是星期几的一个数组，然后for循环渲染一下就能获取我们目前所需的当月日历了，功能的开发...
2019-03-28 17:15:11
1608
原创 跨域的九种方式（个人概括性总结）
为什么会跨域：因为所有的浏览器都遵循由网景公司提出的著名的安全策略-同源策略， 所谓同源是指域名、协议、端口相同，当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求资源的时，浏览器会在控制台报一个异常，提示拒绝访问。跨域的解决方案：一、通过jsonp跨域原理：动态创建script标签，利用标签的src属性不受同源策略限制的特点将请求到的数据放到回调函数里面...
2019-03-25 11:14:35
337
原创 Mocha + Karma框架测试用例接入travis CI，chrome无法启动的三种解决方式
最近简单学习了下自动化测试环境的搭建， 最后学习成果是把上传到github上面的代码接入到travis CI并构建成功。测试用例的测试框架用的 是mocha + Karma;karma是Angular JS 团队提供的一款可以运行在浏览器端的测试框架，可用于测试所有主流web浏览器， 在我最近学习使用的过程当中，我使用的浏览器是最常用的Chrome，可是在将测试用例接入到travis并bu...
2019-03-22 16:42:05
687
原创 vscode安装vetur且配置files.associations之后js文件无高亮
虽然上班在公司用vscode已经一年多了，但前段时间，我才开始在我自己的笔记本上改用vscode，可是vscode安装vetur之后，发现打开js文件一直没有高亮，这个问题，之前算是解决一半，今天终于彻底解决了。解决思路如下：1、前几个月在网上找了一圈，基本上都是说安装vetur之后需要配置一下files.associations， 可是根据网上那些文章，配置一遍之后发现打...
2019-03-13 17:56:48
13570
5
原创 初识yarn
Yarn是什么？“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”大家在使用npm可能遇到的坑：1. 安装巨慢2.版本一致性问题3.包错误信息混乱，难以注意到使用yarn的优点：1.速度快原因两点：a. 包的安装为并行...
2019-03-10 23:46:49
152
原创 纯css 利用多栏布局实现瀑布流 简略版
由于工作需要，今天尝试用纯css实现了一下瀑布流的布局，实现的原理是利用多栏布局配合break-inside属性，此种方式的实现代码非常简单，也不需要依赖任何插件，下面 先看一下实现的效果图：下面贴上实现代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g...
2019-03-04 11:05:14
344
原创 前端性能优化之减少重排，对比重排与重绘
在前端开发的过程中，性能优化是一个最常见的问题，重绘与重排也是提到优化时不可忽视的一块。那么什么是重绘与重排呢，在解释重绘与重排之前，我们首先需要先了解清楚浏览器的渲染过程， 下面先上一张比较常见的渲染过程图：根据上图我们可以看到和总结出浏览器的渲染大致分为以下五个步骤： DOM Tree： 浏览器根据HTML解析出DOM Tree Style Rules：根据C...
2019-03-03 23:56:41
1240
原创 判断某变量是否为数组数据类型
先贴出最简略的方法总结：方法一：Object.prototype.toString.call(arr) === '[object Array]' 则arr为数组;方法二：Array.isArray(arr) === true 则arr为数组; （API不存在时MDN上推荐使用方法一的原理创建PolyFill）方法三：arr instanceof Array === true 则arr...
2019-02-21 16:50:39
2103
原创 前端学习之刻意练习写作参考
思考了 一些接下来需要好好总结的一些前端必备知识点， 这些知识点绝大部分其实都有比较深入地进行过学习与了解，但是，常常因为觉得写作太花时间的原因，放弃了做一个深度的总结， 以至于自己的水平还是很局限也没有很大的突破，下面是开始刻意练习之后的第一次总结，可能不一定很到位， 后续会继续不断补充的。希望自己能够好好坚持。布局：三栏布局五种方式； 居中布局四种方式； BFC; 清除浮动...
2019-02-20 15:13:59
379
原创 利用chosen.js插件实现下拉可搜索多选，控制选择个数，选项框复位，修改下拉选项的功能（附代码）
背景：之前项目当中需要实现下拉多选功能，后来由于选项条数太大，超过1000多条，且选项为机器ip名，名字的相似程度太高，肉眼搜索进行选择用户体验实在太差，所以需要实现可搜索的下拉多选，后来在实际的项目当中有时有需要控制选项的个数，即实现可搜索的下拉单选，这些功能的实现觉得有必要稍微记录一下，供自己以后参考， 先记录如下。一、使用该插件实现下拉多选非常简单：1.下载该插件的相关文
2017-11-03 10:49:42
6127
原创 clipboard.js 实现动态获取内容并复制到剪切板
使用背景：项目组新重构的项目里面有利用zeroClipboard.js实现复制内容到剪切板的功能， 由于zeroClipboard.js依赖于Flash，而出于我所在公司的安全策略，大部分同事都没有办法下载更新后的Adobe Flash 插件并更新，所以解决原插件使用的bug需要另找方法。经过一番查找，不利用Flash实现复制内容到剪切板还有另外两种方法：一、使用原生js里面的
2017-10-25 15:08:35
14468
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人