vue之插件編寫

時間  2019-12-05
標籤 vue 插件 編寫 简体版
原文   原文鏈接

前言

前段時間看到黃軼老師的一篇文章感觸頗多。特別是下面這一段話javascript

插件 Vue 化引起的一些思考
這篇文章我不單單是要教會你們封裝一個 scroll 組件，還想傳遞一些把第三方插件（原生 JS 實現）Vue 化的思考過程。不少學習 Vue.js 的同窗可能還停留在 「XX 效果如何用 Vue.js 實現」 的程度，其實把插件 Vue 化有兩點很關鍵，一個是對插件自己的實現原理很瞭解，另外一個是對 Vue.js 的特性很瞭解。對插件自己的實現原理了解須要的是一個思考和鑽研的過程，這個過程可能困難，可是收穫也是巨大的；而對 Vue.js 的特性的瞭解，是須要你們對 Vue.js 多多使用，學會從平時的項目中積累和總結，也要善於查閱 Vue.js 的官方文檔，關注一些 Vue.js 的升級等。vue

因此，咱們拒絕伸手黨，但也不是鼓勵你們何時都要去造輪子，當咱們在使用一些現成插件的同時，也但願你們能多多思考，去探索一下現象背後的本質，把 「XX 效果如何用 Vue.js 實現」 這句話從問號變成句號。java

插件分類

插件分類

插件一般會爲 Vue 添加全局功能，插件的編寫方法通常分爲4類，如上圖所示node

Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象webpack

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }
  // 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
  // 4. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}

插件編寫方法

1. 添加全局方法或屬性

export default {
    install(Vue, option) {
        Vue.$myName = '羅輯',
        Vue.$myJob = '面壁者',
        Vue.$do = () => {
            // 全局方法
        }
    }
}

在install方法中，咱們直接在Vue實例上聲明瞭$myName屬性並進行了賦值，當該插件註冊後只要存在Vue實例的地方你均可以獲取到Vue.$myName的值，由於其直接綁定在了Vue實例上。git

2. 添加全局資源

export default {
    install(Vue, options) {
        Vue.directive('dom', {
            bind: function() {},

            // 當綁定元素插入到 DOM 中。
            inserted: function(el, binding, vnode, oldVnode) {

                // 移動元素
                el.tranfromDom();
            },

            update: function() {},
            componentUpdated: function() {},
            unbind: function() {}
        });
    },
}

添加全局資源包含了添加全局的指令／過濾器／過渡等，上方代碼咱們經過Vue.directive()添加了一個全局指令v-dom，其主要包含了5種方法，其中inserted表明當綁定元素插入到 DOM 中執行，而el.tranfromDom()表明要移動的元素，這樣若是咱們在一個Modal彈窗上綁定該指令就會自動的移動dom（實現實際dom位子與模板中dom位子相分離）。github

// Thanks to: https://github.com/airyland/vux/blob/v2/src/directives/transfer-dom/index.js
// Thanks to: https://github.com/calebroseland/vue-dom-portal

/**
 * Get target DOM Node
 * @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean
 * @return {Node} The target that the el will be appended to
 */
function getTarget (node) {
    if (node === void 0) {
        node = document.body
    }
    if (node === true) { return document.body }
    return node instanceof window.Node ? node : document.querySelector(node)
}

const directive = {
    inserted (el, { value }, vnode) {
        if (el.dataset.transfer !== 'true') return false;
        el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
        const parentNode = el.parentNode;
        if (!parentNode) return;
        const home = document.createComment('');
        let hasMovedOut = false;

        if (value !== false) {
            parentNode.replaceChild(home, el); // moving out, el is no longer in the document
            getTarget(value).appendChild(el); // moving into new place
            hasMovedOut = true
        }
        if (!el.__transferDomData) {
            el.__transferDomData = {
                parentNode: parentNode,
                home: home,
                target: getTarget(value),
                hasMovedOut: hasMovedOut
            }
        }
    },
    componentUpdated (el, { value }) {
        if (el.dataset.transfer !== 'true') return false;
        // need to make sure children are done updating (vs. `update`)
        const ref$1 = el.__transferDomData;
        if (!ref$1) return;
        // homes.get(el)
        const parentNode = ref$1.parentNode;
        const home = ref$1.home;
        const hasMovedOut = ref$1.hasMovedOut; // recall where home is

        if (!hasMovedOut && value) {
            // remove from document and leave placeholder
            parentNode.replaceChild(home, el);
            // append to target
            getTarget(value).appendChild(el);
            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) });
        } else if (hasMovedOut && value === false) {
            // previously moved, coming back home
            parentNode.replaceChild(el, home);
            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) });
        } else if (value) {
            // already moved, going somewhere else
            getTarget(value).appendChild(el);
        }
    },
    unbind (el) {
        if (el.dataset.transfer !== 'true') return false;
        el.className = el.className.replace('v-transfer-dom', '');
        const ref$1 = el.__transferDomData;
        if (!ref$1) return;
        if (el.__transferDomData.hasMovedOut === true) {
            el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
        }
        el.__transferDomData = null
    }
};

export default directive;

ivew 中的v-transfer-dom指令web

3. 注入組件 添加全局Mixin

export default {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                say() {
                    console.log('hello..');
                }
            }
        });
    },
}

mixin表明混合的意思，咱們能夠全局註冊一個Mixin，其會影響註冊以後建立的每一個 Vue 實例，上方代碼註冊後會在每一個組件實例中添加say方法，在單文件組件中能夠直接經過this.say()調用。固然若是實例中存在同名方法，則mixin方法中建立的會被覆蓋，同時mixin對象中的鉤子將在組件自身鉤子以前調用。vue-router

/**
 * Show migrating guide in browser console.
 *
 * Usage:
 * import Migrating from 'element-ui/src/mixins/migrating';
 *
 * mixins: [Migrating]
 *
 * add getMigratingConfig method for your component.
 *  getMigratingConfig() {
 *    return {
 *      props: {
 *        'allow-no-selection': 'allow-no-selection is removed.',
 *        'selection-mode': 'selection-mode is removed.'
 *      },
 *      events: {
 *        selectionchange: 'selectionchange is renamed to selection-change.'
 *      }
 *    };
 *  },
 */
export default {
  mounted() {
    if (process.env.NODE_ENV === 'production') return;
    if (!this.$vnode) return;
    const { props, events } = this.getMigratingConfig();
    const { data, componentOptions } = this.$vnode;
    const definedProps = data.attrs || {};
    const definedEvents = componentOptions.listeners || {};

    for (let propName in definedProps) {
      if (definedProps.hasOwnProperty(propName) && props[propName]) {
        console.warn(`[Element Migrating][Attribute]: ${props[propName]}`);
      }
    }

    for (let eventName in definedEvents) {
      if (definedEvents.hasOwnProperty(eventName) && events[eventName]) {
        console.warn(`[Element Migrating][Event]: ${events[eventName]}`);
      }
    }
  },
  methods: {
    getMigratingConfig() {
      return {
        props: {},
        events: {}
      };
    }
  }
};

element 的遷移引導mixinelement-ui

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    var name = child.$options.componentName;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

element 爲Vue2.x添加簡化版的 dispatch，broadcast（改方法vue1中有原生實現）固然這裏還爲作成單獨插件

4. 添加實例方法

export default {
  install(Vue, option) {
    Vue.prototype.$myName = '羅輯';
    Vue.prototype.showMyName = value => {
      console.log(value);
    };
  }
}

添加實例方法是最經常使用的一種方法，其直接綁定在vue的原型鏈上（一直是js的傳統）。實例方法能夠在組件內部，經過this.$myMethod來調用。

使用插件

過全局方法 Vue.use() 使用插件：

// 調用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

或者傳入一個選項對象：

Vue.use(MyPlugin, { someOption: true })

Vue.use 會自動阻止註冊相同插件屢次，屆時只會註冊一次該插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在檢測到 Vue 是可訪問的全局變量時會自動調用 Vue.use()。然而在例如 CommonJS 的模塊環境中，你應該始終顯式地調用 Vue.use():

// 用 Browserify 或 webpack 提供的 CommonJS 模塊環境時
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了調用此方法
Vue.use(VueRouter)
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程