自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 问答 (1)
  • 收藏
  • 关注

原创 基于 react、react-hooks、redux、ts手写ant-design-pro,搭配 node、eggjs、ts、mysql、redis配套api

介绍最开始的时候,我需要一个 react 开发的 amdin 模版,在开源社区寻找了一边之后,比较中意 ant design pro 的 UI,当我一堆操作把 ant desgin pro 的代码拉下来研究之后,发现内容是在太多了,除了 react、redux 之外,还包含了 umi、dva、ant-design/pro-layout 等其它东西,当这些概念和 ts 结合起来使用的时候,作为一个...

2020-01-29 17:41:31 1382

原创 呕心沥血,一文看懂 react hooks 中 useState、useEffect、useContext、useRef、自定义hook

一遍就能学会的 react hooks介绍react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react 特性,而不仅限于 class 组件react hooks 的出现,标示着 react 中不会在存在无状态组件了,只有类组件和函数组件对比存在即合理,hooks 也不例外,它的出现,就代表了它要解决一些 clas...

2019-10-05 17:22:11 36783 9

原创 axios 重构系列之一张图看懂axios源码系列(一)

背景介绍axios 作为一个在前端领域非常重要的 HTTP 请求库,不管是 Vue、React 还是 Node,甚至任何 JS 可以运行的地方,都有可能出现,可以说,axios 是前端绕不过去的一个槛,掌握 axios 的原理、对我们日常开发和技术学习有着非常重要的意义。同时,axios 源码中,有着非常优秀的设计思想,是每一个 前端开发 都应该去学习和借鉴的,了解其中的原理并将其运用到我们代...

2019-08-08 00:06:08 1049

原创 小程序页面通信、数据刷新、事件总线 、event bus 终极解决方案之 iny-bus

背景介绍在各种小程序中,我们经常会遇到 这种情况 有一个 列表,点击列表中的一项进入详情,详情有个按钮,删除了这一项,这个时候当用户返回到列表页时,发现列表中的这一项依然存在, 这种情况,就是一个 `bug`,也就是数据不同步问题,这个时候测试小姐姐肯定会找你,让你解决,这个时候,你也许会很快速的解决,但过一会儿,测试小姐姐又来找你说,我打开了四五个页面更改了用户状态,但我一层...

2019-08-04 21:32:31 3131 1

原创 React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用

React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用场景React 是一个用于构建用户界面的 JavaScript 库,主要负责将数据转换为视图,要保证数据和视图的统一,react 通过 重新 render 来保证数据和视图的统一,但当数据没有变化时,视图重新渲染,就会造成不必要的性能浪费看下面这个例子, import ...

2019-07-12 11:36:51 1699

原创 React 中 lazy, Suspense 以及错误边界(Error Boundaries)的使用

React 中 lazy, Suspense 以及错误边界(Error Boundaries)的使用lazylazy 是 react 提供的组件懒加载的能力,在官方没有支持 lazy之前,在 react 中我们一般使用 react-loadable 来实现组件懒加载的能力,但是,lazy 并不支持 服务端渲染(SSR),所以在使用ssr的情况下,lazy 暂时不能使用React.lazy...

2019-07-09 21:05:40 6504

原创 React 中 Context 和 contextType的使用

React 中 Context 的使用contextContext 提供了一种方式,能够让数据在组件树中传递时不必一级一级的手动传递一般情况下,数据在组件中,要一级一级的传递,单向数据流,比如Parent组件中的theme值,需要在Item组件中使用,就需要我们从Parent中向下传递,但当我们有了Context后,我们就不需要一级一级传递了 Parent(theme=red)...

2019-06-24 19:31:38 10466 1

原创 总结 : js `防抖` 和 `节流`

防抖什么是防抖,一般我们在 input 输入框中输出值,并且向服务端查询数据的时候,如果每次 input 值发生改变,都向服务器发请求的话,难免会资源浪费,并且用户体验并不好,那么我们可以在 input 输入值后延迟一段时间,再发请求。就是 防抖 <body> <input type="text" id="text"> <script&g...

2018-06-08 14:21:45 2313

原创 理解javascript中event loop, 了解其背后的原理

问题今天看到一个问题,什么是 event loop , setTimeout 和 Promise.resolve().then() 的表现为何又不一样,想了想,决定梳理一下相关知识,这里只说浏览器环境,先不考虑 Node 环境中的 process.nextTick()之类的先做个简单测试 console.log(1) setTimeout(() => c...

2018-06-04 23:49:22 2702 1

原创 css 双飞翼布局(flex 、float)和 圣杯布局

双飞翼布局双飞翼布局,是一种页面布局的形象的表达。具体表现形式为 两边顶宽,中间自适应宽度的三栏布局,中间栏要放在HTML文档流的最前,优先渲染实现方式float 浮动流页面基本布局很简单,总共有三栏,中间栏位于文档流的最前面,优先渲染“` // 中间栏,位于文档流的最前面 // 中间栏内容 ...

2018-05-30 10:07:54 2377

原创 ajax 跨域根源分析 (一)

ajax 跨域原因浏览器限制很多人认为,跨域问题时后台造成的,其实不然,真正造成跨域问题的原因是浏览器,浏览器出于安全的考虑,当发现你的请求是跨域的,浏览器会做一些安全校验,当校验不成功时,就会报跨域错误,说白了就是浏览器多管闲事。这个问题具体可以通过浏览器控制台中的network中查看,当发出一个ajax请求时,可以看到后台的响应是 200,说明后台是成功处理这...

2018-03-14 00:43:06 297

原创 js上传图片之前利用canvas压缩和转base64

js上传图片之前利用canvas压缩和转base64简介img-compress-tool 是一个通过js和canvas api 对图片文件进行压缩,实现基于es6的语法,适用于pc端和移动端

2018-02-26 16:36:57 521

原创 node js 之 mongodb dao 封装

github点这里'use strict'//引入mongodbconst MongoClient = require('mongodb').MongoClient;//加载开发配置const config = require('../config/index.js');//创建公用数据库连接const _connectDB = (callback) => { MongoClient

2018-02-08 13:43:18 277

原创 mongo Shell Edition

mongeDB shell Edition 初步学习

2018-01-26 10:29:51 285

原创 解决vue在ie9中的兼容问题

vue 解决ie9的兼容问题当vue遇见ie9的时候,部署到服务器之后,打开居然是一片空白,vue是支持ie9的,这个时候就需要来一波兼容了参考尤大的解答 https://github.com/vuejs-templates/webpack/issues/260首先npm install –save babel-polyfill然后在main.js中的最前面引入babel-po

2018-01-24 12:46:26 42882 1

原创 vue js 幸运大转盘

vue js 幸运大转盘在写一个 vue 项目时,用到了转盘抽奖,发现网上没有现成的 vue 案例,于是将自己写的分享出来,用作交流使用效果 流程页面created时,加载奖品列表,根据和后台预先定义好的字段格式化奖品列表检查是否有抽奖资格 点击抽奖,抽奖次数减一发送http请求,获取后台反馈的奖品在奖品列表中的下标跟据奖品,转盘开始转动,转到相应奖品区域弹出奖品通知modal关闭m

2017-11-07 14:54:21 18917 27

原创 总结:闭包

1. 什么是闭包 即重用一个变量,又保护变量不被污染的一种机制2. 为什么要用闭包 全局变量: 优点: 可重用! 缺点: 易被污染! 局部变量: 优点: 不会被污染 缺点: 不可重用

2017-08-19 00:02:39 426

原创 JS 之排序算法和去重复算法

排序算法1. 冒泡排序数组API : arr.sort()原理:将每个数组元素转为字符串,然后按字符串比较大小。 问题:只能按字符串排序,无法按照数字排序。 解决:自定义比较器函数//升序排列function cmp(a,b) {return a-b};var arr=[4,3,5,6,1];arr.sort(cmp);console.log(arr.sort(cmp));//[1,3,

2017-08-14 21:39:09 771

原创 常用的设计原则和设计模式

常用7大设计原则 MVC

2017-08-11 00:13:48 359

原创 Javascript+Ajax+Node JS +socket .io +mysql 实现在线私人聊天

说明学完Node JS 之后,一直想写一个关于Node的项目,正好了解到html5中的websocket,所以花了一周时间写了这个在线聊天项目,程序还存在一些功能没有实现,后期会继续开发,实现离线消息推送和群聊功能,还想做一些小游戏放到里面,边聊天边玩游戏。实现功能支持注册、登录、在线单人聊天、表情发送、各种文件上传下载、增删好友、聊天记录保存、通知声开关、背景图片切换、更换签名

2017-08-06 20:51:20 1142 3

原创 Ajax 配合node js multer 实现文件上传

说明 最近在做一个聊天软件,支持注册、登录、在线单人、多人聊天、表情发送、各种文件上传下载、增删好友、聊天记录保存、通知声开关、背景图片切换、游戏等功能,因为是学前端的,所以使用ajax和multer来实现,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,

2017-08-06 13:21:02 2565 4

空空如也

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

TA关注的人

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