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

它们都在DOM就绪函数中声明，这些函数为它们提供了local范围。然后，在该函数之外不能看到这些函数，并且每个DOM就绪函数都与其他函数分开。

您需要将它们声明为全局函数（使用全局变量）：

e.g。

// Global scope
var mobileMenu;

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

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

e.g。

$.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(...);
 });

Answer 2

使用jQuery.getScript（）

在共享函数脚本中，删除jQuery(document).ready(function () {...})包装器。

在特定于站点的文档中，使用$.getScript()加载共享文件，并将站点特定的函数放在共享脚本成功加载后运行的回调中：

jQuery(document).ready(function() {
    $.getScript('/url/to/functionScript.js', function () {
        // Site specific functions
    });
});

是否可以跨多个文件拆分JavaScript并相互访问函数

2 个答案:

使用jQuery.getScript（）