Question

我试图在主js上的JSfile之外调用此函数，但控制台抛出

Uncaught ReferenceError：Boxlayout未定义为main.js？fc8b2171b5ceebf37d7deb392265939f71c1a998：6（匿名函数）

这是我的boxlayout.js

boxlayout.js

Boxlayout = (function () {
    var $el = $('#bl-main'),
        $sections = $el.children('section'),
        // works section
        $sectionWork = $('#bl-work-section'),
        // work items
        $workItems = $('#bl-work-items > li'),
        // work panels
        $workPanelsContainer = $('#bl-panel-work-items'),
        $workPanels = $workPanelsContainer.children('div'),
        totalWorkPanels = $workPanels.length,
        // navigating the work panels
        $nextWorkItem = $workPanelsContainer.find('nav > span.bl-next-work'),
        // if currently navigating the work items
        isAnimating = false,
        // close work panel trigger
        $closeWorkItem = $workPanelsContainer.find('nav > span.bl-icon-close'),
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
                'MozTransition': 'transitionend',
                'OTransition': 'oTransitionEnd',
                'msTransition': 'MSTransitionEnd',
                'transition': 'transitionend'
        },
        // transition end event name
        transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
        // support css transitions
        supportTransitions = Modernizr.csstransitions;

    function init() {
        initEvents();
    }

    function initEvents() {

        $sections.each(function () {

            var $section = $(this);

            // expand the clicked section and scale down the others
            $section.on('click', function () {

                if (!$section.data('open')) {
                    $section.data('open', true).addClass('bl-expand bl-expand-top');
                    $el.addClass('bl-expand-item');
                }

            }).find('span.bl-icon-close').on('click', function () {

                // close the expanded section and scale up the others
                $section.data('open', false).removeClass('bl-expand').on(transEndEventName, function (event) {
                    if (!$(event.target).is('section')) return false;
                    $(this).off(transEndEventName).removeClass('bl-expand-top');
                });

                if (!supportTransitions) {
                    $section.removeClass('bl-expand-top');
                }

                $el.removeClass('bl-expand-item');

                return false;

            });

        });

        // clicking on a work item: the current section scales down and the respective work panel slides up
        $workItems.on('click', function (event) {

            // scale down main section
            $sectionWork.addClass('bl-scale-down');

            // show panel for this work item
            $workPanelsContainer.addClass('bl-panel-items-show');

            var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
            currentWorkPanel = $panel.index();
            $panel.addClass('bl-show-work');

            return false;

        });

        // navigating the work items: current work panel scales down and the next work panel slides up
        $nextWorkItem.on('click', function (event) {

            if (isAnimating) {
                return false;
            }
            isAnimating = true;

            var $currentPanel = $workPanels.eq(currentWorkPanel);
            currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
            var $nextPanel = $workPanels.eq(currentWorkPanel);

            $currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function (event) {
                if (!$(event.target).is('div')) return false;
                $(this).off(transEndEventName).removeClass('bl-hide-current-work');
                isAnimating = false;
            });

            if (!supportTransitions) {
                $currentPanel.removeClass('bl-hide-current-work');
                isAnimating = false;
            }

            $nextPanel.addClass('bl-show-work');

            return false;

        });

        // clicking the work panels close button: the current work panel slides down and the section scales up again
        $closeWorkItem.on('click', function (event) {

            // scale up main section
            $sectionWork.removeClass('bl-scale-down');
            $workPanelsContainer.removeClass('bl-panel-items-show');
            $workPanels.eq(currentWorkPanel).removeClass('bl-show-work');

            return false;

        });

    }

    return {
        init: init
    };

})();

并尝试使用

初始化该功能

main.js

Meteor.startup(function(){
  Boxlayout.init();

});

此代码在meteor之外的其他应用程序上运行我也使用来自JQuery的$.(function(){});，但现在我正在使用Meteor这只是不起作用，我读了一些文档和堆栈溢出问题所以我找到了这个并尝试

Older stack overflow Question

Answer 1

因为你的函数被括在括号中并立即用()调用，所以你实际上是将Boxlayout指定为匿名IIFE（立即调用函数表达式）的结果，但是该函数当前没有返回任何内容，因此Boxlayout设置为undefined（而不是函数本身）。您首先需要来自IIFE的return this。

e.g。字面上在函数末尾添加此代码：

return this;

您可以将其构造为类实例，并将其init属性设置为“构造函数”中的函数（为清楚起见，删除了所有其余代码）：

Boxlayout = (function () {

    // Set an init property of this instance to be a function 
    this.init = function () {
        alert("init")
    }

    // return the instance of this anonymous class
    return this;
})();

// Then to use it later
$(function () {
    // Call the init method on the specific single instance we created
    Boxlayout.init();
});

JSFiddle： http://jsfiddle.net/hzz9jqjc/1/

在文件外调用函数

1 个答案: