译者：王二狗
博客：掘金、思否、知乎、简书、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()
告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！
网友评论