javascript - 是否可以将 JavaScript 拆分到多个文件并相互访问函数

Question

我想做的是有一个 JavaScript 文件，其中包含跨多个站点使用的 jQuery 函数(所有站点都托管在同一个 CMS - eTouches 上，因此不存在跨域脚本问题)，然后有一个特定于站点的每个使用函数的站点的 JavaScript 文件，可以根据需要轻松更改中央函数文件。

虽然我在尝试执行此操作时遇到错误，但在第二个脚本尝试执行时未定义函数。这是可能的吗？我是否错过了一些基本的东西，或者这是不可能的。

我认为不可能像在 PHP 等中那样包含文件，但如果我在特定于站点的函数文件之前调用函数文件，我认为这应该可行吗？

在此先感谢您的帮助。

函数文档中的代码

$.noConflict();
jQuery(document).ready(function ($) {

$('<a href="#" class="mobile-menu-toggle-link">&#9776; Menu</a>').insertBefore($('.ehtm'));

if ($('#right_sidebar_section').length) {
} else {
    $('#main_section').css('width','100%')
    $('#main_section').css('marginLeft','0')
}

var mobileMenu = function (menuParent, prevSibling, menuIdentifier) {
    if ($('#mobileMenu').length == 0) {
        var $select = $('<div>', {
            'class': 'mobile-menu',
            'id': menuIdentifier
        }).insertBefore(prevSibling);
        $('.ehtm > ul').prependTo($('#mobileMenu'));
    }

    if ($('.expandContract').length==0) {
        $('.mobile-menu > ul > li > a').each(function(){
            $(this).css("width", "120px");
            $('<a href="#" class="expandContract">+<span></span></a>').insertBefore($(this));
        })
    }

    $('.expandContract').click(function (evt) {
        evt.preventDefault();
        $(this).text($(this).text() == '+' ? '-' : '+');
        $(this).parent().find("ul").slideToggle();
        evt.stopImmediatePropagation();
    })
};

var menuReset = function () {
    $('.mobile-menu > ul').prependTo($('.ehtm'));
    $('#mobileMenu').remove();
    if (parseInt($('#outer_table').css('margin-left')) > 0) {
        $('#outer_table').animate({
            marginLeft: parseInt($('#outer_table').css('marginLeft'), 10) == 0 ? 200 : 0
        });
    }

    $('a.expandContract').each(function(){
        $(this).remove();
    })

    $('.ehtm > ul > li > a').each(function(){
        $(this).css('width','auto');
    })
}

$('.mobile-menu-toggle-link').click(function (evt) {
    evt.preventDefault();

    $('#outer_table').animate({
        marginLeft: parseInt($('#outer_table').css('marginLeft'), 10) == 0 ? 200 : 0
    });

    $('.header').animate({
        marginLeft: parseInt($('#outer_table').css('marginLeft'), 10) == 0 ? 200 : 0
    });

    $('.mobile-menu').animate({
        marginLeft: parseInt($('#outer_table').css('marginLeft'), 10) == 0 ? 0 : -200
    });

    var wHeight = $(window).innerHeight();

    var divHeight = $('#mobileMenu').height();

    if (wHeight > divHeight) {
        $('.mobile-menu').css("height", wHeight);
    } else {
        $('.mobile-menu').css("height", divHeight);
    }

})

var compareWidth = $('.header').width();

/* Add class to the first table row, to allow header styling */

var headRow = $("table#outer_table").find("tr:first");
$(headRow).addClass("headerBGColor");

});

站点特定文档中的代码

$.noConflict();
jQuery(document).ready(function ($) {

var compareWidth = $('.header').width();

var setUpPage = function () {
    if (compareWidth < 768) {
        mobileMenu('.ehtm li', '.header', 'mobileMenu');
    }

    if (compareWidth >= 768) {
        menuReset();
    }

    /* Header image swap */

    if (compareWidth>=1024) {
        $("#headerImage").attr("src","https://www.eiseverywhere.com/image.php?acc=xxx&id=xxxxxx");
    } else if ((compareWidth>=768) && (compareWidth<1024)) {
        $("#headerImage").attr("src","https://www.eiseverywhere.com/image.php?acc=xxx&id=xxxxxx");
    } else {
        $("#headerImage").attr("src","https://www.eiseverywhere.com/image.php?acc=xxx&id=xxxxxx");
    }

    /* Carousel */

    if ($('.owl-carousel').length > 0) {
        $('.owl-carousel').owlCarousel({
            items:1,
            loop:true,
            margin:10,
            autoplay:true,
            autoplayTimeout:3000,
            dots:true
        });
    }
}

var breakPointCheck = function () {
    var currentWidth = $('.header').width();
    if (currentWidth != compareWidth) {
        compareWidth = currentWidth;
        setUpPage();
    }
}

setUpPage();
//    fixElement('.tabmenu')
$(window).resize(function () {
    breakPointCheck();
});
});

Answer 1

它们都在为它们提供 local 作用域的 DOM 就绪函数中声明。然后在该函数之外无法看到这些函数，并且每个 DOM 就绪函数都与其他函数分开。

您需要将它们声明为全局函数(使用全局变量):

例如

// Global scope
var mobileMenu;

$.noConflict();
jQuery(document).ready(function ($) {
     // Aside local function to global var
     mobileMenu = function(...

另一种方法是在 DOM 就绪处理程序之外声明函数，并确保仅从 DOM 就绪处理程序内部的代码调用它们。显示的大多数函数不需要在 DOM 就绪处理程序中，因为它们只是声明并且不会在此时运行:

例如

$.noConflict();

//Declare global functions
var mobileMenu = function (menuParent, prevSibling, menuIdentifier) {
    if ($('#mobileMenu').length == 0) {
        var $select = $('<div>', {
            'class': 'mobile-menu',
            ...snip...
 });

 jQuery(document).ready(function ($) {
      // Use global functions
      mobileMenu(...);
 });