自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

胖叔的博客

软件热爱者。

  • 博客(15)
  • 收藏
  • 关注

原创 Jest+Enzyme的单元测试技巧总结

技术选型jest: 支持断言、Mock、Snapchat、Async测试、测试覆盖率等enzyme:模拟了jQuery的APi,比较直观,学习使用都比较简单测试的原则测试代码时,只考虑测试,不考虑内部实现数据尽量模拟现实,越靠近现实越好对重点、复杂、核心代码,重点测试利用AOP(beforeEach、afterEach),减少测试代码数量,避免无用功能测试、功能开发相结合,有利于设计和代码重构测试过程中出现 Bug 的情况店东贷采用的是BDD的测试手法,通过代码对原有业务需求的理

2020-06-15 18:15:13 3363

原创 基于React项目下的组件单元测试

基于React项目下的组件单元测试什么是单元测试?单元测试框架选择1.测试用例在`node环境`下运行,不依赖于浏览器,建议选用`Jest + Enzyme`2.测试用例依赖于浏览器环境,建议选用`Karma + Jasmine + Enzyme`环境数据执行及结果`Demo.test.jsx`示例代码执行结果问题总结1. `Plugin/Preset files are not allowed ...

2020-03-27 16:03:12 847 1

原创 Vue城市多选组件

效果DEMO:组件需求项目工具需求:给多个城市配置信息,城市选择具体到市,将全国这一选项设置为level=0,省level=1,市level=2。展示只展示level=2的市。项目UI库:ant-design-vue组件实现组件代码// selectCitys.vue<template> <div class="abk-select-city" @cl...

2019-06-04 14:37:09 5782 5

原创 React从开始搭建到项目部署到服务器

导语什么是React?Vue跟React相比的区别是哪些?为什么大厂都会选择React?区别设计模式React采用的是MVC模式(严格的view层);Vue采用的是MVVM模式;组件写法不同;react主张jsx+inline style,也就是讲HTML、css写到js中,一切皆js,vue则是webpack+Vue-loader的单文件组件格式,即HTML、css...

2019-05-22 17:00:00 16153

原创 客户端将URL文件或图片通过jszip打包成zip压缩包

前言项目开发过程中关于一个订单所有附件的导出引发的一个问题,刚开始的时候在后端打包并压缩,返回stream流给前端,前端通过a标签下载流,但是在文件比较大的时候会出现问题,后端压缩的时候采用的是archiver,前端压缩的时候采用的是jszip服务端archiver压缩返回流压缩文件示例代码:let zip = archiver('zip')let zipFileCount =...

2019-05-07 16:48:36 4174

原创 网站调优之性能分析

做网站性能调优,首先需要知道网站那些地方需要调优,这就需要先做性能分析。在线性能分析工具网站webpagetest通过网站测试结果分析网站那些地方做的不足,需要改进:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tyTdvqr8-1592557348661)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200619164013824.png)]测试结果类似ySl.

2020-06-19 17:03:58 682

原创 基于create-react-app脚手架编写UI组件包发布到npm平台

webpack属性定义Entry: 入口Module:模块,webpack中一切皆是模块Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割Loader:模块转换器,用于把模块原内容按照需求转换成新内容Plugin:扩展插件,在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情Output: 输出结果webpack执行流程web...

2019-11-01 18:28:10 1456

原创 React Hook借助useReducer, useContext代替Redux方案

React Hook借助useReducer, useContext代替Redux方案目录结构图效果图实现`Test/reducer.jsx``Test/child.jsx``Test/index.jsx``OtherPage/index.jsx`注意点当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式...

2019-10-29 17:06:03 1354

原创 应用缓存方案-ServiceWork

原文链接:应用缓存方案-ServiceWork

2019-08-07 15:19:55 162

转载 JavaScript深入之call和apply的模拟实现

call一句话介绍 call:call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。举个例子:var foo = { value: 1};function bar() { console.log(this.value);}bar.call(foo); // 1注意两点:call 改变了 this 的指向,指向到 ...

2019-07-16 23:53:36 119

转载 学习Javascript闭包(Closure)

学习Javascript闭包(Closure)一、变量的作用域二、如何从外部读取局部变量?三、闭包的概念四、闭包的用途五、使用闭包的注意点六、思考题摘自:阮一峰:学习Javascript闭包(Closure)闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面就是我的学习笔记,对于Javascript初学者应该是很有用的。一、变量...

2019-07-07 10:43:57 354

转载 可能这些是你想要的H5软键盘兼容方案

编者按:本文转载自wuwhs的segmentfault专栏 https://mp.weixin.qq.com/s/EkB5yNJMmSpCj6h87-VZmw前言最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题:在 Android 和 IOS 上...

2019-06-04 19:00:25 1070 1

转载 JavaScript专题之跟着underscore学防抖

前言在前端开发中会遇到一些频繁的事件触发,比如:window 的 resize、scrollmousedown、mousemovekeyup、keydown……为此,我们举个示例代码来了解事件如何频繁的触发:我们写个 index.html 文件:<!DOCTYPE html><html lang="zh-cmn-Hans"><head&g...

2019-06-04 14:31:23 227

转载 JavaScript深入之执行上下文栈

顺序执行?如果要问到 JavaScript 代码执行顺序的话,想必写过 JavaScript 的开发者都会有个直观的印象,那就是顺序执行,毕竟:var foo = function () { console.log('foo1');}foo(); // foo1var foo = function () { console.log('foo2');}...

2019-04-01 16:10:55 107 1

转载 JavaScript深入之词法作用域和动态作用域

作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping),也就是静态作用域。静态作用域与动态作用域因为 JavaScript 采用的是词法作用域,函数的作用域在函数定义的时候就决定了。而与词法作用域相对的是动态作用域,函数的作用域是在函数调用的时候才决定的。让...

2019-04-01 15:54:20 101

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除