阅读 6788
封装vue插件,读懂这遍文章就够了

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

DEMO

麻不烧的Github

demo

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

前记

业务代码之外的代码,我想称之为增值代码

什么意思?

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

当现有框架、库满足不了我们需求的时候,我们应该尝试去自己造一些工具。也正是这些你所实现的,成就了他人,造就了自己

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

再通俗一点,他们不会记住你,但是他们会记住你的Api,因而忆起你

还有很重要的一点,所有的技术,都是服务于业务的,否则,就是扯皮。

背景

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

举个例子:

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

现在呢?所有的表单、样式及验证,都可以通过代码配置实现,二十分钟可能就完成了。

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

重复地做一件事,不如用心地做“一件事”。

大海

我想,你肯定也想成为他人口中的那个男人,但整天活在自己的世界里,你可能一时并不知道该如何去做,这里我想告诉你:

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

对的,你可以先尝试着去阅读下他人的代码,看看别人的实现方式,再者可以去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
    })
复制代码

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

  1. 这么多配置项,我作为一个使用者,都关心吗?或者说,都需要配置吗?
  2. 针对不同的状态(success/error/warning/info),肯定要用不同的颜色区分,以及使用不同的图标,他们之间有什么关系吗?
配置项多应该怎么解决-默认值

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

因为大部分的toast场景都是短暂的停留在页面,所以autoClose设置为true

又因为大部分的toast文案比较短,所以我的默认toast长宽设置为300、80应该足够了

...

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

针对不同的状态,toast图标、颜色、标题之间有什么联系?

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

map

总结几点:

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

上文提到过,组件可以暴露数据给插件,对于这句话

我的理解是,组件是静态的,只是对外暴露一些参数入口props。 插件,让我们可以动态的往其中注入一些自定义参数。具体的实现,还是在组件当中完成。

于是乎:我写了一个静态组件,通过props定义上文提到的相关变量

先看下script部分

script

再来看下html部分

html

可以看到,内部实现其实很简单,无非就是通过外部传入的props,控制内部的展示细节而已

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

注意:

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

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

这里不再做过多阐述,vue封装插件的常用方法主要有以下四种,有疑惑的话,建议观阅vue开发插件当然我觉得你应该还需要去了解下Vue.extend的用法,插件的实现离不开它哦。

看下关键部分:该文件也是我们后期webpack打包(build)的入口文件

config

该文件内容涉及到的知识点,也是开发一个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,定制一份属于自己的脚手架模板

在你了解了上述背景后,你只需要执行以下几步即可实现皆大欢喜

steps

顺利的话,现在你已经可以在正式项目中,通过

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上看到一个大神封装的插件。四个字描述下,叹为观止,有兴趣的一定要去看下,我相信爱学习的你,一定会收获满满。同时在开发该插件时,一些样式及动画,也做了相应的参考。

该插件的源码已经上传mbs-toast,方便大家参考。同时,上述提到的form表单生成器,我也尝试着自己实现了一遍,有兴趣的可以一起加入哦。所有的插件以及组件目前都汇总在麻不烧的Github里,文档和README正在不断完善中~

理科生毕业,文笔不好,勿喷~

码字不易,且行且珍惜!

文章分类
前端
文章标签