我想做的是有一个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();
});
});

最佳答案

它们都在DOM ready函数中声明,这些函数为它们提供了local范围。然后无法在该功能之外看到这些功能,并且每个DOM ready功能都彼此独立。

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

例如

// Global scope
var mobileMenu;

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


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

例如

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

10-05 20:59
查看更多