前端常用的js库

匆_匆
1,054 阅读4分钟

作为一个卑微的小前端，想要快速，稳定，优雅的实现需求功能。一些成熟的js库是必不可少的，我现在分享下我在开发过程中常用的js库，以及一些基本的用法；

1. moment.js

这个相信大家都不会陌生，处理时间格式这块无出其右，官网的用法和示例也十分的清晰，官网传送门。我还是写一点自己常用的几个API，也当下备忘。

引用的时候我一般都会引用moment-timezone这个包，可以处理时区相关的内容；

const moment = require('moment-timezone')

一般情况下表单的时间默认值会是最近七天，最近3个月，或者本月月初至今；

console.log('月初至今', moment().startOf('month').format('YYYY-MM-DD'),'-',moment().format('YYYY-MM-DD'))
console.log('最近7天', moment().subtract(7,'days').format('YYYY-MM-DD'),'-',moment().format('YYYY-MM-DD'))
console.log('最近3月', moment().subtract(3,'month').format('YYYY-MM-DD'),'-',moment().format('YYYY-MM-DD'))
// 月初至今 2020-01-01 - 2020-01-07
// 最近7天 2019-12-31 - 2020-01-07
// 最近3月 2019-10-07 - 2020-01-07

时间的解析或者展示

moment(value).format('YYYY-MM-DD HH:mm:ss')
// 如果传入的时间格式不是标准格式，则第二个参数是当前值的格式,例如20200110
moment(value,'YYYYMMDD').format('YYYY-MM-DD')

时区处理相关，一般与后端交互使用的都是时间戳，因为时间戳是唯一存在的，与时区无关。一般情况下浏览器会判断你所在的时区，然后按照当前时区展示。如果想要设置为某个时区展示，下面的代码可以实现

// 在调用前设置，或者初始化项目的时候设置
moment.tz.setDefault("America/New_York");

2. Numeraljs

这个库在处理金钱，或者数字格式化的时候用的非常顺手，官网文档。

引入使用

const numeral = require('numeral');

基本用法，每3位逗号分隔，保留两位小数；

const string = numeral(1000).format('0,0');
// '1,000'
const string = numeral(1000).format('0,0.00');
// '1,000.00'

3. Lodash

这个不多介绍了，很好很全面的一个工具库，官方文档

4. react-draggable

这是个npm包，之前一个项目在做可自由拖动的组件时，自己监听了一大堆东西然后用起来还不是很方便，最后果断去npms一搜，实现比较好的就是这个包react-draggable简单实用。链接

import React from 'react';
import ReactDOM from 'react-dom';
import Draggable from 'react-draggable';
 
class App extends React.Component {
 
  eventLogger = (e: MouseEvent, data: Object) => {
    console.log('Event: ', e);
    console.log('Data: ', data);
  };
 
  render() {
    return (
      <Draggable
        axis="x"
        handle=".handle"
        defaultPosition={{x: 0, y: 0}}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={this.handleStart}
        onDrag={this.handleDrag}
        onStop={this.handleStop}>
        <div>
          <div className="handle">Drag from here</div>
          <div>This readme is really dragging on...</div>
        </div>
      </Draggable>
    );
  }
}
 
ReactDOM.render(<App/>, document.body);

他这个API文档不是很全，使用的时候有疑惑可以去翻翻源码；

5. styled-components

这是个典型的css in js 的一个类库，可以使用变量，循环等常规的js能力。尤其是在微前端的应用场景下，不会因为css文件的问题引起各子应用的样式错乱问题。文档地址

使用方法官方的文档里介绍的非常清楚。这里提醒两点

  1. styled-component提供了一个设置全局样式的api： createGlobalStyle,一般情况下使用此api来覆盖页面的全局样式，比如说提示框的样式。但是使用的时候注意要在最外层组件使用，否则组件每更新一次就会重新加载这个全局样式，页面体验很不友好；

  2. 刚开始使用时请安装对应的插件使用，提高代码效率，毕竟没有提示来写css还是有点痛苦的；

6. classnames

这是一个与className打交道的库，相信大家在开发中都会遇到这样的问题，组件不同状态下会有不同的样式或者行为，需要命名不同的类名，同时还要支持传入自定义类名。一般情况下会在标签里做一些三目运算或者直接利用js来添加或删除类名，这样又麻烦又难维护。使用classnames轻松解决；

import React, {Compoinent} from 'react';
import cx from 'classnames';

export default class Demo extends Component {
    render() {
    const {className, disabled} = this.props;
        return (
            <a className={cx({
                [className]:!!className,
                'link-disable': !!disabled,
                })}
            >
                Click Me
            </a>)
    }
}

这样既可以接受传下来的类名也可以根据自己的状态来切换类名

avatar
文章
阅读
粉丝