Vue造Toast轮子引发的思考

最新推荐文章于 2021-02-10 16:02:02 发布

杭州-前端-求内推

最新推荐文章于 2021-02-10 16:02:02 发布

阅读量162

点赞数

分类专栏： ♚前端开发

本文链接：https://blog.csdn.net/ansenamerson/article/details/104740064

版权

29 篇文章 0 订阅

订阅专栏

译者：王二狗
博客：掘金、思否、知乎、简书、CSDN
点赞再看，养成习惯，你们的支持是我持续分享的最大动力😘
原文链接：https://www.sitepoint.com/shorthand-javascript-techniques/

最近一直在不停的造Vue轮子，目前已经完成了Button、网格布局、默认布局、Input等轮子。

今天在编写Toast轮子的时候遇到了一个问题，说一说我的思考过程，拿出来和大家分享一下，希望对大家有所帮助。🙌

在决定去造一个轮子之前，首先要做的就是需求分析，其中最重要的一步就是你的轮子造出来之后，其他人怎样使用你的轮子。

我希望用到我轮子的用户可以全局去调用我的轮子，就像下面这样：

this.$toast()

那么我如何才能做到让用户使用上述方式去调用我的轮子呢？

我首先想到的方法是直接将我的轮子挂载到Vue的prototype上

import Vue from 'vue'
Vue.prototype.$toast = function () {
    console.log('this is my toast');
}

这样做可以是可以，但是存在两个潜在的工程问题。

工程问题：在我们的工程项目中会实际发生的问题，其特点就是具有不可预测性，这种不可预测性，往往不是你可以通过目前代码的分析而得出的。

问题一：$toast可能以前就已经有了

如果以前就存在了一个$toast，那么按照你上述的处理方式，你就会覆盖掉原有的$toast。

针对这个问题，我最初想到的处理方式是提前对$toast进行一个检测

import Vue from 'vue'

if (Vue.prototype.$toast == undefined) {
    Vue.prototype.$toast = function () {
        console.log('i an toast');
    }
}

这种处理方式的问题就在于，如果在这之前$toast真的已经存在了，那你的$toast怎么办？这种处理方式的问题在于侵入性太强了。

问题二：很有可能使用你轮子的用户和你的Vue版本不一致

如果使用你轮子的用户所用的Vue版本和你的不一致怎么办？

import Vue from 'vue1'
import Vue from 'vue2'
......

所谓墨菲定律，说的就是小概率事件必将发生，如果你不相信，那么你就存在侥幸心理，你就在自己骗自己。

所以，我们必须要想出合理的方式解决上面遇到的两个工程问题。

最后通过翻阅 Vue 文档，我发现Vue里面的插件可能很好的解决我所遇到的问题。

创建插件：

export default {
    install(){
        Vue.prototype.$toast = function () {
            console.log('i am toast');
        }
    }
}

引入插件：

import Plugin from './toast/plugin'
Vue.use(Plugin)

使用轮子：

this.$toast()

告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。共勉！

关注