Hallo zusammen,
Ich habe ein Javascript eines Templates, welches in jeder HTML-Datei eingebunden wird und durch einen Inline-Script-Befehl aktiviert wird. In diesem Script werden eigentlich für alle Seiten die gleichen Scripte geladen (werden überall gebraucht).
Das Script:
JavaScript
/*
* Template Name: Unify - Responsive Bootstrap Template
* Description: Business, Corporate, Portfolio, E-commerce and Blog Theme.
* Version: 1.7
* Author: @htmlstream
* Website: http://htmlstream.com
*/
var App = function() {
//Bootstrap Tooltips and Popovers
function handleBootstrap() {
/*Bootstrap Carousel*/
jQuery('.carousel').carousel({
interval: 15000,
pause: 'hover'
});
/*Tooltips*/
jQuery('.tooltips').tooltip();
jQuery('.tooltips-show').tooltip('show');
jQuery('.tooltips-hide').tooltip('hide');
jQuery('.tooltips-toggle').tooltip('toggle');
jQuery('.tooltips-destroy').tooltip('destroy');
/*Popovers*/
jQuery('.popovers').popover();
jQuery('.popovers-show').popover('show');
jQuery('.popovers-hide').popover('hide');
jQuery('.popovers-toggle').popover('toggle');
jQuery('.popovers-destroy').popover('destroy');
}
//Search Box (Header)
function handleSearch() {
jQuery('.search').click(function() {
if (jQuery('.search-btn').hasClass('fa-search')) {
jQuery('.search-open').fadeIn(500);
jQuery('.search-btn').removeClass('fa-search');
jQuery('.search-btn').addClass('fa-times');
} else {
jQuery('.search-open').fadeOut(500);
jQuery('.search-btn').addClass('fa-search');
jQuery('.search-btn').removeClass('fa-times');
}
});
}
//Sidebar Navigation Toggle
function handleToggle() {
jQuery('.list-toggle').on('click', function() {
jQuery(this).toggleClass('active');
});
}
//Header Mega Menu
function handleMegaMenu() {
jQuery(document).on('click', '.mega-menu .dropdown-menu', function(e) {
e.stopPropagation();
})
}
//Hover Selector
function handleHoverSelector() {
$('.hoverSelector').on('hover', function(e) {
$('.hoverSelectorBlock', this).toggleClass('show');
e.stopPropagation();
});
}
//Equal Height Columns
function handleEqualHeightColumns() {
var EqualHeightColumns = function() {
$(".equal-height-columns").each(function() {
heights = [];
$(".equal-height-column", this).each(function() {
$(this).removeAttr("style");
heights.push($(this).height()); // write column's heights to the array
});
$(".equal-height-column", this).height(Math.max.apply(Math, heights)); //find and set max
});
}
EqualHeightColumns();
$(window).resize(function() {
EqualHeightColumns();
});
$(window).load(function() {
EqualHeightColumns("img.equal-height-column");
});
}
function handleBrowserUpdate() {
var $buoop = {
c: 2
};
function $buo_f() {
var e = document.createElement("script");
e.src = "//browser-update.org/update.min.js";
document.body.appendChild(e);
};
try {
document.addEventListener("DOMContentLoaded", $buo_f, false)
} catch (e) {
window.attachEvent("onload", $buo_f)
}
}
//Hover Selector
function handleAnalytics() {
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '***************', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
}
return {
init: function() {
handleBootstrap();
handleSearch();
handleToggle();
handleMegaMenu();
handleHoverSelector();
handleEqualHeightColumns();
handleBrowserUpdate();
handleAnalytics();
},
//Scroll Bar
initScrollBar: function() {
jQuery('.mCustomScrollbar').mCustomScrollbar({
theme: "minimal",
scrollInertia: 300,
scrollEasing: "linear"
});
},
//Parallax Backgrounds
initParallaxBg: function() {
jQuery(window).load(function() {
jQuery('.parallaxBg').parallax("50%", 0.2);
jQuery('.parallaxBg1').parallax("50%", 0.4);
});
},
//Animate Dropdown
initAnimateDropdown: function() {
function MenuMode() {
jQuery('.dropdown').on('show.bs.dropdown', function(e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
jQuery('.dropdown').on('hide.bs.dropdown', function(e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
}
jQuery(window).resize(function() {
if (jQuery(window).width() > 768) {
MenuMode();
}
});
if (jQuery(window).width() > 768) {
MenuMode();
}
},
};
}();
gestartet wird es mit:
HTML
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
vor dem </body>
jetzt möchte ich aber das die app.js ohne den inline-Befehl startet und hab am Schluss der app.js folgendes dazu notiert:
JavaScript
jQuery(document).ready(function() {
App.init();
});
was auch funktioniert - nun meine eigentliche Frage:
geht das nicht einfacher bzw. sauberer?
die
JavaScript
var App = function()beinhaltet für jedes - sowieso - gewolltes javasript-Schnipsel eine eigene
JavaScript
function handleIrgendetwas()und wird dann ein paar Zeilen später mit
JavaScript
return {
init: function() {
handleIrgendwas();
},
bereitgestellt um dann auch noch per inline-Befehl initiiert werden zu müssen.
Eventuell kann mir da einer von euch einen Tipp geben - mir kommt das ganze zu kompliziert vor
Grüße aus Bayern
