- 博客(160)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 用Jest编写单元测试
目录Jest目录结构关于快照 snapshot简单用例Jest到新公司的第一个任务是写个公共的Calendar组件，还挺有意思的。写完之后，作为公共组件，当然要有单测，单侧覆盖率也是越高越好。充分的单测能够降低后续迭代造成bug的几率。所以来简单记录下使用jest的过程，文本主要讲大致用法，具体细节还是看文档吧目录结构----- Component // 你的组件目录 index.tsx // 当前组件源码 ... ---- __test__ // 单测相关目录 ---- index
2022-05-18 19:19:52
844
1
原创 React-Query学习及实践总结
文章目录前言一、react-query能干嘛？二、常见用例1.引入库2.请求useQuery2.列表useInfiniteQuery3. 并行查询4. 状态指示器5. 禁用/暂停查询6. 分页/滞后查询 keepPreviousData7. 查询数据占位符 placeholder-query-data8. 修改 mutations9. 查询失效 query-invalidation10. 修改导致的失效invalidation-from-mutations11. 响应更新的数据 updates-from-
2022-05-17 15:46:51
2330
1
原创 编写shell脚本实现mongo的数据恢复
编写shell脚本实现mongo的数据恢复之前已经写了定期数据备份的脚本 mongodumo.sh今天补一个恢复的，使用官方的mongoStore。使用时直接执行，根据提示输入要恢复到哪天的备份即可。注释齐全直接上脚本#!/bin/bash# 宿主机相关配置# 宿主机存放备份包的文件夹，已映射到容器内部的 /dumptar# mongo的启动命令中： -v /home/mongo/dumptar/:/dumptarMONGO_STORE_DIR=/home/mongo/dumptar#
2021-04-09 16:45:07
530
原创 Egg通过middleware实现数据权限
需求：项目中的es有很多表，每个表有很多不同的数据。需求是把数据权限的粒度做到单条数据层面。比如：用户查询10个ip，其中3个有权限，显示所有内容，7个无权限，只显示部分内容并且标识出来，便于前端展示。方案：通过egg的middleware中间件，在接口返回出对返回数据进行隐私处理。建立数据权限组机制，数据导入时需要选择数据所属的权限组，并且在每条数据上标记权限组id用户可以动态的增删数据权限组，拥有这个数据权限组，就拥有了该数据权限组下的所有数据接口返回数据经过中间件时，根据用户所属的用户
2021-04-09 16:22:57
456
原创 docker-compose 编写
简单记录最近部署使用的docker-compose文件，以免忘记# 关闭docker-compose down# 开启，-d 表示deamon启动docker-compose up -d这里举一个完整简单的例子，单机部署，都没有集群，集群部署回头再补。docker-compose.ymlversion: '3.3' # 指定docker-compose 版本services: # 要拉起的服务们 redis: image: redis # 镜像 container_n
2021-03-30 15:28:45
644
原创 Dockerfile编写
近期部署工作比较多，对docker和docker-compose都有了更深入的了解，已经可以熟练使用了。这里记录一下自己写的相关脚本，加深印象。前端# docker build 当前目录 tag为bd-ui 使用配置文件Dockerfile.proddocker build . -t bd-ui -f Dockerfile.prodDockerfile.prod由于公司内部npm仓库不稳定，为了提升效率，在这里是先本地执行build再docker build，直接把编译后的dist放入容器。实际
2021-03-30 15:20:19
217
1
原创 编写shell脚本实现mongo的定期备份
编写shell脚本实现mongo的定期备份项目要求定期备份MongoDB数据，于是使用官方的mongodump，简单好用。主要就是编写shell脚本，来定期自动备份使用服务器自带的crontab来定时执行。shell脚本踩了很多坑，但是经此一役，算是入门了，以后要写其他相关的脚本应该也毫无压力。直接上脚本，注释很清晰，没啥好说的mongodump.sh#!/bin/bash# 宿主机相关配置# 宿主机的备份日志LOG_DIR=/root/dumplog# 宿主机上备份压缩文件目录B
2021-03-30 14:54:43
535
1
原创 Docker入门
参考资料：慕课网Docker入门视频Docker简介Docker允许一个应用程序运行在独立的环境中，包含了他的所有依赖。一些术语：host: 宿主机image：镜像container: 容器registry：仓库daemon：守护程序，所以是 -dclient：客户端Docker 架构常用命令docker pull: 获取镜像docker build: 创建镜像docker run xxx: 运行一个xxx镜像的容器docker stop [容器id]：停止容器
2020-08-26 15:14:40
211
原创 【设计模式系列】之【发布-订阅模式】
前言：要提升代码水平，就绕不开设计模式。之前也有过一些了解，但并没有深入学习。最近准备系统的学习一下设计模式，提高设计，解耦的能力，发现了一本好书《JavaScript设计模式与开发实践》，所以边读边写，把常用的设计模式学习并记录在这里。发布-订阅模式定义与介绍发布-订阅模式的例子必须先发布再订阅吗？推模型和拉模型小结定义与介绍发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖...
2020-01-03 18:12:12
270
原创 【设计模式系列】之【迭代器模式】
前言：要提升代码水平，就绕不开设计模式。之前也有过一些了解，但并没有深入学习。最近准备系统的学习一下设计模式，提高设计，解耦的能力，发现了一本好书《JavaScript设计模式与开发实践》，所以边读边写，把常用的设计模式学习并记录在这里。迭代器模式定义与介绍内部迭代器 和 外部迭代器JavaScript中的单例模式迭代器模式的例子定义与介绍迭代器模式是指提供一种方法顺序访问一个聚合对象中...
2019-12-25 16:24:33
159
原创 【设计模式系列】之【代理模式】
前言：要提升代码水平，就绕不开设计模式。之前也有过一些了解，但并没有深入学习。最近准备系统的学习一下设计模式，提高设计，解耦的能力，发现了一本好书《JavaScript设计模式与开发实践》，所以边读边写，把常用的设计模式学习并记录在这里。代理模式单一职责原则定义与介绍保护代理 和 虚拟代理JavaScript中的代理模式单一职责原则面向对象涉及的原则之一：单一职责原则，即对一个类（对象，...
2019-12-25 15:41:36
187
原创 【设计模式系列】之【策略模式】
前言：要提升代码水平，就绕不开设计模式。之前也有过一些了解，但并没有深入学习。最近准备系统的学习一下设计模式，提高设计，解耦的能力，发现了一本好书《JavaScript设计模式与开发实践》，所以边读边写，把常用的设计模式学习并记录在这里。策略模式定义与介绍JavaScript中的策略模式策略模式的例子定义与介绍单例模式的定义：定义一系列算法，把它们一个个封装起来，并且使它们可以互相替换。...
2019-12-23 17:09:51
214
原创 【设计模式系列】之【单例模式】
前言：要提升代码水平，就绕不开设计模式。之前也有过一些了解，但并没有深入学习。最近准备系统的学习一下设计模式，提高设计，解耦的能力，发现了一本好书《JavaScript设计模式与开发实践》，所以边读边写，把常用的设计模式学习并记录在这里。单例模式定义与介绍JavaScript中的单例模式惰性单例将创建对象和管理单例的逻辑解耦单例模式的例子定义与介绍单例模式的定义：确保只有一个实例，并提供...
2019-12-19 18:21:48
180
原创 使用vscode断点调试egg后端代码
前端调试经常打断点，但后端之前一直是打log调试的，其实有些情况下断点更好用，而且vscode配置也很简单，是自己之前懒了没去弄。参考资料：egg文档按照文档做了相应配置，然后写上调试项目的绝对目录之后，从vscode中启动即可，egg本身就做了支持，还是非常方便的。...
2019-10-23 15:13:56
1111
原创 Mongoose 设置TTL(time to live) 过期自动删除数据
最近忙好忙。。。没什么时间积累，今天抽空赶紧随手记一个新操作什么是TTLTTL(time to live) 集合支持mongodb对存储的数据进行失效时间设置，经过指定的时间段后、或在指定的时间点过期，集合自动被mongod清除。这一特性有利于对一些只需要保存一定时间的数据信息进行存储，比如机器产生的事件数据、日志、会话信息等。简单场景比如用户的验证码，生成后需要存在数据库的ver...
2019-10-17 15:59:53
2226
原创 前端配合Egg实现导入导出Excle文件功能
本来我只是个小前端，来了新公司前后端一起搞，node也写的美滋滋，crud非常嗨皮。结果就在上周，突然多了个导入导出功能。虽然没做过，但是想一想查一查，应该也搞的定，没想到，一搞就是一周。今天终于弄好了，所以赶紧做个笔记，完整的记录下来，为自己整理思路，希望也能帮到后来的人。相关技术栈：Reactant DesignEggMongoDB。使用库：xlsx： 生成，解析excle...
2019-09-05 16:43:09
3054
8
原创 新遇到的神器--Tmux
又是一个之前从没听过的玩意，最近真的是疯狂长见识！之前三年明明都只是一个小前端，现在突然接触后端，看啥都新鲜，看啥都不会。前段时间项目提测，再测试环境的命令行里同时用了tmux，看的我一脸懵逼，赶紧请教了一下，然后百度了几个常用快捷键，算是知道咋回事儿了，今天周末，抓紧时间补一下，了解一波参考资料：有可能是最简单的tmux入门教程tmux简洁教程Tmux 快捷键 & 速查表...
2019-09-01 15:43:50
215
原创 在Egg中使用MongoDB及Mongoose
新公司的项目中用了Egg和MongoDB及mongoose。最近有空来系统的梳理一下。参考资料&扩展阅读：Mongoose中文文档mongoose学习笔记（超详细）Mongoose中文文档-Mongoose的APIEgg链接MongoDBEgg 使用 egg-mongoose来方便的跟数据库进行链接// eggProject/server/config/config....
2019-08-19 15:09:04
2259
1
原创 MongoDB入门笔记
前段时间赶鸭子上架，前端的我也开始全栈了。用了egg+MongoDB来开发后端内内容。边做边学了解了个大概，这两天趁着有空，刷刷文档，系统的过一遍，争取快速把常用的80%内容都搞定。参考资料：菜鸟教程MongoDB官网MongonDB简介MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB...
2019-08-16 16:32:42
165
原创 TypeScript
之前很早就听说过TypeScript，也看过好几遍文档。但是如果不在实际项目中使用，总是没有实感，看完就忘了。这次新公司的项目就是ts，写的非常开心，确实感觉ts写出来的代码要稳固健壮的多，一切都很可控，非常舒服。目录介绍参考资料常见用法原始数据类型任意值类型推论联合类型对象的类型 -- 接口 interface数组的类型函数的类型类型断言介绍TypeScript（一下简称TS）是由微...
2019-07-31 15:30:53
300
原创 Moment.js
Moment 可以同时在浏览器和node环境中使用。是一个非常好用的时间日期处理类库。在新公司的项目中，大量使用Moment来处理时间日期，非常方便好用。参考资料：官方文档使用详情见官方文档，Moment基本可以代替Date，获取任意时间，时间格式化，时间日期计算，比较，都非常方便。常用方法：// 取当前时间moment();// 取当日开始时间moment().star...
2019-07-30 17:54:13
959
原创 BigNumber.js
在新公司的第一个项目是区块链相关的管理后台和交易所，其中就涉及了很多的计算问题。而JavaScript因为存在计算的精度问题，所以直接计算就可能会导致各种各样的bug，为了解决这个问题，就要使用BigNumber.js这个库。BigNumber.js是一个用于任意精度计算的js库。可以在 官方文档 的console中测试使用。也可以通过npm install bignumber.js --s...
2019-07-30 16:04:42
10890
原创 最近学到的新东西
目录为啥两个多月没写博客了关于新公司最近学到的新东西写在最后为啥两个多月没写博客了前段时间忙着面试跳槽，后来终于在6.13号入职了新公司–知道创宇。关于新公司之前的跳槽主要是想要进入更大的团队提升自己，希望能接触node等等我一直很想学习的东西。面试知道创宇的时候，面试官说这边就是node，刚好跟我的愿望不谋而合，后来也就顺利入职了。想想也很不容易了，从0开始自学，第一家公司只有我一个前...
2019-07-29 18:48:37
244
原创 浏览器缓存机制学习
之前对浏览器缓存一直没什么了解，直到工作中遇到了一些相关需求。感觉自己的知识不论是深度还是广度都还差得远，都要一一补全。这次就来了解一下浏览器缓存的相关机制。参考资料：实践这一次,彻底搞懂浏览器缓存机制浏览器缓存机制浅析前端优化：浏览器缓存技术介绍浏览器缓存的作用及原理浏览器在打开页面时需要向服务器请求各种资源，但如果每次打开、刷新都去请求，不仅服务器压力大，显示速度也慢，体...
2019-05-08 10:50:14
267
原创 前端错误监控与错误日志
平时工作中没怎么接触到这部分，对它的了解也零零碎碎的。今天看了几篇文章，算是有个完整的认识了，在这里总结记录一下。项目上线之后肯定无法避免所有的bug，有些bug出现后开发人员并不知道，有的知道了缺无法快速准确的修复。这时候就需要在代码层面去处理bug，一是方便debug，二则是通过错误处理防止程序崩溃。参考资料：前端错误日志收集方案前端错误监控与上报Vue SPA项目 + S...
2019-05-05 16:32:07
1221
原创 React Hooks 入门
之前就听过React的新特性Hooks，今天有空来学习了解一蛤~参考资料：React中文文档概述Hooks 是一项新功能提案，可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。目前还在讨论中。简单来说，这个提案对React的函数式组件进行了加强。之前在React中的三种组件及其区别中提高过：函数式组件没有生命周期和内部状态，所以一般只做单纯的渲染。...
2019-04-24 15:49:05
302
转载 JavaScript设计模式
转载自：JavaScript设计模式之前看了 JavaScript 中常见设计模式整理 这篇文章，这里我也把平时整体的设计模式分享一下。设计模式是解决一类问题的模板，为软件设计中常见的问题提供解决方案。JavaScript 是一种弱类型、动态的、基于原型的语言，所以它可以以很简单的方式去实现一些模式。切记不要去套用后台语言的设计模式，这往往会丢失 JavaScript 这门语言的动态性和灵活...
2019-04-22 15:43:22
206
原创 requestAnimationFrame学习
之前知道异步有个requestAnimationFrame，但一直没去了解，今天有空学了下，记录一波。参考资料：requestAnimationFrame理解与实践为什么需要requestAnimationFrame传统的 javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题：1. 动画的循时间环间隔...
2019-04-22 14:31:35
241
原创 如何实现数组的map和filter方法
最近经常看到如何实现原生方法的文章，之前自己对于这些并没有特别在意，看了几篇之后发现还是挺有意思的，搞清楚其中的原理比业务代码有趣多了。今天来记录一下数组的map和filter方法参考资料：JS Array.reduce 实现 Array.map 和 Array.filterArray.prototype.myMap在实现map方法之前，有一个要注意的地方在于，map方法有一个很...
2019-04-07 14:35:39
441
原创 JS数组去重
闲来无事，总结一下数组去重的各种思路。当然去重有很多种方法，这里只写几个相对简洁的思路。基本思路做一个空数组A，遍历数组，若A中不存在则放入Afunction uniqeArray (arr) { let result = []; arr.map(item => { if(!result.includes(item)) { result.push(item); ...
2019-04-07 11:07:26
705
原创 组件化和React
组件化和React题目：说一下对组件化的理解jsx的本质是什么jsx和vdom的关系是什么说一下setState的过程阐述自己对react和vue的认识对组件化的理解：1.封装(视图，数据，变化逻辑)。2.复用(props传递)。jsx的本质是什么：jsx跟vue模板一样，都是语法糖，是为了降低学习成本和写代码的难度(相比直接写h函数来说)。最终也是编译成js在浏览器中运...
2019-03-27 17:31:14
189
原创 MVVM 和 VUE
MVVM 和 VUE如何理解mvvm如何实现mvvm是否读过vue源码题目说一下使用jQuery和使用mvvm框架的区别说一下对mvvm的理解vue如何实现响应式vue如何解析模板vue的整个实现流程jQuery和vue的区别：数据和视图分离，解耦（开放封闭原则）以数据驱动视图，只关心数据变化，DOM操作被封装对mvvm的理解mvc（modal, view...
2019-03-27 17:29:24
921
原创 虚拟DOM和Diff算法
虚拟DOM （virtual dom）vdom 是 vue 和 react 的核心，学习他们绕不开vdomvdom比较独立，使用也比较简单如果面试问到了vue和react的实现，免不了问vdom问题：什么是vdom？为何会存在vdom?vdom如何应用，核心API是什么?介绍一下diff算法什么是vdom？为何会存在vdomvirtual dom , 虚拟dom用js...
2019-03-27 17:28:29
343
原创 jQuery 和 zepto中原型的实际应用
jquery 和 zepto 的简单使用zepto 如何使用原型jquery 如何使用原型在jquery中，我们获取不同的dom元素，但他们都有相同的jquery方法(如css(),html(), hide()等)，这些方法就是在原型上的。zepto 和 jquery 中原型的使用<!DOCTYPE html><html lang="en"><hea...
2019-03-27 17:26:29
197
原创 ES6中的Proxy、Reflect以及Vue3.0中的应用原理
Vue3.0中，Even You表示会使用Proxy代替Object.defineProperty来做数据的响应式。对于Object.defineProperty我们已经很熟悉了，之前也写过相关的Vue双向绑定原理（二）访问器属性defineProperty()和发布/订阅模式。我们也知道了使用Object.defineProperty的一些劣势：Object.definePropert...
2019-02-20 17:59:39
2097
原创 数组的reduce方法及其应用
前两天在群里看到一道题，折腾半天没做出来。今天查了查，了解了前因后果，在此整理记录一下。参考资料：MDNredux之compose题目：const fn1 = x => x+1;const fn2 = x => x+2;const fn3 = x => x+3;const fn4 = x => x+4;let Fn = compose(fn1, ...
2019-02-19 18:21:31
1271
原创 React生命周期整理
之前对React的生命周期的理解一直比较浮于表面，今天有空来梳理一下。发现React的新版本对生命周期也做了改动，更有必要搞清楚了。参考资料：React.ComponentReact生命周期[译]如何使用React生命周期方法Mounting阶段constructorconstructor方法在组件建立前被调用：在这个方法里面，应该先调用super(props)，否...
2019-02-18 16:45:13
178
原创 class中的static
参考资料类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。class ClassWithStaticMethod { static staticMethod() { return 'static method has been called.'; }}conso...
2019-02-18 15:51:28
5607
转载 React的受控组件和非受控组件
在HTML当中，像<input>,<textarea>, 和 <select>这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。来源：浅谈React受控与非受控组件非受控组件非受控组件，即组件的状态不受React控制的组件，例如下边这个imp...
2019-02-15 16:53:14
826
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人