Wie kann ich eine in jQuery.ready definierte Funktion global verfügbar machen?

70

Ich habe eine Funktion, die die YouTube-ID von einer URL entfernt. Ich möchte diese Funktion dann 10 Mal pro Seite (in der WordPress-Schleife) verwenden.

Die Funktion funktioniert hervorragend, wenn ich die URL in meine Funktionsskript-Tags einfüge, aber wenn ich einen neuen Satz von Skript-Tags in der Schleife starte, funktioniert sie nicht.

Ich muss wissen, wie ich meine Funktion verwenden kann, ohne vorher alles zu deklarieren.

Das ist also der Code, den ich in der Kopfzeile habe:

 <script type="text/javascript"> 
$(document).ready(function() {
var getList = function(url, gkey){
        var returned = null;
        if (url.indexOf("?") != -1){
          var list = url.split("?")[1].split("&"),
                  gets = [];

          for (var ind in list){
            var kv = list[ind].split("=");
            if (kv.length>0)
                gets[kv[0]] = kv[1];
        }

        returned = gets;

        if (typeof gkey != "undefined")
            if (typeof gets[gkey] != "undefined")
                returned = gets[gkey];

        }

            return returned;

    };


        // THIS WORKS

    alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));


      });

Aber wenn ich versuche, dies irgendwo anders auf der Seite zu verwenden, funktioniert es nicht.

 <script type="text/javascript"> 

      $(document).ready(function() {
              alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
      };
      </script>

Firebug gibt mir getList ist nicht definiert , was Sinn macht, weil es nicht ist. Kann ich diese Funktion "global" deklarieren?

javascript jquery wesbos
quelle
Entschuldigung für die schlechte Formatierung, jedes Mal, wenn ich den Code bearbeite, wird es seltsam. Der Code ist gültig.
Wesbos
Übrigens: Wenn Sie es in document.ready deklarieren, bedeutet dies, dass es nur definiert wird, wenn das Dokument fertig ist (nachdem die Seite geladen wurde). Sie sollten die Funktion also aufrufen, wenn Sie sicher sind, dass sie definiert ist. Das Deklarieren als globales Objekt reicht möglicherweise nicht aus, wenn die Deklaration selbst ausgeführt wird, nachdem Sie versucht haben, sie zu verwenden.
Tomasz Struczyński

Antworten:

102

Sie haben zwei Möglichkeiten: Fügen Sie es dem windowObjekt hinzu, um es global zu machen:

window.getList = function(url, gkey){ 
    // etc...
}

oder verschieben Sie es aus dem dokumentenbereiten Ereignishandler in den globalen Bereich:

$(document).ready(function() {  
    alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
});  
var getList = function(url, gkey){  

    var returned = null;  
    if (url.indexOf("?") != -1){  
      var list = url.split("?")[1].split("&"),  
              gets = [];  

      for (var ind in list){  
        var kv = list[ind].split("=");  
        if (kv.length>0)  
            gets[kv[0]] = kv[1];  
    }  

    returned = gets;  

    if (typeof gkey != "undefined")  
        if (typeof gets[gkey] != "undefined")  
            returned = gets[gkey];  

    }  

        return returned;  

};

Vielleicht möchten Sie auch diese Frage zur Verwendung von var functionName = function () {}vs function functionName() {}und diesen Artikel zum variablen Bereich lesen .

Andy E.
quelle
44

Eine weitere Option besteht darin, die Funktion vom jQuery-Objekt selbst abzuhängen. Auf diese Weise vermeiden Sie, den globalen Namensraum weiter zu verschmutzen:

jQuery.getlist = function getlist(url, gkey) {
  // ...
}

Dann können Sie mit "$ .getlist (URL, Schlüssel)" darauf zugreifen.

Spitze
quelle
Dank dir habe ich gerade meine erste jQuery-Funktion gemacht, großartig! Wenn es eine umfassendere Ressource gibt, um Ihre eigenen jQuery-Funktionen zu erstellen
PJ Brunet
8

deklarieren Sie getList () außerhalb der ready () - Funktion.

var getList = function(url, gkey){
        var returned = null;
        if (url.indexOf("?") != 
....
....
...
};

Jetzt funktioniert die getList an einer beliebigen Stelle im Code:

$(document).ready( function() {
alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
});

Das Problem war der Umfang der Funktion getList (.).

coolest_head
quelle
2

Definieren Sie es einfach als reguläre Funktion oben in Ihrem Skript: 

<script type="text/javascript">
    function getlist(url, gkey){  
        ...
    }
</script>
Travelling Tech Guy
quelle
Unabhängig davon ist dies der Fall, aber es ist keine gute Lösung. In diesem Fall haben Sie beispielsweise die jQuery-Funktion in einem anderen Seitenkopf definiert und möchten sie im img-Element als onclick = "$. Function ()" verwenden. Andere Antworten müssen besser sein.
QMaster
1
Ich bin mir nicht sicher, ob ich Ihren Kommentar (und Ihre Ablehnung) verstehe. Dieser Code beantwortet die Frage, wie eine Funktion im globalen Namespace außerhalb des jQuery-Handlers erstellt wird.
Travelling Tech Guy
Globaler Wortpunkt bedeutet [global]. Ich gehe davon aus, dass die globale Funktion von jedem Java-Skriptabschnitt aus zugänglich ist, aber das stimmt nicht, wenn Sie nur oben in Skripten definieren. Ich erwähnte ein Beispiel von {inside img element als onclick = "$. Function ()"}. Schließlich dient die Abwärtsabstimmung nur dazu, dem Benutzer zu helfen, die beste Antwort zu finden. Mit freundlichen Grüßen.
QMaster
2

Sie können Ihre Funktion einfach in die $.fnVariable einfügen:

(function ($) {

   $.fn.getList = function() {
       // ...
   };

}(jQuery));

Anwendungsbeispiel:

$().getList();

Dies tun Sie normalerweise beim Erstellen eines Basis-Plugins für jQuery.

melkowski
quelle
Antwort ok, aber verpasste Klammern @Andrew
Nuri YILMAZ
-4

Um es als globale Funktion zu deklarieren, entfernen Sie einfach alle jQuery-spezifischen Bits. Etwas wie das:

function getList(url, gkey) {
    var returned = null;
    if (url.indexOf("?") != -1){
    var list = url.split("?")[1].split("&"), gets = [];
    for (var ind in list){
        var kv = list[ind].split("=");
        if (kv.length>0) {
            gets[kv[0]] = kv[1];
        }
    }

    returned = gets;

    if (typeof gkey != "undefined") {
        if (typeof gets[gkey] != "undefined") {
            returned = gets[gkey];
        }
    }

    return returned;
}

Und dann sollten Sie es von überall aus anrufen können.

Farinha
quelle
Das macht keinen Sinn. Wenn er jQuery verwendet hat, dann aus einem bestimmten Grund. Warum also nicht mehr? Wenn Sie etwas in $ (document) .ready deklarieren, wird sichergestellt, dass die gesamte Seite geladen wird, was manchmal unerlässlich ist. Das Mischen der document.ready-Deklaration mit der aufrufenden Funktion außerhalb dieses Bereichs kann natürlich schlecht sein, aber das einfache Entfernen des jQuery-Aufrufs ist nicht gerade eine Lösung. Sie sollten zumindest erklären, warum das Entfernen von jquery gut ist.
Tomasz Struczyński
3
UPDATE: ok, ich wurde mitgerissen, deine Antwort ist eigentlich nicht so schlecht. Was jedoch fehlt, ist eine Erklärung, welche Vorteile und Gefahren es hat, es außerhalb des Dokuments zu verschieben. Bereits der Umfang, die Unterschiede zwischen den Deklarationen var x = function (...) und function x (...) und so weiter. Ohne es ist es irgendwie wie Magie - löst ein bestimmtes Problem, aber ohne zu wissen, warum es funktioniert.
Tomasz Struczyński