javascript - Hur man lägger till jQuery i JS-fil

Jag har lite kod som är specifik för att sortera tabeller. Eftersom koden är vanlig på de flesta sidor vill jag göra en JS-fil som kommer att ha koden och alla sidor som använder den kan referera till den därifrån.

Problemet är: Hur lägger jag till jQuery och tabellsorterings-pluginet i den .js-filen?

Jag försökte något liknande detta:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></script>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></script>');

men detta verkar inte fungera.

Vad är det bästa sättet att göra detta?

Svar #1

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.3.min.js'; // Check https://jquery.com/ for the current version
document.getElementsByTagName('head')[0].appendChild(script);

Svar #2

Om du vill inkludera jQuery-kod från en annan JS-fil borde detta göra tricket:

Jag hade följande i min HTML-fil:

<script src="jquery-1.6.1.js"></script>
<script src="my_jquery.js"></script>

Jag skapade en separat my_jquery.js-fil med följande:

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault();
    $(this).hide("slow");
  });
});

Svar #3

Du kan använda koden nedan för att ladda jQuery i din JS-fil. Jag har också lagt till en jQuery JSFiddle som fungerar och använder en självexekverande funktion.

// Anonymous "self-invoking" function
(function() {
    var startingTime = new Date().getTime();
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);

    // Poll for jQuery to come into existance
    var checkReady = function(callback) {
        if (window.jQuery) {
            callback(jQuery);
        }
        else {
            window.setTimeout(function() { checkReady(callback); }, 20);
        }
    };

    // Start polling...
    checkReady(function($) {
        $(function() {
            var endingTime = new Date().getTime();
            var tookTime = endingTime - startingTime;
            window.alert("jQuery is loaded, after " + tookTime + " milliseconds!");
        });
    });
})();

Annat alternativ : - Du kan också prova Require.JS som är en JS-modulladdare.

Svar #4

/* Adding the script tag to the head as suggested before */

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-2.2.1.min.js";

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = handler;
    script.onload = handler;

    // Fire the loading
    head.appendChild(script);

    function handler(){
       console.log('jquery added :)');
    }

Relaterade artiklar