阅读 3083

知道这几个npm包,开发效率提升好几倍

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

前言

在日常开发中,因为需求问题,往往会自己造一些轮子,熟不知许多大牛已经创造了各种优秀的开源工具,所谓站在巨人的肩膀上会看的更远,学习使用这些代码不但可以节省时间提高开发效率,还以看一下源码学习前辈的编程思想,受益匪浅,以下是我总结的在日常开发中常用到的一些工具包

Moment.js

moment 是一个支持多语言的日期处理类库

官方文档

安装

npm install moment
复制代码

引用案例


import moment from 'moment';

moment().format('MMMM Do YYYY, h:mm:ss a');
复制代码

Day.js

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。

安装

npm install dayjs
复制代码

引用案例

import dayjs from 'dayjs';

dayjs().format()
复制代码

underscorejs

Underscore 是一个 JavaScript 库,它提供了一大堆有用的函数式编程助手,而无需扩展任何内置对象。

Underscore 提供了 100 多个函数,支持您最喜欢的日常功能助手:map、filter、invoke — 以及更专业的好东西:函数绑定、javascript 模板、创建快速索引、深度相等性测试等。

官方文档

安装

npm install underscore
复制代码

使用

import _, { map } from 'underscore';
复制代码

lodashjs

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

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

官方文档

安装

npm i lodash
复制代码

引用案例

import _ from 'lodash'

var objects = [{ 'a': 1 }, { 'b': 2 }];
// 深拷贝
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
复制代码

number-precision

使用javascript精确地执行加法、减法、乘法和除法运算

文档

安装

npm i number-precision
复制代码
import NP from 'number-precision' // plus(+) minus(-) times(*) divide(/) round

NP.plus(1.111,2.222)
复制代码

accounting

accounting.js是一个用于数字、货币和货币解析/格式化的小型 JavaScript 库。它是轻量级的,完全可本地化的,没有依赖关系,并且在客户端或服务器端工作得很好。

安装

npm i accounting
复制代码

引用案例

import account from 'accounting' // 小数处理

accounting.formatMoney(12345678); // $12,345,678.00
复制代码

Animate.css

Animate.css是一个随时可用的跨浏览器动画库,可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。

官方文档

安装

npm install animate.css
复制代码

引用使用

import 'animate.css';

<h1 class="animate__animated animate__bounce">An animated element</h1>
复制代码

WOW.js

滚动时显示动画。结合Animate.css 轻松自定义动画设置:样式、延迟、长度、偏移、迭代...

官方文档

使用案例

<link rel="stylesheet" href="css/animate.css">

<script src="js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

<div class="wow bounceInUp">
  Content to Reveal Here
</div>
复制代码

NPM包

安装

npm install wowjs
复制代码
  • HTML
<section class="wow animate__wobble">11111111111111</section>
<section class="wow animate__heartBeat">2222222222222</section>
复制代码
  • js
import "animate.css";
import { WOW } from "wowjs";

···
···

this.$nextTick(() => {
  let wow = new WOW({
    animateClass: "animated",
    offset: 100,
    callback: function(box) {
      console.log("WOW: animating <" + box.tagName.toLowerCase() + ">");
    }
  });
  wow.init();
});
复制代码

Vue Baidu Map

基于 VUE 2.x 的百度地图组件

官方文档

安装

npm install vue-baidu-map --save
复制代码

引用案例

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})




<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>
复制代码

dataV

组件库基于Vue ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用:

  • 边框

带有不同边框的容器

  • 装饰

用来点缀页面效果,增加视觉效果

  • 图表

图表组件基于Charts封装,轻量,易用

  • 其他

飞线图/水位图/轮播表/..

官方文档

npm install @jiaminghi/data-view
复制代码

使用

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

<dv-border-box-1>dv-border-box-1</dv-border-box-1>
复制代码

axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

官方文档

安装

npm install axios

复制代码

使用

import axios from 'axios'   

axios.get('/user)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
复制代码

countUp.js

CountUp.js 是一个无依赖的轻量级 JavaScript 类,可用于快速创建以更有趣的方式显示数字数据的动画。

官方文档

安装

npm install countup.js

复制代码

使用

import { CountUp } from 'countup.js'; 

let demo = new CountUp('myTargetElement', 6964);
if (!demo.error) {
    demo.start();
} else {
    console.error(demo.error);
}
复制代码

结束语


非常感谢各位帅哥美女们能看到这里,如果这个文章写得还不错或者对你有一点点帮助,求点赞求关注求分享

「同时也欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边,只有评论就有机会获取以下奖品,抽奖详情见活动文章」

抽奖礼物:掘金徽章、拖鞋、马克杯、帆布袋等,随机发放

文章分类
前端
文章标签