Giters

FanFanJUN / DailyLog

记录开发所遇到的点点滴滴

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

梦溪笔谈

【记录开发所遇到的点点滴滴】

开发文档线上API

推荐阅读整理

微前端

工具集

antd 4.0 进行时

官网

Ant Design 4.0 进行时！

Ant Design 4.0 RC released!--更改概览

参加第三届蚂蚁体验科技大会 SEE Conf 2020 是什么体验？

js 系列

image image image

es6 的十大特性
  • Default Parameters（默认参数） in ES6
  • Template Literals （模板文本）in ES6
  • Multi-line Strings （多行字符串）in ES6
  • Destructuring Assignment （解构赋值）in ES6
  • Enhanced Object Literals （增强的对象文本）in ES6
  • Arrow Functions （箭头函数）in ES6
  • Promises in ES6
  • Block-Scoped Constructs Let and Const（块作用域构造 Let and Const）
  • Classes（类） in ES6
  • Modules（模块） in ES6
ES6+常用
  • ES7 的 Array.prototype.includes()
  • ES8 的 async/await 、String padding: padStart()和padEnd() 、 Object.values()
  • ES9 的 Rest/Spread 属性、for await of、 Promise.finally()
  • ES10 的 Array.prototype.flat() 、 Array.prototype.flatMap() 、String的 trimStart() trimEnd()
  • ES11 的 Promise.allSettled 、空值处理及可选链
  • ES12 Promise.any()
其他js相关
其他相关
  • 跨域 image
  1. 九种跨域方式实现原理（完整版）
  2. 浏览器同源政策及其规避方法
  3. 跨域资源共享 CORS详解

CSS、HTML系列

React 系列

Virtual DOM 与diff算法 

复杂视图情况下提升渲染性能,因为虚拟DOM+Diff算法可以精准找到DOM树变更的地方,减少DOM的操作(重排重绘)

1. init()设置模块.创建patch()函数
2. 使用h()函数创建JavaScript对象(Vnode)描述真实DOM
3. patch()比较新旧两个Vnode
4. 把变化的内容更新到真实DOM树

React生命周期

React性能优化

  • shouldComponentUpdate、PureComponent、React.memo(避免不必要的渲染)
  • 使用 React Fragments 避免额外标记
  • 懒加载组件(react中使用到了Suspense和 lazy组件实现代码拆分功能)
  • dom节点唯一key
  • 15 分钟学会 Immutable
  • immer —— 提高React开发效率的神器
  • 避免使用内联函数(使用内联函数，则每次调用render函数时都会创建一个新的函数实例)
  • React.memo() 和 useMemo() 的主要区别
React.memo() 是一个高阶组件，我们可以使用它来包装我们不想重新渲染的组件，除非其中的 props 发生变化。
useMemo() 是一个 React Hook，我们可以使用它在组件中包装函数。我们可以使用它来确保该函数中的值仅在其依赖项之一发生变化时才重新计算。
Ant Design 组件库的官方教程，由 Ant Design 开发团队负责编写
在 Raect 中使用 Echarts
React Router 跳转及页面传值
React 技术栈学习路线
React 中组件间通信的几种方式
  • 父组件向子组件通信
  • 子组件向父组件通信
  • 跨级组件之间通信 context
  • 非嵌套组件间通信
  • Redux
install events依赖
npm install events --save
使用
import { EventEmitter } from 'events';
export default new EventEmitter();

image

React hooks(React v16.8)

官网解读
阮一峰-React Hooks 入门教程
阮一峰-轻松学会 React 钩子：以 useEffect() 为例
使用 React hook 时父组件如何调用子组件中的方法
ReactHooks
React.memo() 和 useMemo() 的用法与区别
react hooks 万字总结

采坑指南

AntDesign 系列

  • AntD 对 request.js 的封装
  • 对 AntD model 的封装
  • Ant Design Pro 内存溢出（out of memory）
  • Ant Design table 组件分页 pagination
  • Ant Design Table 组件 defaultExpandAllRows={true}不起作用
  • Ant Design modal 的 destroyOnClose 属性-关闭时销毁 Modal 里的子元素
  • Ant Design modal 的 afterClose 属性-modal 完全关闭后的回调
  • 获取文字省略提示
  • 为 AntD pro 配置多个环境
  • 一个页面多个 form 会相互影响
  • form 表单中设置 initialValue 注意
  • React context 高阶运用(父子孙组件传值)
  • AntD Tabs 标签页如何切换标签时立即更新标签内 content 内容(而不是带有缓存内容不改变)
  • 函数式异步请求（request 等）返回的 Promise 对象怎样获取其中的值
  • antd 文件上传下载
  • antd +dva 实现动态获取树形数据表格
  • antd BUG 记录日志

React 组件相关

工具函数系列

  • 公民身份号码正确性判定及程序实现
  • form 表单删除空字符串
  • form 表单转换对象元素数组为字符串
  • js 判空函数
  • 树形结构数据删除空的子级节点
  • Ant Design table 组件分页 pagination
  • 百分数与小数互相转换
  • 金钱格式化三位分
  • 随机生成 16 位
  • AntD 对 request.js 的封装
  • 对 AntD model 的封装
  • js 去除空格 12 种方法
  • JavaScript 常用工具方法封装

开源系列

推荐 NPM 依赖模块系列

install

$ npm install --save sockette

Usage

const Sockette = require('sockette');

const ws = new Sockette('ws://localhost:3000', {
  timeout: 5e3,
  maxAttempts: 10,
  onopen: e => console.log('Connected!', e),
  onmessage: e => console.log('Received:', e),
  onreconnect: e => console.log('Reconnecting...', e),
  onmaximum: e => console.log('Stop Attempting!', e),
  onclose: e => console.log('Closed!', e),
  onerror: e => console.log('Error:', e)
});

ws.send('Hello, world!');
ws.json({type: 'ping'});
ws.close(); // graceful shutdown

// Reconnect 10s later
setTimeout(ws.reconnect, 10e3);

webpack

webpack 插件

SpringBoot 走过的坑

IDEA 插件

Mybatis 工具：Free Mybatis plugin(方便进行 Mapper 接口和 XML 文件之间跳转)
Maven 辅助神器：Maven Helper(解决 JAR 包冲突)
阿里代码规约检测(GitHub:https://github.com/alibaba/p3c)

服务器相关

Redis

DOCKER

Other

maven--plugin--pom--Usage
Github 远程仓库和本地文件的关联
echarts 自定义工具全屏
自建 ssr 服务器教程
张鑫旭 SVG 小图标
mybatis 逻辑分页与物理分页

sql 系列

查看 mysql 版本

mysql> select version();
+------------+
| version()  |
+------------+
| 5.7.21-log |
+------------+
1 row in set (18.09 sec)

触发器

CREATE TRIGGER `T` BEFORE INSERT ON `srm_source_list_line_copy1`
FOR EACH ROW begin
set new.srm_source_list_num=concat('IMH',lpad(((SELECT substring(srm_source_list_num,4,10) from srm_source_list_line_copy1 where srm_source_list_num=(select srm_source_list_num from srm_source_list_line_copy1  order by srm_source_list_num desc limit 1))+1),10,0));
end;

when then

UPDATE srm_purchase_info_record_line_copy1 SET
created_date = NOW(),last_edited_date = NOW(),tenant_code = '10000028',
state = 'DRAFT',
material_category_code = '08',
material_category_id = '2FE07A4C-9190-11EA-A7EB-0242C0A84404',
material_category_name ='生产性物资',
purchase_info_remark = '历史数据',
id = UUID(),
project_category_code = case record_type_code when '0' Then '0' when '2' Then 'K' when '3' Then 'L' end;

迁移表字段数据（列名数一样）

INSERT INTO  user2(`u_id`,`name`) SELECT `id`,`name`  FROM user;

length concat

UPDATE srm_source_list_line SET
srm_source_list_item_num = CONCAT('000',srm_source_list_item_num,0) WHERE LENGTH(srm_source_list_item_num) = 1;

UPDATE srm_source_list_line SET
srm_source_list_item_num = CONCAT('00',srm_source_list_item_num,0) WHERE LENGTH(srm_source_list_item_num) = 2;

索引

 ALTER table baf_sap_material_group_map_purchase_group ADD INDEX business_unit(business_unit);

函数

  • MID()函数 - 用于得到一个字符串的一部分 这个函数被 MySQL 支持，但不被 MS SQL Server 和 Oracle 支持。在 SQL Server， Oracle 数据库中，我们可以使用 SQL SUBSTRING 函数或者 SQL SUBSTR 函数作为替代。
SELECT MID(ColumnName, Start [, Length]) FROM TableName;

mysql> SELECT MID('NowaMagic', 5, 5);  -Magic

查看执行进程

show processlist;
杀死进程 kill id

导出数据库表详细设计

SELECT
COLUMN_NAME 字段名称,
COLUMN_TYPE 数据类型,
IF(IS_NULLABLE='NO','是','否') AS '必填',
COLUMN_COMMENT 注释
FROM
INFORMATION_SCHEMA.COLUMNS
where
-- Finance为数据库名称，到时候只需要修改成你要导出表结构的数据库即可
table_schema ='srm_wa'
AND
-- user为表名，到时候换成你要导出的表的名称
-- 如果不写的话，默认会查询出所有表中的数据，这样可能就分不清到底哪些字段是哪张表中的了
table_name = 'srm_calibration_head_info'


查询表所有信息
select * from INFORMATION_SCHEMA.COLUMNS where table_schema = "srm_wa" and table_name = "srm_calibration_head_info";


SELECT
COLUMN_NAME 字段,
DATA_TYPE 类型,
CHARACTER_MAXIMUM_LENGTH 长度,
COLUMN_COMMENT 注释,
column_key 索引,
EXTRA 外键
FROM
INFORMATION_SCHEMA.COLUMNS
where
-- Finance为数据库名称，到时候只需要修改成你要导出表结构的数据库即可
table_schema ='srm_wa'
AND
-- user为表名，到时候换成你要导出的表的名称
-- 如果不写的话，默认会查询出所有表中的数据，这样可能就分不清到底哪些字段是哪张表中的了
table_name = 'srm_calibration_head_info';

About

记录开发所遇到的点点滴滴

Languages

Language:JavaScript 58.6%Language:HTML 36.1%Language:CSS 5.3%