Chronos
Aktives Mitglied
Hallo Forum,
seit einer kleinen Weile beschäftige ich mich mit JavaScript, insbesondere mit jQuery und habe mich dabei immer an diesen nützlichen Best practices-Guide gehalten (http://gregfranko.com/jquery-best-practices/#/4) - mir geht es jetzt vor allem um das Ready Event. In dem Guide wird es in 4 Schritten erklärt wie man das Ready-Event schreiben kann, die ersten beiden sind wohl die am häufigsten Genutzten.
Bei diesem Guide fehlt mir leider ein wenig das "warum", warum machen die Varianten es nun besser?
Mit diesen Varianten habe ich ein kleines Beispiel aufgebaut, es gibt eine Funktion die einmal im Ready und einmal auf klick auf einen Button ausgeführt wird.
HTML:
1. Variante, so wie wir es alle kennen:
Die erste Variante bedarf keiner Erklärung bei der jetzt folgenden zweiten würde ich gern wissen:
- Warum kann ich das in der Kurzform schreiben?
2. Variante, etwas kürzer:
3. Die "better"-Variante, nachfolgend ein paar Fragen
Hier trennt man seine Funktionsdefinitionen von dem Part der im Ready ausgeführt werden soll.
Dort gehören dann alle Selektoren und Funktionsaufrufe hin - da ja auch erst hier alles im DOM verfügbar ist - liege ich da soweit richtig?
Den Rest verstehe ich leider nicht wirklich, warum die IIFE-Schreibweise, warum das "// The $ is now locally scoped "? Da bräuchte ich noch etwas Erklärung bitte.
4. Die "best"- Variante:
Anmerkung auf der verlinkten Seite ist wohl auch ein "}" zum Schluss zu viel.
Eigentlich ähnlich, aber vor allem den yourcode Part als Paraemter übergeben, das versteh ich dann leider gar nicht mehr.
Ich muss gestehen, das ich mich um die Details nie Gedanken gemacht habe, mit der Short-Variante war es meistens schon getan - aber jetzt würde ich das alles gern genauer wissen.
Könnt ihr mir helfen das besser zu verstehen und mir Erläutern was warum etwas macht?
seit einer kleinen Weile beschäftige ich mich mit JavaScript, insbesondere mit jQuery und habe mich dabei immer an diesen nützlichen Best practices-Guide gehalten (http://gregfranko.com/jquery-best-practices/#/4) - mir geht es jetzt vor allem um das Ready Event. In dem Guide wird es in 4 Schritten erklärt wie man das Ready-Event schreiben kann, die ersten beiden sind wohl die am häufigsten Genutzten.
Bei diesem Guide fehlt mir leider ein wenig das "warum", warum machen die Varianten es nun besser?
Mit diesen Varianten habe ich ein kleines Beispiel aufgebaut, es gibt eine Funktion die einmal im Ready und einmal auf klick auf einen Button ausgeführt wird.
HTML:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Best Practices</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./1-dom-ready.js"></script>
<script src="./2-dom-ready-short.js"></script>
<script src="./3-dom-ready-better.js"></script>
<script src="./4-dom-ready-best.js"></script>
</head>
<body>
<button id="clicker">Klick mich :)</button>
</body>
</html>1. Variante, so wie wir es alle kennen:
Code:
$("document").ready(function() {
var btn = $('#clicker');
function writer(txt) {
return txt;
}
btn.on({
"click": function() {
console.log(writer('dom-ready long - click'));
}
});
console.log(writer('dom-ready long'));
});Die erste Variante bedarf keiner Erklärung bei der jetzt folgenden zweiten würde ich gern wissen:
- Warum kann ich das in der Kurzform schreiben?
2. Variante, etwas kürzer:
Code:
$(function() {
var btn = $('#clicker');
function writer(txt) {
return txt;
}
btn.on({
"click": function() {
console.log(writer('dom-ready short - click'));
}
});
console.log(writer('dom-ready short'));
});3. Die "better"-Variante, nachfolgend ein paar Fragen
Code:
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
var btn = $('#clicker');
btn.on({
"click": function() {
console.log(writer('dom-ready better - click'));
}
});
console.log(writer('dom-ready better'));
});
// The rest of the code goes here!
function writer(txt) {
return txt;
}
}(window.jQuery, window, document));Hier trennt man seine Funktionsdefinitionen von dem Part der im Ready ausgeführt werden soll.
Dort gehören dann alle Selektoren und Funktionsaufrufe hin - da ja auch erst hier alles im DOM verfügbar ist - liege ich da soweit richtig?
Den Rest verstehe ich leider nicht wirklich, warum die IIFE-Schreibweise, warum das "// The $ is now locally scoped "? Da bräuchte ich noch etwas Erklärung bitte.
4. Die "best"- Variante:
Code:
// IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
var btn = $('#clicker');
btn.on({
"click": function() {
console.log(writer('dom-ready best - click'));
}
});
console.log(writer('dom-ready best'));
});
// The rest of the code goes here!
function writer(txt) {
return txt;
}
}));Eigentlich ähnlich, aber vor allem den yourcode Part als Paraemter übergeben, das versteh ich dann leider gar nicht mehr.
Ich muss gestehen, das ich mich um die Details nie Gedanken gemacht habe, mit der Short-Variante war es meistens schon getan - aber jetzt würde ich das alles gern genauer wissen.
Könnt ihr mir helfen das besser zu verstehen und mir Erläutern was warum etwas macht?
