Wangtiegang Blog

世界纷纷扰扰喧喧闹闹，什么是真实

mybatis-plus自动填充被坑记录

在新搭建的后端应用中，我使用了 mybatis-plus 框架作为扩展，减少 sql 的书写，提升开发效率，其中有个功能很好用，就是自动填充。在项目中，我们的后台表一般会具有一些标准字段，作为强制建表规范，比如 object_version_number 乐观锁版本 create_by 创建者 creation_date 创建时间 last_updated_by 最后更新...

Posted by wangtiegang on May 31, 2020

基于antd实现懒加载Select

背景及设计 在前端中，<Select> 组件是使用非常频繁的一个组件，antd 的 Select 非常美观好用，但是在数据量非常大的场景下，也必须进行一些封装才能有好的体验。有些业务数据可以高达几万，比如员工，供应商等，虽然 Select 支持虚拟滚动技术，可以轻松加载这么大的数据，但是一次性向后端请求这么多数据非常耗时，造成用户等待，体验非常不好。如何解决这个问题呢？ 我们...

Posted by wangtiegang on May 10, 2020

设计模式之代理模式

《Head First 设计模式》阅读笔记

代理模式在平时工作中非常有用，各种框架都使用了代理模式，本书对代理模式的定义为 代理模式为另一个对象提供一个替身或占位符以控制对这个对象的访问 代理跟被代理的对象具有一样的方法和接口，只是代理不做具体功能的实现，被调用时会调用被代理对象的方法去做具体操作。代理模式有各种各样的变体，这些变体几乎都和“控制访问”的做法有关，以下为几种不同角度不同作用的举例 正向代理和反向代理 这...

Posted by wangtiegang on April 25, 2020

ES6之Proxy学习笔记

阮一峰《ECMAScript 6 入门》书籍学习笔记

概述 Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 语法 1 2 3 4 // 使用 new 创建一个 Proxy // t...

Posted by wangtiegang on April 12, 2020

antd@4升级

在看到 antd@4 发布后，我立马就想升级了，因为它提供了更好的性能，select ，table 和 tree 已经全面支持了虚拟滚动，这个诱惑实在是太大了，毕竟要我自己解决性能问题，实在是有点难。于是马上跟随官方教程升级，升级过程很简单，但是我也碰到了一些问题，一并记录下来。 首先安装 codemod-v4 1 2 # 通过 npx 直接运行 npx -p @ant-design/c...

Posted by wangtiegang on March 28, 2020

设计模式之迭代器与组合模式

《Head First 设计模式》阅读笔记

迭代器模式 设计模式这一章的内容很长，其中迭代器模式很常用，而组合模式却很少碰到，首先是迭代器模式，经常在 java 集合类中使用迭代器，但是却不知道这是一种设计模式，也没有去关注底层实现，看完书本之后，有种原来是这一的感觉。 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露其内部的表示。 迭代器模式可以很好的隐藏内部的数据结构，让用户在遍历集合的时候与内部数...

Posted by wangtiegang on March 22, 2020

设计模式之状态模式

《Head First 设计模式》阅读笔记

状态模式允许对象在内部状态改变时改变它们的行为，对象看起来像修改了它的类。 简单来说就是有些对象的行为会因为状态不同而不同，比如…想不到合适的例子，拿书上的例子来说就是，假设有个自动售卖糖果机，存在投币，退币，出货几种操作，仔细分析，就可以知道这中间存在几种状态，并且之间具有转换关系。 用户可以通过投币、退币、出货几种操作改变状态，重点是这三种操作在任何状态下都是可以进行的，...

Posted by wangtiegang on March 15, 2020

React父组件主动调用子组件函数

前几天在写一个比较复杂的表单页面时，碰到了一些难题，页面总体是一个大表单，这个大表单根据条件组合其他几个小表单，提交时，分别收集小表单的值，然后校验通过之后提交。这就存在一个问题，在大表单上点击提交按钮时，如何获得各个子表单的值。在我有限的 React 认知下，我只知道组件之间通讯，通过父组件传递函数到子组件，然后子组件调用返回信息，父组件没办法主动调用。但是显然是有办法实现父组件主动调用的...

Posted by wangtiegang on March 7, 2020

Ant Design可编辑单元格表格改进版

基于ant design@4 版本

之前在空闲的时候按照 antd 官方的可编辑单元格的示例改进实现过一个 demo ，然后马马虎虎能用，自己也弄明白了实现的原理。然后没有实际的项目，就没再继续改进了。 最近真的要用 antd pro 做项目了，突然发现几个月不看，已经变成 hook 风格了，前端变化也太快了，有点看不懂，又花了些时间学习才找回来感觉。。然后在实际项目中需要可编辑单元格，又去 ant 官网看最新 @4 版本的...

Posted by wangtiegang on March 1, 2020

ES6之async函数学习笔记

《ECMAScript6 入门教程》http://es6.ruanyifeng.com/

在学习 async 之前，必须了解 Promise 和 Generator，这两个是基础。 Promise简单回顾 Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。 Promise 简单来说就是一个容器，里面保存着一个未来才会结束的事件（通常是个异步操作）的结果，Promise 对象有三种状态：pending（进行中）、fulfilled（已成...

Posted by wangtiegang on February 22, 2020

FEATURED TAGS
nginx java 设计模式 JavaScript linux Javascript antd Oracle React react Linux TypeScript
ABOUT ME

前端靠猜 后端靠抄

FRIENDS