- 博客(38)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 前端单元测试（Unit Testing）整理
是什么wiki： 在计算机编程中，单元测试（英语：Unit Testing）又称为模块测试, 是针对程序模块来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。为什么正确性： 测试可以验证代码的正确性，在上线前做到心里有底；自动化： 通过编写...
2019-09-18 09:47:46
1426
原创 HTML Entity 简介
HTML Entity 是什么HTML Entity 是一段字符串组成的文本，以 “＆” 符号开头，以 “;” 结尾,诞生原因一些字符在 HTML 中是预留的，拥有特殊的含义，比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。用途显示 HTML 保留字符，如 <、>、&、 " 等（联...
2019-09-08 22:29:16
2371
原创 使用 canvas 实现 js 取渐变色某段色值
背景开发大屏时遇到一个需求：需要由数值映射到颜色，具体表现为 0-100 分别对应由绿、黄、橙、红组成的渐变色的某段，即 10 应该对应绿黄之间的某个色值。预期传入所需渐变的色值，返回一个可取色的对象，调用此对象的取色方法，传入需要的色段即可获得该段的色值。思路创建 canvas，初始化 ccontext；使用传入的色值，通过 createLinearGradient 函数创建渐变...
2019-09-04 19:11:33
1768
原创 JS实现curry(柯里化)的四种简单方式
// 方法1function curry (fn, args) { const length = fn.length const args = args || [] return function () { const _args = Array.prototype.slice.call(arguments) Array.prototype.push.apply(ar...
2019-08-31 21:03:14
2568
原创 实现 element-ui popconfirm
实现原因在中后台的业务开发中，Popconfirm(确认操作弹出框)是一个常见的需求，但 element-ui 仅提供 popover，不支持如 ant design 的 popconfirm，直接使用 popover 做确认框代码复杂的同时还带来一些意料之外的问题，因此选择封装一个简单易用但又支持灵活配置的 Popconfirm组件供业务使用，提高开发效率。解决的问题使用麻烦，需要写较多...
2019-08-22 21:31:32
11394
原创 2020前端知识体系（图谱）
前言随着前端的不断发展，各种框架概念层出不穷，初级希望能了解前端整个知识体系，加强对前端认知，有一定工作经验对前端工程师也希望能构建自己对知识体系。因此本人查阅多方资料，以及自己的了解认知，绘制出如下的知识图谱，仅供大家参考。GitHub地址： 2019前端知识图谱期待star。因个人能力与视野有限，欢迎大家提PR与issue，一起改善，一起进步。图谱编程基础HTML(5)元素...
2019-08-18 16:33:08
25674
9
原创 使用SVG画一个罗盘
效果演示地址：罗盘项目地址：svg绘制罗盘-github解析工具库： svg.js中心太极：使用circle画一个黑色大圆背景使用path画一个白色半圆移动到左/右侧使用circle画一个半径为大圆半径一半的黑色圆移动到上/下方使用circle画一个半径为大圆半径一半的白色圆移动到下/上方使用circle画一个半径为大圆半径3/10的黑圆移动4画的白色圆中心使用circl...
2019-08-03 18:15:18
1093
原创 vue.config.errorHandler 错误处理调研
主题在 vue2.6.x 及之后版本中（仅限于此API未被毁灭性更新前）使用全局 errorHandler 钩子来进行 vue 组件中所抛错误的捕捉与处理。现状vue2.6 之前，errorHandler 只能捕捉同步函数抛出的错误，而在实际开发中我们关心得更多的是调用接口时可能抛出的错误，ES7之后通常使用 async await 的方式进行接口调用，对于async函数中抛出的错误erro...
2019-02-25 23:00:05
21126
1
原创 Error message消失之谜
背景在写业务代码时，前端与服务端约定了多个code，为了更好的辨识和使用Error，前端自定义了多种Error类，因此自定义了多个新的Error类，并且使用ES6的extend语法继承内置Errorclass CustomError extends Error { constructor ({ code, message }) { super(message); this.code ...
2019-01-26 16:51:16
2635
原创 JS如何快速便捷的通过Array构造Tree
前言在进行业务开发的时候常遇到需要通过数组元素间的关系构造一颗树，功能我想大家都能实现，但代码的简洁性、可读性、性能等都是要考虑的因素。代码和小栗子原数组：/* * id: 当前元素的唯一标识* pid: 当前元素的父元素的唯一标识* otherData: 当前元素的其他数据*/let list = [ { id: 'a', pid: 'b', otherData:...
2018-10-12 19:53:09
1015
原创 用 cavas 下一场雪
演示地址：故宫的雪喜欢的人不喜欢我，心塞赛，不写内容了，代码在github，自便clone修改~~心态恢复了再把代码优化优化，然后在这儿进行开发过程剖析 ~ ~ ~ ~...
2018-09-29 09:16:36
270
原创 使用vue-i18n进行项目国际化
vue-i18n方案文档简介安装npm i -S vue-i18n配置cd project-path/src/***mkdir i18ncd i18ntouch index.jsmkdir langtouch zh-CN.js en-US.js 1.zh-CN.js和en-US.js为具体语言包； 2.index.js负责实例化V...
2018-09-09 12:52:21
3203
原创 前端E2E测试略详解（以cypress为例）
E2E测试 (by cypress)：cypress安装npm install cypress --save-devcypress启动./node_modules/.bin/cypress open推荐将启动命令配置在package.json的scripts中，命名为e2ecypress自定义设置cypress默认有推荐配置，我们可根据业务需求进行一...
2018-09-09 12:32:33
10056
1
原创 前端E2E测试略解
什么是E2E： E2E（End To End）即端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。典型E2E测试框架对比 名称 断言 是否跨浏览器支持 实现 官网 是否开源 nightwatchjs assert 和 Chai Expect 是 selenium http://ni...
2018-07-25 10:23:03
33630
3
原创 koa2 + Sequelize + mysql数据存储篇
前言此文接百度地图poi爬取，·做的事情就是将上篇博文爬取的数据存储到本地MySQL中以供后期使用，由于毕设所剩事件已不多，加上node根基不稳，所以今天早上写代码的时候主要考虑的是最基本的实现，很多东西都是直接堆上去，逻辑较差，不过在这过程中还是碰到一些不错的问题，顺道记录一下~~GitHub地址： https://github.com/Xiaoleng123/poi 问题记录： ...
2018-05-03 20:21:08
2353
原创 基于react+antd的可拖动类目管理子系统
前言在后台应用中，有时会遇到这样的场景：一级类目（可换位、点击出现二级类目、双击改名）、二级类目（拖动换位、拖动换所处一级类目、点击编辑详情）······，如果在jQuery时代，想要实现这些需求，我们需要大量的操作的DOM，优化点就是写个函数接收变更数据重新渲染，无疑工程量和性能消耗都是巨大的，且容易出错。借助react或vue的数据视图绑定和性能优异的virtual DOM+diff，我们...
2018-05-02 10:10:58
4302
原创 移动H5 iPhone audio没有声音（声音不同步）问题的解决方式
前几天做一个移动H5小游戏，其中涉及到播放音频，选择使用了HTML5的&amp;lt;audio&amp;gt; 进行音频的播放，程序写好后测试pc仿iPhone、Android都可以正常播放，然而在iPhone上却没有声音，在网上查阅了一些解决办法，大概是要在.play() 方法之前调用.load() 或 .pause()，或者把.play() 放在touch事件中，不过我测试了一下也没有效果，但想着原理应该就...
2018-04-21 14:34:57
13131
原创 JavaScript写斐波那契数列的几种方式
什么是斐波那契数列： 斐波那契数列（Fibonacci sequence），又称黄金分割数列、因数学家列昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列以如下被以递归的方法定义：F(0)=1，F(1)=1, F(n)=F(n-1)+F(n-2)（n>...
2018-04-19 10:11:33
23229
3
原创 web安全问题简记
最初，让我写这个，我是拒绝的，后来，面试被问到，炸了，虽曾看过，却不曾记之，俗语有言：好记性不如烂笔头，这波，GG。 虽然，我写了这篇博客，但是，你要想多了解点内容，还是去看别人的稳，文章里放的链接都是我整个看完觉得不错的，大家有兴趣直接移步，妥！web常见的安全问题：1. XSS (cross site scripting 跨站脚本攻击)XSS用最简单的话介绍就是通过在输入...
2018-04-19 09:00:20
245
原创 来份日常前端知识巩固——下篇
五. 计算机网络1. HTTP请求头参考：HTTP请求头Accept：告诉服务端客户端要接受什么类型（MIME类型）；Cookie：传递客户端的cookie到服务器，一般用于检测用户身份；Referer：表示请求是从哪个URL发送的；Cache-Control：控制请求内容在客户端是否缓存与缓存存留时长；Connection：请求的链接类型，常用keep-alive(ht...
2018-04-10 08:26:11
250
原创 来份日常前端知识巩固——上篇
前言距离上次被面试过了一段时间了，有些知识点由于回顾较少已微有忘却，虽然很多内容大家都有只是为了面试而准备、工作完全用不到的“共识”，不过我认为知识总是有其存在的意义，也许确实用不到，但知道后碰到适用场景好歹能想到有这么个东西。正巧前几天在微信（来源——&gt;web前端学习圈）上看到一个推送，上面列举了前端一些常见知识点，看完整个列表发现自己虽然多数都曾知晓，但一些问题已然不能给出一个完备的...
2018-04-10 08:21:43
589
原创 当你用熟JavaScript对象深度拷贝之后
JavaScript对象深度拷贝算是一个老题，时不时开发中也会遇到，有时顺手再写一个，有时直接百度copy省时省力，，不过遇到问题多了之后，时不时就扩展一下，然后发现了一些有趣好玩的东西，不过他们大多不是最优解决方案，只不过提供了一个应用思路（某数学家：遇到新问题，首先看能不能转化成老问题）。1.对象比较大家都清楚，在JavaScript中{***}和{***}用==或===比较结果都...
2018-04-04 14:53:41
132
原创 论各种操作js数组去重 （附个人深度去重法:见3——针对对象进行强比较去重）
数组去重算是个老生常谈的问题了，不管是面试还是工作都会有所涉及，去重的方法比较多，不好说谁一定好谁一定差，可根据实际需求进行选择。本文列举一些常见的去重方法，并附上方法优劣与适用场合，如有纰漏请指正。1. 二重循环对比法：const array = [1, NaN, '1', null, /a/, 1, undefined, null, NaN, '1', {}, /a/, [], u...
2018-03-30 17:00:01
1229
原创 JavaScript代码优化 --- 长期更新
自2015年6月17日(ECMAScript 2015(ES6)正式版发布至今已快三年，众多新特性使得JavaScript不再是一门“简陋”的语言，Node端在6.4.0之后的版本对ES6的原生支持已达到95%（参考：node各版本ES6支持程度表），而前端借助babel的编译也使得我们几乎可以随心所欲的在代码中使用各种ES6及之后版本的新特性而不用考虑不同浏览器(版本)的支持情况，我相信各位前端...
2018-03-29 11:19:03
887
原创 不掉队的前端知识成长体系
前端发展日新月异，好的框架技术层出不穷，想成为一名优秀的前端开发工程师，那么一个完备的知识体系是必要的，本文结合他人的意见与自己的思考总结了近些年(写于2018/03)前端几乎必备的知识栈，如有遗漏/错误欢迎补充或提建议： 1. ES6：现今前端从业者学习ES6的必要性不言而喻，ES6借鉴很多其他的语言或框架的优秀思想，将一些内容直接集成到了原生语言中，借助这些新特性可以完全很多我们用。 2....
2018-03-28 11:15:11
984
原创 百度地图POI爬取（JavaScript语言篇，以武汉市商圈为例）
前言（不搭后语，推荐略过不看）： 毕业设计选了个《通过百度地图POI分析城市商圈结构特征》的课题，我作为一个熟(jian)练(dan)使(cao)用(zuo)Echarts的前端开发工(cheng)程(xu)师(yuan)，自然免不了来一发数据可视化，那么问题来了，数据在哪儿弄？当然是买买买啦，啊噗，咋可能，作为一名未来优秀的IT人士，当然是选择用双手成就梦想，自己爬多有成就感是吧，还能装个*。那...
2018-03-14 15:44:47
3000
原创 对localStorage进行二次封装，增加数据有效期限制
十分钟前做了cvte的前端笔试题，说实话做的真的爽，好多题考的细节很到位，很多坑可能跳过，但后面都逐渐忘却了，值此机会记录一下最后一道题（不算泄密吧，如果算马上删）：localStorage的存储时间有限制，请进行二次封装，能让存储有数据有时间限制。 我当时的作答如下（还有很多点可优化，比如修改为设置每一次数据的有效期而非所有）：const newStorage = { stor...
2018-03-10 20:56:25
2215
原创 JavaScript广度优先遍历and剪枝操作
今天逛StackOverflow，想着帮别人回答回答问题，也能锻炼自己，然后遇到一位提了个问题没人回答，就尝试着帮助解决，然后···一下午没了，菜鸟就是尴尬。需求简述：从一个json数据（可看作Tree结构）中查找其中一个节点，并得到该节点所在的父链与直接子节点，其他枝都剪掉（包括子节点的子也剪）。 解决思路大概是先进行深度优先或广度优先遍历，匹配过程中得到父链与每个父节点在兄弟节点间的位置，然...
2018-03-09 20:51:47
760
原创 网页F12出现favicon.ico not found问题的原因与解决方法
算是一个破事水，不过之前还真的不清楚这东西干嘛的，只是在公司实习时F12喜欢报错找不到这东西，当时同事说不管就没深究，很是惭愧······后来还是查了一下，这东西原来就是网页title旁边的icon，一般和logo一样。大小一般控制在16*16px或32*32px，大了影响加载速度，还可能导致浏览器不进行缓存，添加方式通常这样（一般开发方式，路径也可能视情况修改）：<head> ...
2018-03-04 22:41:54
25543
1
转载 HTTP常见状态码（部分）
1XX系列： 100：客户端应当继续发送请求。这个临时响应是用来通知客户它的部分请求已经被服务器接收，且尚未被拒绝。客户端应当继续发送请求的剩余的部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。101： 服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会...
2018-03-01 18:45:48
244
原创 原生JavaScript实现前端翻页插件
之前做项目有遇到需要使用翻页插件，公司原来使用的是基于jQuery和bootstrap扩展的插件，依赖较多，后来自己就尝试着用原生的JS实现插件效果，由于技术水平有限，花了一天多时间算是完工，但可能还有一些BUG本人未完全测试出，一些代码逻辑也有待改进，望谅解。配置与使用说明：<div id="pageDom"></div>var pageDom = document....
2018-02-04 21:47:05
1440
原创 HTTP与UDP的区别比较
TCP(Transmission Control Protocol,传输控制协议)与UDP(User Data Protocol,用户数据协议)是互联网传输数据较为常用的协议，我们熟知的HTTP就是基于TCP的。二者区别：1. 连接类型：TCP是面向连接的协议，要传输数据必须先进行连接，就是常说的“三次握手”，握手成功建立连接之后才能进行数据的传输交互，如同微信视频聊天需要对方接受才能彼此
2018-01-23 14:42:57
13960
原创 2017校招全国统一模拟考试（第五场）JavaScript解法记录（题目来源-->牛客网）
2017校招全国统一模拟考试（第五场）JavaScript解法1.彩色瓷砖 2.DNA序列 3.偶串 4.制造回文 5.猜数游戏
2017-12-12 13:42:31
386
原创 网易面试题记录（题目来源-->牛客网）
1.魔法币：小易准备去魔法王国采购魔法神器,购买魔法神器需要使用魔法币,但是小易现在一枚魔法币都没有,但是小易有两台魔法机器可以通过投入x(x可以为0)个魔法币产生更多的魔法币。 魔法机器1:如果投入x个魔法币,魔法机器会将其变为2x+1个魔法币 魔法机器2:如果投入x个魔法币,魔法机器会将其变为2x+2个魔法币 小易采购魔法神器总共需要n个魔法币,所以小易只能通过两台魔法机器产生恰好n个魔法
2017-12-02 14:04:18
718
原创 JavaScript日期格式转换
var formatDate = function(oDate,sFormation){ var obj = { yyyyyyyy:oDate.getFullYear(), yy:oDate.getFullYear(), MM:oDate.getMonth()+1, dd:oDate.getDate(), HH:oDate.getHours(),
2017-11-30 20:22:09
167
原创 微博签到数据可视化分析研究
主要是就是用echats对微博签到数据进行可视化，从展示效果上可以得到一些结论（这里就不写啥结论了，数据是当初参加比赛官方给的，大家可以自己写爬虫去爬，或者某些公众号会公开一些），具体代码什么的后台就是个数据读取而已，前端的F12直接看。效果展示： 访问地址：微博签到数据分析应用
2017-11-01 22:07:47
4324
原创 用SQL进行地铁线路换乘查询
这代码是当初做课程作业时写出来的，过了几个月了现在看了看发现还挺不错的，说不定现在还写不出来了呢·~·。语法较为基础，都是简单的关键字，但是逻辑嵌套比较复杂，也用了大量的in，所以效率上可能不那么给列，不知道用来查公交速度如何~~~ SQL我写在了Java里，方便传参和二次换乘衔接，代码如下package xiaolengzi;import java.sql.Connection;...
2017-11-01 11:54:05
2805
5
原创 用echarts放个烟花
echarts2内置了很多漂亮的点样式，在使用过程中受到漂亮图形的启发想到了可以用echarts模拟一个烟花，然后就开始做了。几个要点就是隐藏地图，随机坐标添加。展示效果：echarts烟花...
2017-10-28 01:02:58
989
bootstrap分页插件
2017-10-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人