2. 前端常用的node库

Lodash库

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

网址：https://www.lodashjs.com/

下载及引用

npm i --save lodash
import _ from 'lodash'

常用的api

1.  _.isNil(value): (boolean): 如果 value 为null 或 undefined，那么返回 true，否则返回 false.
2.  _.size(collection): 返回collection（集合）的长度，如果集合是类数组或字符串，返回其 length ；如果集合是对象，返回其可枚举属性的个数.
3.  _.isEqual(value, other): (boolean): 如果 两个值完全相同，那么返回 true，否则返回 false.
4.  _.get(object, path, [defaultValue]): 根据 object对象的path路径获取值。 如果解析 value 是 undefined 会以 defaultValue 取代.
    var object = { 'a': [{ 'b': { 'c': 3 } }] };
    _.get(object, 'a[0].b.c');
    // => 3
   _.get(object, ['a', '0', 'b', 'c']);
   // => 3
   _.get(object, 'a.b.c', 'default');
   // => 'default'
5.  _.isNaN(value): (boolean): 如果 value 是一个 NaN，那么返回 true，否则返回 false.
6.  _.cloneDeep(value): 它会递归拷贝 value。（注：也叫深拷贝）.
7.  _.isEmpty(value): 检查 value 是否为一个空对象，集合，映射或者set: (boolean): 如果 value 为空，那么返回 true，否则返回 false.
8.  _.set(object, path, value): 设置 object对象中对应 path 属性路径上的值，如果path不存在，则创建.
Note: 这个方法会改变 object.
    var object = { 'a': [{ 'b': { 'c': 3 } }] };
    _.set(object, 'a[0].b.c', 4);
    console.log(object.a[0].b.c);
    // => 4
    _.set(object, ['x', '0', 'y', 'z'], 5);
    console.log(object.x[0].y.z);
    // => 5
9.  _.assign(object, [sources]): 分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右，随后的下一个对象的属性会覆盖上一个对象的属性.
    function Foo() {
      this.a = 1;
    }
    function Bar() {
      this.c = 3;
    }
    Foo.prototype.b = 2;
    Bar.prototype.d = 4;
    _.assign({ 'a': 0 }, new Foo, new Bar);
    // => { 'a': 1, 'c': 3 }
10.  _.merge(object, [sources]): 该方法类似_.assign， 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过.
Note: 这方法会改变对象 object.
    var object = {
      'a': [{ 'b': 2 }, { 'd': 4 }]
    }
    var other = {
      'a': [{ 'c': 3 }, { 'e': 5 }]
    }
    _.merge(object, other);
    // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
 11.  _.debounce(func, [wait=0], [options=])： 创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法.
 12.  _.throttle(func, [wait=0], [options=]):  创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函  数调用以及 flush 方法立即调用.
 13. shuffle 使用 Fisher–Yates洗牌算法创建一个随机数组。
     import shuffle from 'lodash/shuffle';
     const result = shuffle([1, 2, 3, 4, 5]);
     // result => [2, 5, 1, 4, 3]
 14.orderBy 创建一个数组，按指定顺序排序。
    const items = [
      { name: 'Item A', price: 2 },
      { name: 'Item B', price: 8 },
      { name: 'Item C', price: 4 },
      { name: 'Item D', price: 4 }
    ];
    const result = orderBy(items, ['price', 'name'], ['desc', 'asc']);
    /*
    result => [
      { name: 'Item B', price: 8 },
      { name: 'Item C', price: 4 },
      { name: 'Item D', price: 4 },
      { name: 'Item A', price: 2 }
    ]
  15. difference 创建不包含在其他给定数组的元素的数组。结果数组元素的顺序由第一个数组决定。
      const result = difference([1, 2, 3], [2, 3, 4]);
      // result => [1]
  16. _.uniqueId([prefix='']) 生成唯一ID。 如果提供了 prefix ，会被添加到ID前缀上.
      _.uniqueId('contact_');
      // => 'contact_104'
      _.uniqueId();
      // => '105'

classnames库

在react开发中，我们有的时候需要使用js来动态判断是否为组件添加class（类名），这里我们使用到了classnames.

网址：https://www.npmjs.com/package/classnames

下载及引用

npm install classnames --save
import classnames from 'classnames'

由于react原生动态添加多个className会报错

import style from './style.css'
<div className={style.class1 style.class2}</div>

想要得到最终渲染的效果是：

<div class='class1 class2'></div>

使用

import classnames from 'classnames'
<div className=classnames({
    'class1': true,
    'class2': true
    })>
</div>

其他用法：
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

传入数组对象：

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

传入动态class

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });
classNames({ [`btn-${buttonType}`]: this.flag });
classNames({ [styles.main ]: this.flag })
classNames({
 [styles.tag]: true,
 [styles.red]: sentimentFlag === 1
})
ps: 在react中可以直接在classname内部传入动态class并进行条件判断

文件 图片转换为Base64格式

https://www.css-js.com/tools/base64.html

Moment.js

moment数据，时间戳，和常用时间的相互转换

1 、moment数据—>时间戳
valueOf()方法 同Date对象一样，如果获得的momen数据只需要调用valueOf即可
举例 let data= item.valueOf().
2、moment数据—>正常格式数据
用format()
举例：let data=moment(item).format(‘YYYY-MM-DD’).
3、时间戳—>moment数据
直接调用即可
举例: let data=moment(1568712361000).
4、时间戳—>正常格式数据
let data=moment(1568712361000).format(‘YYYY-MM-DD’).
5、正常数据格式->moment数据
let data=momet(‘2020-12-09’).
6、正常数据格式->时间戳
let data=momet(‘2020-12-09’).valueOf().
let data=new Data(2020,11,9).getTime().

Redux

中文文档: https://cn.redux.js.org/

下载依赖包

npm install --save redux

redux 的核心 API

1.createStore()
作用:
  创建包含指定 reducer 的 store 对象
编码:
  import {createStore} from 'redux' 
  import reducer from './reducer' 
  const store = createStore(reducer)

2.store 对象
1) 作用:redux 库最核心的管理对象 
2) 它内部维护着: state reducer 
3) 核心方法: getState() dispatch(action) subscribe(listener) 
4) 编码:
    store.getState() 
    store.dispatch({type:'INCREMENT', number}) 
    store.subscribe(render)

富文本编辑器 braft-editor

下载：

braft-editor 是一个基于 draftjs 的 Web 富文本编辑器，适用于 React 框架，兼容主流现代浏览器。draft-js 是 facebook 开源的一个富文本编译器，braft-editor 在 draft-js 基础上进行了功能的拓展。
npm install braft-editor --save

import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default function BraftEditorDemo(){
   const [ editorState , setEditorState ] = useState(null)
   const handleEditorChange = ()=>{ /* 富文本  */
   }
   return <div className="box" >
       <BraftEditor
           onChange={handleEditorChange}
           value={editorState}
       />
   </div>
}
BraftEditor 用起来还是很方便的， 支持全屏，拖拽上传 ，代码块 ，引用 等功能

二维码展示 qrcode.react

如果想在 React 项目中，使用链接生成二维码，可以尝试一下 qrcode.react

import QRCode from 'qrcode.react'
export default function Index(){
    return <div>
          <QRCode fgColor={'pink'} size={100}                                   value="https://juejin.cn/user/2418581313687390" />
          <QRCode fgColor={'blue'} size={200} value="https://juejin.cn/user/2418581313687390" />
          <QRCode size={300} value="https://juejin.cn/user/2418581313687390" />
    </div>
}

可视化图表 echarts-for-react

echarts-for-react 是使用 React 基于 echarts 封装的图表库，能够满足基本的可视化图表需求。把 echarts 的配置参数通过 React 组件的 props 形式进行传递配置.

参考官网：https://git.hust.cc/echarts-for-react/examples/simple

项目地址：https://github.com/hustcc/echarts-for-react

npm install --save echarts-for-react
import React from 'react';
import ReactECharts from 'echarts-for-react';  
// or var ReactECharts = require('echarts-for-react');
<ReactECharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>
// 组件的参数简介
1. option (required, object)
这个是核心，是必须的，包含echarts图表的配置项和数据，如标题title、图例legend、提示框tooltip、x轴xAxis、y轴yAxis、series等
2. notMerge (optional, object)
可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
3. lazyUpdate (optional, object)
可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新
4. style (optional, object)
包含echarts图表的div的样式，默认是{height: '300px'}.
5. className (optional, string)
包含echarts图表的div的类名. 可以根据需要自行配置类名，不同类配置不同的css。
6. theme (optional, string)
应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称
(主题对象的格式样例: https://github.com/ecomfe/echarts/blob/master/theme/dark.js).
通过registerTheme注册主题:
// import echarts
import echarts from 'echarts';
// register theme object
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  className='echarts-for-echarts'
  theme='my_theme' />
7. onChartReady (optional, function)
当图表准备好时，将图表作为参数传给回调函数
8. loadingOption (optional, object)
9. showLoading (optional, bool, default: false)
是否加载动画效果
10. onEvents (optional, array(string=>function) )
为图表绑定事件
let onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  onEvents={onEvents} />

拖拽库 React dnd

React dnd 是 React 的一个推拽库，用起来还是比较得心应手的。

• 参考官网：https://react-dnd.github.io/react-dnd/docs/overview
• 项目地址：https://github.com/react-dnd/react-dnd

Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs
复制代码

基本用法

import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)

API参考

当前时间
dayjs()
时间字符串
dayjs('2018-06-03')
时间戳
dayjs(1528361259484)
Date 对象
dayjs(new Date(2018,8,18))
检测当前 Dayjs 对象是否是一个有效的时间
dayjs().isValid()
获取
年 ： dayjs().year()
月 ： dayjs().month()
日 ： dayjs().date()
星期 ： dayjs().day()
时 ： dayjs().hour()
分 ： dayjs().minute()
秒 ： dayjs().second()
毫秒 ： dayjs().millisecond()
设置
dayjs().set('year',2017)
dayjs().set('month',9)
增加时间并返回一个新的 Dayjs() 对象
dayjs().add(7, 'day')
dayjs().add(7, 'year')
减少时间并返回一个新的 Dayjs() 对象
dayjs().subtract(7, 'year')
dayjs().subtract(7, 'month')
返回当前时间的开头时间的 Dayjs() 对象，如月份的第一天。
dayjs().startOf('year')
dayjs().startOf('month')
返回当前时间的末尾时间的 Dayjs() 对象，如月份的最后一天。
dayjs().endOf('month')
dayjs().endOf('year')
格式化
dayjs().format()
dayjs().format('YYYY-MM-DD dddd HH:mm:ss.SSS A')
时间差
dayjs('2018-06-08').diff(dayjs('2017-06-01'),'years')
dayjs('2018-06-08').diff(dayjs('2017-06-01'),'day')
dayjs('2018-06-08').diff(dayjs('2017-06-01'),'hour')
Unix 时间戳 (毫秒)
dayjs().valueOf()
Unix 时间戳 (秒)
dayjs().unix()
返回月份的天数
dayjs().daysInMonth()
返回原生的 Date 对象
dayjs().toDate()
返回包含时间数值的数组
dayjs().toArray()
当序列化 Dayjs 对象时，会返回 ISO8601 格式的字符串
dayjs().toJSON() //2018-06-08T02:44:30.599Z
返回 ISO8601 格式的字符串
dayjs().toISOString() //2018-06-08T02:46:06.554Z
返回包含时间数值的对象
dayjs().toObject()
字符串
dayjs().toString()
检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之前
dayjs('2018-06-01').isBefore(dayjs('2018-06-02'))
检查一个 Dayjs 对象是否和另一个 Dayjs 对象时间相同
dayjs().isSame(dayjs())
检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之后
dayjs().isAfter(dayjs())

qs

一个轻量的 url 参数转换的 JavaScript 库

npm install qs

基本用法

import qs from 'qs'
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

js-cookie

一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie

基本用法

import Cookies from 'js-cookie'
Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'
Cookies.get() // 获取所有的Cookies
Cookies.remove('name') // 删除cookie

flv.js

bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。

npm install flv.js

基本用法

<video autoplay controls width="100%" height="500" id="myVideo"></video>
import flvjs from 'flv.js'
// 页面渲染完成后执行
if (flvjs.isSupported()) {
  var myVideo = document.getElementById('myVideo')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://localhost:8080/test.flv' // 视频 url 地址
  })
  flvPlayer.attachMediaElement(myVideo)
  flvPlayer.load()
  flvPlayer.play()
}

Animate.css

一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

npm install animate.css

基本用法

<h1 class="animate__animated animate__bounce">An animated element</h1>
import 'animate.css'

animejs

一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs

基本用法

<div class="ball" style="width: 50px; height: 50px; background: blue"></div>
import anime from 'animejs/lib/anime.es.js'
// 页面渲染完成之后执行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})

react-infinite-scroll-component

通过上拉加载获取长列表数据—-实现滚动加载列表的效果。

1. 上拉加载更多

默认以body/window为容器

import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import InfiniteScroll from 'react-infinite-scroll-component';
export default () => {
const [list, setList] = useState([]);
const requestList = () => {
setTimeout(async () => {
const response = await request.get('/api/notes/list', {
params: {
name: 12,
},
});
setList(list.concat(response.list));
}, 1000);
};
useEffect(() => {
requestList();
}, []);
return (
<div>
<InfiniteScroll
dataLength={list.length}
next={requestList}
hasMore={false}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
loader={<h4>Loading...</h4>}
>
{list.map((item, index) => (
<div style={{ height: 100 }} key={index}>
{item.id}
</div>
))}
</InfiniteScroll>
</div>
);
};

在指定区域内触发

只需要使用height

    <InfiniteScroll
      ...
        height={400}
      ...
      >

指定滚动的父容器

需要用到scrollableTarget，这时候InfiniteScroll 就没必要指定height

<div
  id="scrollableDiv"
  style={{ height: 300, overflow: 'auto' }}
>
  <InfiniteScroll
    ...
    scrollableTarget="scrollableDiv"
    ...
  >
    ...
</div>

2. 下拉刷新

import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import InfiniteScroll from 'react-infinite-scroll-component';
export default () => {
  const [list, setList] = useState([]);
  const requestList = () => {
    setTimeout(async () => {
      const response = await request.get('/api/notes/list', {
        params: {
          name: 12,
        },
      });
      setList(list.concat(response.list));
    }, 1000);
  };
  useEffect(() => {
    requestList();
  }, []);
  return (
    <InfiniteScroll
      style={{ marginTop: 120 }}
      height={400}
      dataLength={list.length} //This is important field to render the next data
      next={requestList}
      hasMore={true}
      loader={<h4>Loading...</h4>}
      refreshFunction={requestList}
      pullDownToRefresh
      pullDownToRefreshThreshold={30}
      pullDownToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>
          &#8595; Pull down to refresh
        </h3>
      }
      releaseToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>
          &#8593; Release to refresh
        </h3>
      }
    >
      {list.map((item, index) => (
        <div style={{ height: 100 }} key={index}>
          {item.id}
        </div>
      ))}
    </InfiniteScroll>
  );
};

其余的一些属性

https://www.jianshu.com/p/4bb28664ad74 ————- 简书关于此库链接。 官网地址:https://github.com/ankeetmaini/react-infinite-scroll-component