封装vue插件，读懂这遍文章就够了

时间 2019-11-08

标签封装 vue 插件读懂文章够了栏目软件设计繁體版

原文原文链接

DEMO

麻不烧的Githubjavascript

配合着源码，用心看完这遍文章，你便领悟了封装的精髓，麻雀虽小，五脏俱全。css

前记

业务代码以外的代码，我想称之为增值代码。html

什么意思？vue

做为一个程序员，你应该除了完成领导安排的任务，你还应该有一些本身的时间，用来“玩”一些比较有意思的事情。java

当现有框架、库知足不了咱们需求的时候，咱们应该尝试去本身造一些工具。也正是这些你所实现的，成就了他人，造就了本身。webpack

不信，你且想想，他人会关心你写的具体的业务逻辑代码吗？我想他们更关心的是，你写的插件，是如何使用的吧，以及方不方便他们借此完成他们本身业务代码。git

再通俗一点，他们不会记住你，可是他们会记住你的Api，于是忆起你。程序员

还有很重要的一点，全部的技术，都是服务于业务的，不然，就是扯皮。github

背景

入职新公司以来，一直忙于开发业务，过程当中，多处用到了领导写的牛逼工具。说实话，心里由衷的佩服，简直就是解放生产力，放到古代，就是要被封神滴。web

举个例子：

领导花了一段时间，研究出了一个自动表单生成器。以前手写一个表单配置页，加上表单验证，可能须要半天，甚至更久。

如今呢？全部的表单、样式及验证，均可以经过代码配置实现，二十分钟可能就完成了。

由此，我悟出了一个道理:

重复地作一件事，不如用心地作“一件事”。

我想，你确定也想成为他人口中的那个男人，但成天活在本身的世界里，你可能一时并不知道该如何去作，这里我想告诉你：

成长的一个关键性因素，就是来自于模仿。

对的，你能够先尝试着去阅读下他人的代码，看看别人的实现方式，再者能够去github上溜一圈，优秀项目太多了，仿着写去呗。

只要你想学，你就必定能学会，只不过是实现的方式好与坏而已，这些是须要后期不断完善的。

鉴于本遍文章快要跑题了，再也不多述，进入正题...

正文

1.组件和插件的区别与联系

区别

组件的使用频率每每大于插件
组件的做用范围每每小于插件

联系

插件能够封装组件，组件能够暴露数据给插件

这里不作过多阐述，有兴趣能够参考下劳卜大大的这编文章，写的很通俗易懂。

2.实现插件的必备因素

基础

你须要清楚的知道vue的一些高阶知识点以及相关内容，好比

Vue.extend构造器
$mount手动挂载实例
mixin混合注入
父子组件传参、跨级组件传参
理解Vue构造函数及prototype原形对象
npm官网注册帐号
webpack打包
...

技巧

如下这个技巧是今天开发的时候悟出来的，目测颇有用：

别着急开发，先想着如何在开发中使用你的插件

什么意思？顺着个人思路捋下去

由于我想实现一个全局toast插件，大概用法

this.$toast('那个男人')
    // todo
复制代码

光弹出文案不行，应该有一个控制弹出方向的变量

this.$toast('那个男人',{
        position:'topCenter'
    })
复制代码

全局toast的状态应该有多种，好比常见的成功、错误、警告、普通...

// 成功success
    // 错误error
    // 警告warning
    // 普通info
    this.$toast('那个男人',{
        position:'topCenter',
        type:'success'
    })
复制代码

应该有一个时间变量去控制多长时间自动消失toast

this.$toast('那个男人',{
        position:'topCenter',
        type:'success',
        closeTime: 3 // 控制3秒后消失toast
    })
复制代码

会不会存在一种业务场景，咱们不须要自动消失toast

this.$toast('那个男人',{
        position:'topCenter',
        type:'success',
        closeTime: 3 // 控制3秒后消失toast
        autoClose: false
    })
复制代码

若是我想在toast结束后，触发一些回调动做，好比删除成功toast后刷新列表页面

this.$toast('那个男人',{
        position:'topCenter',
        type:'success',
        closeTime: 3 // 控制3秒后消失toast
        autoClose: true,
        callback () {
            ...
        }
    })
复制代码

toast的内容，可能会很长，所以应该有两个变量分别控制toast宽度和高度

this.$toast('那个男人',{
        position:'topCenter',
        type:'success',
        closeTime: 3 // 控制3秒后消失toast
        autoClose: true,
        callback () {
            ...
        },
        width:300,
        height:80
    })
复制代码

至此，基础功能应该都涵盖了，这个时候你要去考虑一些内建的问题

这么多配置项，我做为一个使用者，都关心吗？或者说，都须要配置吗？
针对不一样的状态（success/error/warning/info），确定要用不一样的颜色区分，以及使用不一样的图标，他们之间有什么关系吗？

配置项多应该怎么解决-默认值

默认给个type呗，好比个人项目中默认的type是info,当我在使用的时候，没有传入type时,默认为info

由于大部分的toast场景都是短暂的停留在页面，因此autoClose设置为true

又由于大部分的toast文案比较短，因此个人默认toast长宽设置为300、80应该足够了

...

以上默认配置，均可以在使用的时候，传入参数覆盖默认参数

针对不一样的状态，toast图标、颜色、标题之间有什么联系？

本地存一个map映射配置表，根据传入的type,我就能够准确的知道图标、颜色、标题应该是什么

总结几点：

插件对外暴露的参数应保持最少原则，聚焦使用者关注点
插件或组件的实现应该要基于使用场景考虑
开发一款组件或者插件，应该保持软件工程领域的开放封闭原则
一款好的插件或组件并非一蹴而就的，每每须要后期使用过程当中发现问题，加以完善
组件或者插件的文档必定要完善，并非每个使用它的人，都关心它的内部实现，他们更关心的可能仅是如何快速上手

实现

上文提到过，组件能够暴露数据给插件，对于这句话

个人理解是，组件是静态的，只是对外暴露一些参数入口props。插件，让咱们能够动态的往其中注入一些自定义参数。具体的实现，仍是在组件当中完成。

因而乎：我写了一个静态组件，经过props定义上文提到的相关变量

先看下script部分

再来看下html部分

能够看到，内部实现其实很简单，无非就是经过外部传入的props，控制内部的展现细节而已

到这里静态组件基本已经完成了（css样式代码不在这里贴了）

注意：

props定义的时候，最好用对象的写法，做为必定的约束
变量名字最好作到见名知意
class名的绑定能够充分利用vue提供的数组以及对象形式或者配合计算属性完成

静态组件怎么变成插件使用呢？

这里再也不作过多阐述，vue封装插件的经常使用方法主要有如下四种，有疑惑的话，建议观阅vue开发插件，固然我以为你应该还须要去了解下Vue.extend的用法，插件的实现离不开它哦。

看下关键部分：该文件也是咱们后期webpack打包（build）的入口文件

该文件内容涉及到的知识点，也是开发一个vue插件最核心的内容。里面的每一行代码，都充满了杀机～

至此，关于插件实现部分基本已经所有完成。

3.如何将本身的插件上传到npm上去

这里的话，网上的教程有不少，我理解你只须要了解如下几行代码的做用，就足够了

// webpack.config.js
 
 module.exports = {
  entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    libraryTarget: 'umd'
  },
  ...
  
  // package.json
  {
  "name": "mbs-toast",
  "description": "a toast plugin base on Vue2",
  "version": "1.0.0",
  "author": "xxx <xxx88888@163.com>",
  "license": "MIT",
  "private": false,
  "main": "dist/build.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    ...
复制代码

这里的entry入口文件配置的意思是，开发环境时，入口文件用main.js(方便开发调试使用)，打包时入口文件为index.js
filename是打包生成文件的名字，这里是webpack-simple模版默认使用的就是build.js，没有特殊需求的话，不建议改动
libraryTarget属性可能你们都会比较陌生，由于通常若是只在项目中使用 webpack 不须要关注这两个属性，可是若是是开发类库、插件，那么这两个属性就是必须了解的,不清楚的能够参考详解webpack中ibraryTarget属性
package.json文件中的main字段，指定了该npm包引用的入口（记住必定要记得添加，而且文件名应与上面第二点提到的保持一致）

这里我用的模版是本身在官方webpack-simple模版的基础上作了一些定制化的，里面为了方便我平时开发，加入了scss、eslint，这样的话，后面就不用每次手动install了，有兴趣的能够看下README，定制一份属于本身的脚手架模板

在你了解了上述背景后，你只须要执行如下几步便可实现皆大欢喜

顺利的话，如今你已经能够在正式项目中，经过

npm install -S xxx 安装你的私有包了
复制代码

最后在你的入口文件注册你的插件

import toastPlugin from 'xxx'

Vue.use(toastPlugin) // 这里Vue.use的第二个参数，能够经过全局配置，作一些自定义配置，有须要的自行前往学习
复制代码

到这里，全部的一切，已尘埃落定

你能够在代码中愉快的使用了

this.$toast('尘埃落定', {
    callback () {
      console.log('hello world')
    },
    type: 'success',
    // position: 'topRight',
    autoClose: false
})
复制代码

最后

我在写这个插件以前，在Github上看到一个大神封装的插件。四个字描述下，叹为观止，有兴趣的必定要去看下，我相信爱学习的你，必定会收获满满。同时在开发该插件时，一些样式及动画，也作了相应的参考。

该插件的源码已经上传麻不烧的Github，方便你们参考。同时，上述提到的form表单生成器，我也尝试着本身实现了一遍，有兴趣的能够一块儿加入哦。戳我快速进入form表单验证

README后续完善中，理科生毕业，文笔很差，勿喷～

码字不易，且行且珍惜！