- 博客(150)
- 收藏
- 关注
RSS订阅原创 [你需要了解的中间件]阅读koa-compose后的感悟
前篇关于compose函数对于学过函数编程一定不陌生。在 redux 中也有应用。下面我们来实现一个 compose。场景:我们有三个函数,现在想要实现 1+2+3+4 结果。const addOne = (num: number) => { console.log('addOne input value', num); return num + 1;};const addTwo = (num: number) => { console.log('addTwo input v
2021-03-26 21:06:06
294
原创 [面试基础题]控制红绿灯
js版 实现红绿灯题目:默认情况下，红灯亮20秒，并且最后5秒闪烁绿灯亮20秒，并且最后5秒闪烁黄灯亮10秒，次序为：红-绿-黄-红-绿-黄灯的个数、颜色、持续时间、闪烁时间、灯光次序都可配置，如：lights=[{color: ‘#fff’, duration: 10000, twinkleDuration: 5000}, … ]js版function sleep(duration) { return new Promise((resolve) => { setTimeo
2021-03-26 12:44:56
638
原创 [Hox库状态管理思考 二] 类实现组件的数据订阅
上文我们分析了hox 如何将 custom hooks提升到全局阅读hox对状态管理的思考类组件的数据订阅前篇首先我们来说下HOC。它是一种复用组件逻辑技巧。高阶组件是参数为组件,返回值为新组件的函数const EnhancedComponent = higherOrderComponent(WrappedComponent);下面举例说明:首先我们有一个Counter类组件如下:interface IProps{ count:number; add:()=>.
2021-03-19 17:58:22
691
原创 [必须要了解的React状态管理]阅读hox对状态管理的思考
阅读 hox对状态管理的思考对于react 状态管理已经是老生畅谈的话题，官方没有给出最佳实践因此市面上关于状态管理的探索从未停止过。本文就 hox库探索做一个总结，建议按本文顺序阅读。开篇组件状态定义对于 hooks推出之后,对于状态定义也更加灵活，下面关于组件定义状态如下:function Counter() { const [count, setCount] = useState(0) return ( <div> <p>count:{cou
2021-03-15 17:50:29
777
2
原创 Typescript 实践中问题总结
文章目录关于类型收缩类型断言类型守卫双重断言常用工具函数PartialReadonlyRecordPickOmitExcludeExtractReturnTypeUnknown vs Any区别Void vs Never 区别Type vs Interface 区别关于类型收缩摘取案例出处类型断言interface Foo { bar: number; bas: string;}const foo = {} as Foo;foo.bar = 123;foo.bas = 'he
2021-03-12 15:20:41
458
原创 [需要了解的] node模块加载浅析
node模块加载浅析通过分析require 加载模块流程,实现简易版本,本文环境 node v15.4.0调试数据// main.jsrequire('./test');// test.jslet a=1;console.log(this===module.exports,'this');module.exports=a;** 提示: vscode 断点调试要进入源码文件需要将 launch.json 中 skipFiles文件注释。 // "skipFiles": [ //
2021-03-04 00:07:10
263
2
原创 promsie实现与并发队列控制解析
源码地址从一个简单案例讲起promise 基本概念????console.log('1. start');const promise=new Promise((resolve,reject)=>{ console.log('2. enter Executor'); resolve('hello promise');})promise.then(res=>{ console.log(res,'success'); console.log('4. resolve
2021-01-24 20:33:22
535
翻译 【需要了解的FLIP】FLIP动画在 react中的应用
本文翻译自 FLIP animation in react[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a4YHrSjn-1604052655260)(https://github.com/aholachek/react-flip-toolkit/raw/master/example-assets/listanimations.gif)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-21L53RZZ-1604052655262)(htt.
2020-11-01 23:17:24
1120
原创 React项目中 那些实用的TS技巧
⚠️⚠️⚠️ 文章来源与网络中知识总结与提炼，想要了解更多点击文末中链接自行了解文章目录组件默认值联合类型应用函数组件中应用范型渲染children自定义hooks返回值links组件默认值//function componenttype GreetProps = { age: number } & typeof defaultProps;const defaultProps = { age: 21,};const Greet = (props: GreetProps) =&.
2020-09-06 22:03:45
3509
原创 Redux源码学习篇(二) -- react-redux实现
本文会逐步探索redux到应用分为3个系列redux 实现react-redux 实现redux中间件的应用与实现文章目录作用核心实现ProviderConnect反思作用它帮助我们连接UI层和数据层。即帮我们合并一些重复操作即获取状态getState、修改状态dispatch、订阅更新subscribe。因此提供了两个核心API:Provider: 接收 store,并将其挂载到context上，目的是为了后代组件获取状态Connect: 将 state、props传递组件并自动.
2020-06-21 20:55:51
230
原创 [你必须掌握的] 多种实现 flatten 函数的方法
arr =[1,2,3,[7,9],[8,9,[10,1]]]使用 flat函数本身arr.flat(Infinity)采用 数组字符串特性arr.join().split(',').map(Number)采用 迭代const flatten=arr=>{ const result=[] while(arr.some(item=>Array.isAr...
2020-05-08 00:14:15
1119
原创 [RxJS 学习之旅] 实现简易RxJS
本片文章主要通过实现RxJs一些简单操作符，来进一步了解RxJs本篇文章可以学到什么?深入了解Observablejs 基础知识(类、原型)揭开Observable面纱Observable 即RxJs世界中的生产者:它其实是一个构造函数并接收订阅者的参数，提供实例方法让其可以订阅(forEach)function Observable(forEach){ thi...
2020-03-28 20:37:46
550
原创 [RxJS学习之旅] 之宏观了解基本概念与使用
文章目录基本概念被观察对象(Observable)pull与push特性核心概念观察者(Observer)Subscription操作符(Operators)SubjectSchedulersmap 实现与分析原型上添加通过 pipe 组合基本概念被观察对象(Observable)pull与pushpull和push 是两种不同的协议,它们描述了数据生产者(Producer)如何数据消费者...
2020-03-19 23:23:44
367
原创 [RxJS学习之旅] 之 操作符
操作符操作符就是在 subscribe接上一个Observer之前的一系列数据处理。并且每一个操作都是返回一个全新的Observable对象的函数。import {Observable} from 'rxjs'import {map} from 'rxjs/operators'const onSubscribe=observer=>{ observer.next(1);...
2020-03-19 23:14:20
790
原创 [你应该掌握的] 基本函数的应用与实现
文章来源于learnrx,最近在学习Rx觉得下面这些函数对于日常开发很有帮助因此:code share you,由于能力有限如有错误轻轻踩～本文目标 ????掌握 forEach、map、filter、concatAll、reduce、zip 实现通过上述函数组合解决实际问题文章目录本文目标 ????forEachmapfilterconcatAll实现 concatAll案例一案例二resu...
2020-03-19 23:09:40
381
原创 [20年必须要了解的] graphQL
什么是GraphQL?新的API标准、它由Facebook 2015年开源声明式数据获取GraphQL服务公开单个端点并相应查询可以与任何编程语言和框架一起使用与 REST对比优势按需获取数据前端的快速产品迭代对于后端请求的数据有更细致的了解强类型系统定义API的功能???? 要了解有关使用GraphQL的主要原因更多信息 click this...
2020-01-08 10:11:33
982
原创 mac实用工具
收藏 mac 好用的工具 ????????????Alfred4: 为mac而生的可通过热键，关键字，文本扩展等功能提高效率。ITerm2:终端管理, ????推荐文章IINA :看视频神奇任何格式都可以播放，功能便捷keka：解压缩欧陆词典: App Store 版本完全免费，用了你就会爱上它Cheat Sheet： 快捷键Spectacle ：窗口排列Itsyca...
2020-01-03 23:22:41
307
原创 告别2019，展望2020
告别过去生活4月4号 搬家4月21号 家里7k6月1号 购买18版 mac pro（13k）6月27号 毕业7月15号 上海览逸离职7月16号 入职 上海得逸信息9月13号 购买sony WI-1000x(1.5k)9月28号 开通 edu frontendMaster 会员半年12月17号 给家里3w学习制订的学习计划分为回顾、探索、务实路线。回顾：该路线主要是巩固...
2019-12-30 23:38:00
684
翻译 React Hooks 版实现 Redux
React-hook版 状态管理使用React Hooks和Context API模拟实现 Redux在React世界中,考虑状态管理时想到第一个想法就是使用Redux库。Redux提供了一个可预测的状态容器来集中应用程序的全局存储。借助connect,mapStateToProps,mapDispatchToProps和bindActionsCreator。Redux可以轻松创建和管理...
2019-12-27 17:37:24
1798
翻译 构建自定义的GraphQL类型
本文翻译一篇 如何去构建自定义 GraphQL类型,如果有帮助请点个赞文章目录创建 server自定义 scalar错误处理GraphQL可以控制我们的schema和API返回值一样。我们可以输入所有内容,如果输入的不是我们期望的则会出现错误。这样会使我们对返回的内容更加自信，这真的太神奇了。但是默认情况下GraphQL只附带一些基本类型。GraphQL基本类型:String、Int、F...
2019-12-26 14:03:05
1177
翻译 使用node+apollo-server + typescript 搭建 GraphQL API
本片文章翻译一篇 使用 apollo-server + typescript 搭建 GraphQL API文章目录为什么要使用 Typescript?利弊创建基本 typescript配置设置项目安装依赖和初始化ts设置 Express,Apollo并创建一个简单的GraphQL API配置 Apollo server创建 GraphQL schema 和 解析器(resolvers)编译代...
2019-12-25 16:31:49
1706
原创 [RxJS学习之旅] 操作符 之 创建类
文章目录操作符创建类同步数据流异步数据流map 实现原型上添加通过 pipe 组合操作符操作符就是在 subscribe接上一个Observer之前的一系列数据处理。并且每一个操作都是返回一个全新的Observable对象的函数。import {Observable} from 'rxjs'import {map} from 'rxjs/operators'const onSubsc...
2019-11-26 23:08:57
169
1
原创 node+ts+express 构建 RESTful API 之 权限认证
使用TypeScript+Express+NodeJS+MongoDB 开发 Web APIs,如有错误可以击提issue ????,如果觉得ok,请点个star ????, 送人玫瑰、手有余香仓库地址 ➡️FE_note文章目录auth登录与注册模块使用JWT令牌进行身份验证auth本文我们采用bcrypt npm 包实现的bcrypt哈希算法,npm install bcryptnpm ...
2019-11-25 22:14:32
1300
原创 node+ts+express 构建 RESTful API 之 错误处理
nodeJs错误处理通过上面的学习,存在一个很大问题,就是我们把操作数据库的错误抛给了client这种实践是非常糟糕的,现在我们封装一个错误处理的中间件。首先，让我们创建一个将用于引发错误的类。src/exceptions/HttpException.tsclass HttpException extends Error{ constructor(public status:n...
2019-11-23 23:04:51
999
原创 node+ts+express 构建 RESTful API 之 连接数据库
引入MongoDBMongoDB安装与入门目录结构├── README.md├── package-lock.json├── package.json├── src│ ├── config│ │ └── index.ts│ ├── controllers│ │ └── userControllers.ts│ ├── models│ │ └── ...
2019-11-23 23:02:41
1163
原创 node+ts+express 构建 RESTful API 之路由构建
构建路由RESTfulGET:用来获取资源POST:用来新建资源(也可以用于更新资源)PUT:用来更新资源DELETE:用来删除资源目录结构├── README.md├── package-lock.json├── package.json├── src│ ├── app.ts│ ├── controllers│ │ └── userControlle...
2019-11-16 23:57:40
1331
1
原创 node+ts+express 构建 RESTful API 之搭建环境
使用TypeScript+Express+NodeJS+MongoDB 开发 Web APIs,如有错误可以击提issue ????,如果觉得ok,请点个star ????, 送人玫瑰、手有余香仓库地址 ➡️文章目录搭建开发环境hello express工具参考文档搭建开发环境npm init -ynpm i express @types/node @types/express body-pa...
2019-11-16 23:56:49
3421
1
原创 [RxJS学习之旅] 之 初识RxJs
函数编程特点纯函数声明式数据不可变性函数响应式编程优势数据流抽象了很多现实问题擅长处理异步操作把复杂问题分解成简单问题的组合Ractive Extension 也叫 ReactiveX,或者简称Rx,指的是实践响应式编程的一套工具。Rx是一个大家族它包含 RxJava、RxPy等，RxJS是Rx用JavaScript语言实现。RxJs擅长处理异步操作,因为它采用推的处...
2019-11-15 21:51:05
918
原创 初识typescript
文章目录小试牛刀类型注解接口运行代码基础篇元祖 Tuple枚举 (enum)AnyVoidNever类型断言接口接口函数类型可索引类型混合类型接口继承类类函数泛型高阶篇类型保护交叉类型索引类型映射类型ts 中相应实现配置文件????????仓库地址小试牛刀npm install -g typescript初始化配置项tsc – init在编辑器，将下面的代码输入到greeter.t...
2019-11-11 22:12:41
578
原创 手把手 ts+webpack 搭建环境
文章目录初始化项目目录结构webpack 配置代码检查规范 eslint 配置测试环境搭建????????项目地址初始化项目创建文件 ts-demonpm init -ynpm i typescript -D初始化 ts配置项npx tsc --init目录结构ts-demo│ README.md │└───build│ │ webpack.base.c...
2019-11-11 21:56:48
1162
原创 css 知识梳理
文章目录css 知识梳理css 基础关于 line-heightborder文字折行伪元素和伪类区别布局floatflex属性Parent (Flex Container)Children (Flex Items)grid属性Parent (Grid Container)Children (Grid Items)css 效果box-showtext-showborder-radiusclip-pa...
2019-11-06 23:37:59
401
原创 react 常用的组件设计模式
本仓库主要是学习 react patterns 搭建的个人仓库，下面是我的一些模式总结仓库地址文章目录基础使用（callback）复合组件(Compound component)进一步讨论render PropsFunction as Child Componentstate Reducer搭建基础toogle 组件添加 state ReducerProvider Pattern高阶组件(...
2019-10-20 22:21:49
709
原创 learning react depth
文章目录parcelinstallusecss in jsinstallusetypescipttest** 可以根据我提交记录去查看相关内容** click here学习原地址和文档地址如下：原仓库地址原文档地址parcelinstallnpm install -g parcel-bundler.babelrc{ "presets": ["@babel/preset-...
2019-10-06 18:09:57
249
原创 React 轮播图的正确打开姿势
下面只关注 react 轮播图中的知识点，并不会去关注样式实现在 components 目录下创建 slideShow文件import React, { Component, Children } from 'react'export default class SildeShow extends Component { interval: any; state = ...
2019-09-17 16:24:17
1363
原创 Redux 源码解读（三）之 中间件机制
什么是中间件中间件其实是对某些功能的一个增强，类似前置处理，在Redux中是将 dispatch 增强改造的函数（中间件）先存起来，然后提供Redux.Redux 责依次执行 这样每一个中间件都对dispatch 依次进行改造，并将改造后的dispatch next 向下传递，即将控制权转移给下一个中间件，完成进一步的增强。redux中使用import { createStore, ...
2019-09-16 19:46:31
330
原创 Redux源码学习篇(一) -- redux实现
关于redux 源码学习系列文章，是通过阅读 《react 状态管理与同构》后的读书笔记和心得。简单入手案例场景: 现在有一个计数器，+、-(或者点赞场景)，现在用redux如何记录呢? import {createStore,combineReducers } from 'redux' //actionconst LIKE = "LIKE";const UNLIKE = "UNL...
2019-09-16 16:18:32
186
原创 轻松搞定 github OAuth认证
OAuth介绍与使用OAuth 是一种授权机制。数据的所有者告诉系统,同意授权第三方应用进入系统,获取这些数据。系统从而产生一个短期的进入令牌(token),用来代替密码,供第三方应用使用。授权方式授权码(authorization-code)隐藏式(implicit)密码式(password)客户端凭证(client credentials)*: 以上应用授权方式在获取令牌之前都...
2019-08-14 00:16:52
1380
1
原创 react 手把手写一个登录界面，还能从中能学到什么？
需求作为一个前端码农，对于登录页面和相关业务已经熟烂于心。今天我们一起从登录出发，看我们能学到什么？提示:下面采用 react+typescirpt 环境书写结果截图如下原始做法从react视角出发，我们可能会在pages文件夹下创建如下结构:sin-in.component.tsximport React from 'react'import './sign-in.styl...
2019-08-13 10:49:26
4280
3
原创 next.js 集成antd 小结
开篇关于next集成Ant Design,网上方案不全也有可能由于next升级导致不能使用，在这里推荐next官方demo案例，如果你想直接使用则下载demo即可，下面是我在摸索中的一些总结。集成import style files首先无论你引入那种UI，在next中是不支持加载.css、.scss、.less文件,下面采用官方方案，以css为例:npm install --save ...
2019-08-12 23:46:02
1433
原创 React 设计模式与最佳实践 个人总结
React 设计模式与最佳实践 个人总结高阶组件高阶组件即接受组件返回组件,形式如下:const HoC=Component=>EnhanceComponent案例: 对获取数据封装对数据获取渲染,我们会这么做…export default class UserList extends Component { state = { list: [] ...
2019-07-19 20:29:31
529
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人