Vue造Toast轮子引发的思考

译者：王二狗
博客：掘金、思否、知乎、简书、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 文档，我发现Vue里面的插件可能很好的解决我所遇到的问题。

创建插件：

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

引入插件：

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

使用轮子：

this.$toast()

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

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

智能推荐

给各种xxxToxxx方法造的轮子

后台开发中有很多场景需要将数据库实体，Dto，Vo，Param相互转换，有的只是简单的属性拷贝，有的会在这基础上再做写其他的处理，为了避免每次重复开发，使用泛型，开发了一套抽象类抽象共有逻辑 AbstractBean 封装泛型类对象，并提供最基本的属性拷贝方法 AbstractModel/AbstractDto/xxx 基于AbstractBean父类，针对Model和Dto做特殊的泛型限制，并提...

造轮子之常用函数的封装

常用函数的封装常用函数的封装：字符串操作常用函数大小写转换函数分割字符串函数字符串转换函数字符串替换函数时间操作常用函数帮助类定义字符串操作封装实现未完待续~...

经典造轮子-String类的实现

一个简单的版本...

造轮子--MLP与EBP的实现

造轮子–MLP与EBP的实现目录造轮子--MLP与EBP的实现引入一、Multi-Layer Perceptron(MLP) 表1：编码器的输入输出模式 sigmoid函数：二、Error Back-Propagation(EBP) 参数解释：三、偏置Bias 带有偏置的MLP模型：四、代码测试结果 1、未加偏置Bias的MLP系统 Test0: MLP without ...

造https client轮子的记录

最近我们的服务器需要嵌入HTTP服务，需要支持httpclient和httpserver，httpclient要同时支持https。我们现在服务器进程之间的网络通信使用的是自有实现，它使用io多路复用技术。因为http只是在tcp之上进行明文传输而已，所以实现也包括了一个简陋的httpclient和httpserver，还基于openssl实现玩具版的https，但基本是不能在生产中使用的。本...

代码先锋网代码片段及技术文章聚合