我想做的是有一个JavaScript文件,其中包含可在多个站点中使用的jQuery函数(所有函数都托管在同一CMS-eTouches上,因此没有跨域脚本问题),然后有一个特定于站点的JavaScript文件每个使用这些功能的站点,都可以轻松地根据需要更改中央功能文件。
我在尝试执行此操作时遇到错误,当第二个脚本尝试执行操作时未定义函数。这是可能的吗?我错过了一些基本的知识吗?还是这是不可能的?
我认为不可能像在PHP等中那样包含文件,但是如果我在特定于站点的文件之前调用函数文件,我认为这应该可行?
在此先感谢您的帮助。
功能文档中的代码
$.noConflict();
jQuery(document).ready(function ($) {
$('<a href="#" class="mobile-menu-toggle-link">☰ 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(...);
});