CodingVue中全局使用Lodash的Debounce防抖函数、Throttle节流函数及其他

之前的项目中,虽然从没有用过Lodash,但也是久仰大名。现在的项目中,希望能够进行实时查询,所以Debounce防抖和Throttle节流函数就必不可少了。

之前并没有用过防抖和节流,但是之前看过掘金的一些文章,而且由于之前有游戏开发经验,所以对于这种逻辑还是非常熟悉的,只是JS中的我们是使用闭包来解决这个问题。代码其实很简单,这里不再贴出代码。这篇文章我们主要还是解决Vue中使用Lodash的问题。

如果是JS代码的话,解决的方法比较多,但是TS的话,会有一些定义问题。

一、使用VuePlugin方式

Vue的插件写起来是很容易,使用Lodash的大部分函数也很方便,但是有一个问题,就是无法使用_.debounce_.throttle函数,因为我们使用的时候使用的是this._这种方式,但是在methods中,我们无法直接使用this的方法来进行赋值,代码如下:

// Vue插件代码
import _Vue from "vue";
import * as lodash from "lodash";
function install(Vue: typeof _Vue, options?: any): void {
    Vue._ = lodash;
    Vue.prototype._ = lodash;
}
export default install;

// 在created中定义的方法,可以用作event,JS中可直接使用,TS中也可以使用,但由于无法对this进行定义,所以会有波浪线
created() {
    this.test = this._.debounce(function(){},1000);
}

// 在这种methods方式下可以用使用lodash的一些方法
methods: {
    test() {
        let _d = this._.debounce(function(){},1000);
    }
}
// global.d.ts
import Vue from "vue";
import * as lodash from "lodash";

declare module "vue/types/vue" {
    // Vue.prototype._
    interface Vue {
        _: lodash.LoDashStatic;
    }
    // Vue._
    interface VueConstructor<V extends Vue = Vue> {
        _: typeof lodash.LoDashStatic;
    }
}

二、使用WebpackProvidePlugin来进行

ProvidePluginWebpack用来自动加载模块的方法,之所以会研究全局使用方式的问题,就是因为我懒得每个vue组件中都import lodash

// webpack的配置,在VUE-CLI 3中,我们写在vue.config.js中
plugins: [
    new webpack.ProvidePlugin({
        _: "lodash"
    })
]
// vue组件中
methods: {
    delay_search: _.debounce(function(this: any) {
        this.other_function();
    }, 500),
}
// global.d.ts
import * as lodash from "lodash";
declare global {
    const _: lodash.LoDashStatic;
}

CodingJavascript中的数字类型转换:parseInt和ToNumber

前言

今天面试一位前端的时候,问到他一个问题:一个数字和一个布尔型用==比较时,类型会如何转换。开始他答的:数字会转换成布尔型,之后改成了:布尔会转换成数字型。我一个迷糊,自己也想不起来了,说是数字会转成布尔。完了之后,我查了下ECMA5.1文档,里面说到是布尔转数字。

于是由这个问题,又引出了我另一个想问但由于自己记不清所以没敢问的问题,字符串和布尔进行比较,类型如何转换?

在文档中确认了一下,是布尔先转成数字,之后字符串也转换成数字进行比较

问题

我记得之前的记忆中,一个字符串转换成数字,是从第一位开始检查的,将可以转换成数字的位置转完,舍弃之后无法转换的。例如:

123abc -> 123

abc123 -> NaN

于是我很自信的认为,console.log('1true' == true);的结果是true,但我运行代码后,发现竟然是false。于是我整个人就懵逼了,难道1true的结果不是1

解决

查看文档后,发现所有数字的隐式类型转换都是用的ToNumber,而我之前记得从第一位开始转的是parseInt

当使用Number创建一个数字时,会对参数进行ToNumber转换,于是我使用console.log(Number('1true'));查看输出,结果是NaN,而parseInt1,而console.log(parseInt('1true') == true);结果也是true

查看parseInt文档后,描述是:如果第一个字符不能被转换成数字,parseInt返回NaN

而Number文档是:如果参数无法被转换为数字,则返回 NaN

所以,这就是我今天说错一个问题后的提升。