0

これの動作バージョンはここにあります:http://est.pagodabox.com/client/svedka

モジュールパターンに変換しようとしている次の関数がありますが、下部にある関数の1つを使用しようとすると、たとえば次のようになります。

est_project.closeContent($html);

関数ではないというエラーが表示されます。ここで私が間違っていることはありますか?

ありがとう!

var est_project = (function(){

    // Setup functions
    var flexDestroy,
        cloneCurrent,
        clonePosition,
        switchSlide,
        projectLayout,
        contentHeight,
        slidePos,
        slideClick,
        infoToggle,
        closeContent;

    // Destroy flexslider
    flexDestroy = function($slider,$cleanSlider, $projBg) {
        // Insert the clone of the un-initialized slide element, and remove the current flexslider
        // Effectively "destroys" the current slider

        var $curSlide = $slider.find('.flex-active-slide'),
            // Get the zero based index of current slide
            curSlideIndex = $curSlide.index() - 1,
            curBg = $curSlide.find('img').attr('src'),
            slideCount = $cleanSlider.data('count'),
            i = 0,
            $rearrange = $('');

        // When you switch projects, the current slide should stay put
        if(curSlideIndex !== 0 && slideCount > 1) { 
            // Cut from the current slide to the end, paste at the beginning
            for(i = 0 ; i < slideCount; i += 1) {
                if(curSlideIndex > i) {continue;}
                $rearrange = $rearrange.add( $cleanSlider.find('li:eq(' + i + ')') );
            }

            $rearrange.remove();
            $cleanSlider.find('li:first-child').before($rearrange)
            $cleanSlider.css({'background-image' : 'url(' + curBg + ')'});
        }

        $slider.after($cleanSlider).remove();
        clonePosition(slideheight);
    };

    return {
        // Clone current 
        cloneCurrent: function($el) {
            var $clean,
                slideCount = $el.find('li').length;

            $clean = $el.clone();
            $clean.removeClass('project-current').find('div').removeClass('img-loading');
            $clean.data('count',slideCount);
            return $clean;
        },

        // Set the clone position, for when we add it to the DOM or resize the window
        clonePosition: function(slideheight) {
            var n = $cleanSlider.index(),
                $myBg = $cleanSlider.find('div'),
                myPosition = n * slideheight;

            // Set the position of the inserted clone
            $cleanSlider
                .css({height: slideheight, top: myPosition, position : 'absolute'});

            $myBg
                .css({height: slideheight});
        },

        switchSlide: function($me, $slider) {
            $('.project-current').removeClass('project-current');
            $me.addClass('project-current');

            // Get rid of current flexslider
            flexDestroy($slider,$cleanSlider);

            // Clone the unitialized slider so we can add it back in later when it gets destroyed
            $cleanSlider = cloneCurrent($me);

            $me.addClass('flexslider').flexslider({
                animation: "slide",
                animationSpeed: 500,
                slideshow: false,
                manualControls: '.dot-nav li a'
            });

            // After the flexslider initializes, slide the content
            setTimeout(function(){
                slidePos($me, $slidewrap, slideheight, $win);
            },100);
        },

        // Custom "masonry" function, absolutely positions each project div according to the slide height
        projectLayout: function(slideheight,$proj,$projBg) {
            var n = 0;

            $proj.each(function(){
                var $me = $(this),
                    myPosition = n * slideheight;

                // Set all the heights
                $me
                    .css({top: myPosition, position : 'absolute'})
                    .add($projBg)
                    .css({height: slideheight});

                n++;
            });
        },

        // Set slide wrapper height to window height
        contentHeight: function($win, $slidewrap) {
            var winHeight = $win.height();
            $slidewrap.css({height: winHeight});
        },

        // Set slide wrapper position to slide to the clicked slide, and set content position
        slidePos: function($me, $slidewrap, slideheight, $win) {
            var $contentText = $('.project-content .text'),
                projNavHeight = Math.round( $win.height() * .1 ),
                curIndex = $me.index(),
                curTop = 0 - (curIndex * slideheight) + projNavHeight;

            $slidewrap.css({transform: 'translate(0,' + curTop.toString()  + 'px)'});
            $('.corner-btn').add($contentText).css({'padding-top' : projNavHeight});

            setTimeout(function(){
                $slidewrap.removeClass('tr-none movin').addClass('tr-all');
                $('.project').css({opacity: .4})
            }, 100);
        },

        // Click a project, slide to it
        slideClick: function($proj) {
            $('.project').live('click',function(){

                var $me = $(this),
                    myHref = $me.data('href'),
                    myTitle = $me.data('title'),
                    $slider = $('.flexslider'),
                    indexMy = $me.index(),
                    indexCur = $('.project-current').index(),
                    projDir;

                $me.css({opacity: 1});

                // Stop here if we click on the current project
                if($me.hasClass('project-current')) {
                    return false;
                }

                History.pushState(null,myTitle,myHref);     
            });
        },

        // Hide and show content
        infoToggle: function() {
            // Open content
            $('#corner-btn-info').on('click',function(){

                $html.addClass('show-content');

                if($('.project-content .text').height() <= $win.height()) {
                    $html.addClass('no-overflow');
                }

                $('.project-content-wrap').css({'z-index': 10});
            });

            // Close content
            $('#corner-btn-close').live('click',function(){
                closeContent($html);
            });
        },

        closeContent: function($html) {
            $html.removeClass('show-content');
            setTimeout(function(){
                $('.project-content-wrap').css({'z-index': -1});
                $html.removeClass('no-overflow');
                $('#classy').animate({scrollTop: 0})
            },300);
        }
    };
});
4

2 に答える 2

4

問題は、無名関数を実行していないことです。コードは次と同等です。

var est_project = function() {};

関数で定義された関数を返すようにするには、関数を実行する必要があります。

最後の行を置き換えるだけです。

});

に:

}());

または、コードを保持して、次のcloseContentように関数を呼び出すことができます。

est_project().closeContent();

しかし、それはあなたが望んでいることではないと思います:-)est_project関数を呼び出すたびに、新しいオブジェクトをインスタンス化します。

于 2012-11-12T09:01:10.597 に答える
0

ファイルの最初と最後で、実行された関数を使用してオブジェクトをウィンドウにアタッチし、関数全体を自己実行関数内にラップします。このような

(function(global) {

   //your code goes here  
   global.est_project = est_project();

 })(this)
于 2012-11-12T13:07:29.747 に答える