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)

Loadsh 常用方法总结以及在vue中使用Loadsh的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. JAVAWEB复习笔记-day02

    1.CSS样式优先级 优先级:由上到下,由外到内.优先级越来越高 2.css选择器 html标签选择器 class选择器(.) id选择器(#) 3.优先级 style属性>id选择器>c ...

  2. python开发微信公众号SDK选择

    1.wechat-sdk sudo pip install wechat-sdk 文档地址:  http://ww2.wechat-python-sdk.com/ 2.wechat sudo pip ...

  3. DNS解惑之基本概念(1)

    常见问题 1.域名对应的IP地址修改完要将近一天的时间才能有效果? DNS的数据库通常是在跑在DNS服务器的内存当中的,但是我们如果临时增加一条的话其实是写到了硬盘当中,当数据库服务刷新的时候新增的新 ...

  4. 201871010101-陈来弟《面向对象程序设计(java)》第十五周学习总结

                                                                                                         ...

  5. Docker简介(一)

    一.为什么会有Docker 环境配置很麻烦,换了台机器,就得全部重新配置一次. 二.Docker的理念 Docker是基于Go语言实现的云开源项目. Docker的主要目标是“Build,Ship a ...

  6. github新建本地仓库并将代码提交到远程仓库

    方式一: 在github上新建好仓库:gitTest 使用命令git clone git@github.com:yourgithubID/gitTest.git,克隆到本地相应的位置 将要上传的工程代 ...

  7. [LeetCode] 21. Merge Two Sorted Lists 混合插入有序链表

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  8. Spring 常用配置、Bean

    spring模块 Spring-Core: Core包是框架的最基础部分,并提供依赖注入(Dependency Injection)管理Bean容器功能. Spring-Context:(Spring ...

  9. c# DataGridView在使用DataSource时,只显示指定的列或禁止自动生成列

    可通过设置DataGridView控件的AutoGenerateColumns属性来处理. //禁止自动生成列,以下场景会用到:数据源的列超过需要展示的列 this.gridDevice.AutoGe ...

  10. Docker安装和上传容器

    安装Docker Requirements for Mac(硬件要求): Mac的硬件必须是2010或者更新的,需要支持memory management unit(MMU) virtualizait ...