函数库

记录了一些常用的第三方函数库

1. 物流

快速 100

https://api.kuaidi100.com/home

lexiaoyao123

2. 自适应

2.1 监听页面元素大小

ResizeObserver

这是一个能针对某个元素实行大小、位置变化监听的 API，是一个类，它提供了一个观察器，该观察器将在每个 resize 事件上调用，目前 chrome、safari、fireFox(pc)基本支持。

看这个案例

import RcResizeObserver from 'rc-resize-observer';
export default () => {
  const [responsive, setResponsive] = useState(false);
  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 640);
      }}
    >
      <StatisticCard.Group direction={responsive ? 'column' : undefined}>

3. 雪花 ID

Java 生成的 SnowId 是一个：5557-0711-5902-0830-72 的 18 位数值型

完美解决方案-雪花算法 ID 到前端之后精度丢失问题

后台还是用 java 的 Long，不用修改成 String.
后台在给前台传输数据的时候，将 Long 转成 String 类型。
前端传给后台用 string 类型，Spring 自动将 String 转成 Long 类型。

@Configuration
public class JacksonConfig {

  @Bean
  @Primary
  @ConditionalOnMissingBean(ObjectMapper.class)
  public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder)
  {
    ObjectMapper objectMapper = builder.createXmlMapper(false).build();

    // 全局配置序列化返回 JSON 处理
    SimpleModule simpleModule = new SimpleModule();
    //JSON Long ==> String
    simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
    objectMapper.registerModule(simpleModule);
    return objectMapper;
  }

}

4. 数字格式化

参考了这个文档:JS 数据精度以及数字格式化

其中antDesign 使用了 numeral 组件，但是 360 总报错，所以就使用了accounting

安装

npm i accounting

例子：

// 有前缀，小数点后没有
accounting.formatMoney(12345678, '¥', 0);

// 有前缀，小数点后两位，如果没有那么就加零
accounting.formatMoney(12345678, '¥', 2);

accounting.formatNumber(5318008); // 5,318,008

accounting.toFixed(0.615, 2); // "0.62"

5. 日期

官网提出可以替换 Moment.js

为了更好的使用，今后要多使用day.js

npm install dayjs

6. Omit

去除组件中某些不用的字段

import omit from "omit.js";

var data = {
	"carNumber": "85C10783",
	"createTime": 1565248477000,
	"deptName": "营销中心OTO部-项目开发",
	"name": "杨石",
	"passId": 36,
	"passType": 2,
	"remark": " ",
	"type": null
};

console.log(omit(data, ["carNumber", "name"]));
/*
{
	"createTime": 1565248477000,
	"deptName": "营销中心OTO部-项目开发",
	"passId": 36,
	"passType": 2,
	"remark": " ",
	"type": null
}

7. 浏览器缓存

github官网

## 安装
tyarn add store

"store": "^2.0.12",

8. 模板引擎

这个网站展示了常用的模板

懒得用 Java 后台模板了，看到网上推荐了这几个模板引擎，想问一下那个好用。

1. Art-template
2. DOT
3. JavaScript-Templates
4. Template.js
5. Tempo
6. ECT
7. Dot Dom
8. Template7
9. Bunny
10. Squirrelly

doT.js 模板引擎完全使用说明和示例

ant-learning

函数库