Wie strukturiert man JavaScript-Dateien?

Question

Ich habe

• base.html
• pageA.html
• pageB.html
• pageA.js

• pageB.js

  1. pageA.js enthält den Code für pageA.html, pageB.js enthält den Code für pageB.html.
  2. Sowohl pageA.js als auch pageB.js verwenden jQuery.

Derzeit füge ich alle Skripte in base.html ein, wie folgt:

Ich möchte pageA.js nur für pageA.html und pageB.js für pageB.html laden, da der Code in jeder Datei nicht auf der anderen Seite benötigt wird.

Ich habe die requires.js Bibliothek angesehen, bin mir aber noch nicht sicher, ob sie die richtige Lösung für mein Problem ist. Was sind die besten Praktiken zur Strukturierung von JavaScript-Dateien in dieser Art von Situation?

Answer 1

Haben Sie JavaScript, um die Inhalte jeder HTML-Datei zu laden? Wenn ja, und Sie haben JavaScript-Code, der ausgeführt wird, sobald jede Datei geladen ist, können Sie die erforderlichen Setup-Funktionen innerhalb der Load-Funktion aufrufen, wie folgt:

base.html

$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html', function()
{
setupPageA(); // in pageA.js definiert
});
});

$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html', function()
{
setupPageB(); // in pageB.js definiert
});
});
});

Seite A laden
Seite B laden

Oder wenn Sie einfach nur möchten, dass pageA.js ausgeführt wird, wenn pageA.html geladen wird, können Sie einfach das Skript-Element pageA.js in pageA.html selbst einbauen, so wie hier:

pageA.html:

Seite A

pageB.html:

Seite B

base.html:

$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html');
});

$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html');
});
});

Seite A laden
Seite B laden

Die dynamische Skript-SRC-Lösung:

base.html:

function loadScript(script)
{
// Den vorhandenen Skript-Tag ändern
if($('#dynamicScriptTag').length != 0)
{
$('#dynamicScriptTag').attr('src', script);
}
else // Skript-Tag erstellen
{
$('<script>').attr('type', 'text/javascript')
.attr('src', script)
.attr('id', 'dynamicScriptTag')
.appendTo('head');
}
}

$(document).ready(function()
{
$('#loadPageA').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageA.html', function()
{
loadScript('js/scriptA.js');
testScriptB(); // testen, ob wir immer noch eine Funktion in scriptB.js aufrufen können
});
});

$('#loadPageB').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageB.html', function()
{
loadScript('js/scriptB.js')
testScriptA(); // testen, ob wir immer noch eine Funktion in scriptA.js aufrufen können
});
});
});

Seite A laden
Seite B laden

pageA.html:

Seite A

pageB.html:

Seite B

js/scriptA.js:

console.log($('#pageAContents').text());
function testScriptA(){ console.log('Kann immer noch testScriptA aufrufen!'); }

js/scriptB.js:

console.log($('#pageBContents').text());
function testScriptB(){ console.log('Kann immer noch testScriptB aufrufen!'); }

Answer 2

Ich denke, das Beste, was Sie tun können, ist das Hinzufügen des am Ende der pageX.html WENN diese Seite dynamisch geladen wird. Wenn die Seite nicht dynamisch geladen wird, kann sie vor jquery.js geladen werden und Ihr JavaScript unterbrechen.

Oder Sie können die aktuelle URL lesen und das richtige Skript basierend auf diesen Informationen laden, so:

var scriptPfad;
var currentPage = window.location.pathname;

if (currentPage == "pageA.html")
{
    scriptPath = "pageA.js";
}
else if (currentPage == "pageB.html")
{
    scriptPath = "pageB.js";
}

var scriptElement = document.createElement("script");
scriptElement.setAttribute("type", "text/javascript");
scriptElement.setAttribute("src", scriptPath);

document.getElementsByTagName("head")[0].appendChild(scriptElement);

Answer 3

Ich habe Jinja (eine Template-Engine) verwendet, um die Javascript-Dateien wie folgt einzufügen:

base.html

      {% block contents %}
      {% endblock %}

      {% block scripts %}      
      {% endblock %}       

pageA.html

{% block contents %}
   ..Inhalte für Seite A..
{% endblock %}
{% block scripts %}

{% endblock %}

Wenn du eine Template-Engine verwendest, könnte dies eine geeignete Lösung sein.