Question

我正在尝试在Magneto的cms页面上运行脚本。控制台正在响应：

未捕获的TypeError：Modernizr.prefixed不是函数

奇怪，因为这个脚本在正常的html条件下运行得很好......

问题在于这一行：

animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],

剧本（取自codrops）：

(function() {
var support = { animations : Modernizr.cssanimations },
        animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
        onEndAnimation = function( el, callback ) {
            var onEndCallbackFn = function( ev ) {
                if( support.animations ) {
                    if( ev.target != this ) return;
                    this.removeEventListener( animEndEventName, onEndCallbackFn );
                }
                if( callback && typeof callback === 'function' ) { callback.call(); }
            };
            if( support.animations ) {
                el.addEventListener( animEndEventName, onEndCallbackFn );
            }
            else {
                onEndCallbackFn();
            }
        };

    var containers = [].slice.call( document.querySelectorAll( '.container' ) ),
        containersCount = containers.length,
        nav = document.querySelector( 'nav.thumb-nav' ),
        pageTriggers = [].slice.call( nav.children ),
        isAnimating = false, current = 0;

    function init() {
        resetScroll();
        // disable scrolling
        window.addEventListener( 'scroll', noscroll );
        // set current page trigger
        classie.add( pageTriggers[ current ], 'thumb-nav__item--current' );
        // set current container
        classie.add( containers[ current ], 'container--current' );
        // initialize events
        initEvents();
    }

    function initEvents() {
        // slideshow navigation
        pageTriggers.forEach( function( pageTrigger ) {
            pageTrigger.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                navigate( this );
            } );
        } );

        // open each container's content area when clicking on the respective trigger button
        containers.forEach( function( container ) {
            container.querySelector( 'button.trigger' ).addEventListener( 'click', function() {
                toggleContent( container, this );
            } );
        } );

        // keyboard navigation events
        document.addEventListener( 'keydown', function( ev ) {
            var keyCode = ev.keyCode || ev.which,
                isContainerOpen = containers[ current ].getAttribute( 'data-open' ) == 'open';

            switch (keyCode) {
                // left key
                case 37:
                    if( current > 0 && !isContainerOpen ) {
                        navigate( pageTriggers[ current - 1 ] );
                    }
                    break;
                // right key
                case 39:
                    if( current < containersCount - 1 && !isContainerOpen ) {
                        navigate( pageTriggers[ current + 1 ] );
                    }
                    break;
            }
        } );
    }

    function navigate( pageTrigger ) {
        var oldcurrent = current,
            newcurrent = pageTriggers.indexOf( pageTrigger );

        if( isAnimating || oldcurrent === newcurrent ) return;
        isAnimating = true;

        // reset scroll
        allowScroll();
        resetScroll();
        preventScroll();

        var currentPageTrigger = pageTriggers[ current ],
            nextContainer = document.getElementById( pageTrigger.getAttribute( 'data-container' ) ),
            currentContainer = containers[ current ],
            dir = newcurrent > oldcurrent ? 'left' : 'right';

        classie.remove( currentPageTrigger, 'thumb-nav__item--current' );
        classie.add( pageTrigger, 'thumb-nav__item--current' );

        // update current
        current = newcurrent;

        // add animation classes
        classie.add( nextContainer, dir === 'left' ? 'container--animInRight' : 'container--animInLeft' );
        classie.add( currentContainer, dir === 'left' ? 'container--animOutLeft' : 'container--animOutRight' );

        onEndAnimation( currentContainer, function() {
            // clear animation classes
            classie.remove( currentContainer, dir === 'left' ? 'container--animOutLeft' : 'container--animOutRight' );
            classie.remove( nextContainer, dir === 'left' ? 'container--animInRight' : 'container--animInLeft' );

            // clear current class / set current class
            classie.remove( currentContainer, 'container--current' );
            classie.add( nextContainer, 'container--current' );

            isAnimating = false;
        } );
    }

    // show content section
    function toggleContent( container, trigger ) {
        if( classie.has( container, 'container--open' ) ) {
            classie.remove( container, 'container--open' );
            classie.remove( trigger, 'trigger--active' );
            classie.remove( nav, 'thumb-nav--hide' );
            container.setAttribute( 'data-open', '' );
            preventScroll();
        }
        else {
            classie.add( container, 'container--open' );
            classie.add( trigger, 'trigger--active' );
            classie.add( nav, 'thumb-nav--hide' );
            container.setAttribute( 'data-open', 'open' );
            allowScroll();
        }
    }

    // scroll functions
    function resetScroll() { document.body.scrollTop = document.documentElement.scrollTop = 0; }
    function preventScroll() { window.addEventListener( 'scroll', noscroll ); }
    function allowScroll() { window.removeEventListener( 'scroll', noscroll ); }
    function noscroll() { 
        window.scrollTo( 0, 0 ); 
    }

    init();

    // For Demo purposes only (prevent jump on click)
    [].slice.call( document.querySelectorAll('.items-wrap a') ).forEach( function(el) { el.onclick = function() { return false; } } );
})();

我从cms页面删除了所有Magento js和css，并将其替换为Codrops的演示文件。它只是不会运行...

我做错了什么（不是js的buff）

提前致谢！

Answer 1

这个Javascript构造

(function() {
    //... all your code, including Modernizr.prefixed() call ...
})();

基本上是在说

嘿Javascript，定义一个匿名函数，然后立即调用它

我不熟悉Modernizr如何将自己加载到页面中，但根据您所描述的内容，您的网页可能会设置为这样的内容。

//...
(function() {
    //... all your code, including Modernizr.prefixed() call ...
})();
//...

<script src="[path to include that defines global Modernizr object]"></script>
Modernizr

您需要调查您的Magento系统如何加载Modernizr，并确保您的功能定义/调用之后

。

Miznto中的Modernizr.prefixed（不是函数）

1 个答案: