Loadsh 常用方法总结以及在vue中使用Loadsh

Loadsh 常用方法总结以及在vue中使用Loadsh

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。处理复杂数组，对比等可以直接采用该库，也方便快捷。

官方网站

https://www.lodashjs.com/

一. 在vue中使用Loadsh中的节流函数 debounce和throttle

.throttle是lodash中的节流函数,.debounce是lodash中的防抖函数。

具体作用可以直接看官方文档。

在vue中具体怎么用

import _ from 'lodash'
export default{
 methods:{
    click:_.throttle(function(){
            console.log('test')
            console.log(this)
    },1000)
 }
}
import _ from 'lodash'
export default{
 methods:{
 onUpdateNote: _.debounce(function() {
      this.updateNote({ noteId: this.curNote.id, title: this.curNote.title, content: this.curNote.content })
        .then(data => {
          this.statusText = '已保存'
        }).catch(data => {
          this.statusText = '保存出错'
        })
    }, 300)
}

在lodash的throttle，debounce方法中,可以直接使用function,而且无需重新指向this,在函数内部中已经做了apply,所以这里的this指向的就是vue实例,对已有函数的外面包一层.throttle/.debounce就可以了。

二.另外一种方法在vue中使用debounce和throttle

1、安装

cnpm i lodash -S

2、方法一 全局使用

• 引入

import _ from 'lodash'
Vue.prototype._ = _

• 使用

this._.debounce(this.handleClick,1000,false)

3、方法二 局部使用

• 引入

let _ = require('lodash')

• 使用

_.debounce(this.handleClick,1000,false)

4、vue单文件组件中使用

里面分别有我自己写的debounce函数和lodash的debounce函数，效果一样！

<template>
  <div>
    <el-button @click="myDebounce">我的debounce</el-button>
    <el-button @click="_debounce">lodash的debounce</el-button>
  </div>
</template>

<script>
import { debounce } from '@/utils/util'
let _ = require('lodash')
export default {
  methods: {
    handleClick1() {
      console.log(`真正执行的函数，次数比较少：handleClick1.....`)
    },
    handleClick2() {
      console.log(`真正执行的函数，次数比较少：handleClick2.....`)
    },
    myDebounce() {
      console.log(`myDebounce.....`)
      this.DB()
    },
    _debounce() {
      console.log(`_debounce.....`)
       this._DB()
    }
  },
  created() {
    this.DB = debounce(this.handleClick1, 1000, false)
    this._DB = this._.debounce(this.handleClick2,1000,false)
  }
}
</script>

注意：以前我是在data选项里面定义，然后再methods里面初始化函数，但是需要判断‘如果有了就不赋函数，如果为空就赋’，发现比较麻烦；后来直接在created钩子里面定义，就很方便了！或者挂载之后。

三. Loadsh学习笔记

有多年开发经验的工程师，往往都会有自己的一套工具库，称为utils、helpers等等，这套库一方面是自己的技术积累，另一方面也是对某项技术的扩展，领先于技术规范的制订和实现。

Lodash就是这样的一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前ECMAScript尚未制订的规范，但同时被业界所认可的辅助函数。莫倩每天使用npm安装Lodash的数量在百万级以上，这在一定程度上证明了其代码的健壮性，值得我们在项目中一试。

模块组成

Lodash听得辅助函数主要分为以下几类，函数列表和用法实力请查看Lodash的官方文档：

• Array， 适合于数组类型，比如填充数据、查找元素、数组分片等操作
• Collocation， 适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
• Function， 适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
• Lang， 普遍适用于各种类型，常用于执行类型判断和类型转换
• Math， 使用与数值类型，常用于执行数学运算
• Number， 适用于生成随机数，比较数值与数值区间的关系
• Object， 适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
• Seq， 常用于创建链式调用，提高执行性能（惰性计算）
• String， 适用于字符串类型
• lodash/fp 模块提供了更接近函数式编程的开发方法，其内部的函数经过包装，具有immutable、auto-curried、iteratee-first、data-last（官方介绍）等特点。
• Fixed Arity，固化参数个数，便于柯里化
• Rearragned Arguments， 重新调整参数位置，便于函数之间的聚合
• Capped Iteratee Argument， 封装Iteratee参数

在React + Webpack + Babel(ES6)的开发环境中，使用Lodash需要安装插件babel-plugin-lodash并更新Babel配置文件：

npm install --save lodash
npm install --save-dev babel-plugin-lodash

更新Bable的配置文件 .babelrc:

[](javascript:void(0)