Question

下面是我从Vue实例调用的一组外部javascript函数

// debounce
function debounce(func, wait, immediate) {

    let timeout;

    return function() {
        let context = this, args = arguments;
         later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
// -- end debounce

// animate css
function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd);
}
// -- end animate css

和我的Vue实例

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown : debounce(function(){
             animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                document.querySelector('#searchboxui-wrapper').style.display = 'none';  
            });
        }
    }
})

但是它总是让我undefined丢，即使我声明了axios包或socketio包，它也会丢给我undefined，有什么帮助，想法吗？

PS：我正在使用Vue CLI 3

Answer 1

创建外部js文件，例如externals.js，使用import导入此文件中的所有内容或特定功能，然后在您的Vue代码中使用它们：

externals.js中的内容：

    // debounce
    function debounce(func, wait, immediate) {

        let timeout;

        return function() {
            let context = this, args = arguments;
            later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };

            let callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
    // -- end debounce

    // animate css
    function animateCss(element, animationName, callback) {
        const node = document.querySelector(element)
        node.classList.add('animated', animationName)

        function handleAnimationEnd() {
            node.classList.remove('animated', animationName)
            node.removeEventListener('animationend', handleAnimationEnd)

            if (typeof callback === 'function') callback()
        }

        node.addEventListener('animationend', handleAnimationEnd);
    }
    // -- end animate css
export {debounce, animateCss}

VueJS中的内容：

import {debounce, animateCss} from '../../js/externals.js'

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown(){
            debounce(function(){
                animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                    document.querySelector('#searchboxui-wrapper').style.display = 'none';
                });
            });
        }
    }
})

在vue实例中调用外部javascript函数

1 个答案: