Heim >Web-Frontend >js-Tutorial >Wie verwende ich require.js? Lassen Sie JS schneller laden

Wie verwende ich require.js? Lassen Sie JS schneller laden

PHP中文网Original: 2017-06-21 10:59:391871Durchsuche

Wenn eine Webseite viele js-Dateien einführt, wird das Laden der Webseite sehr langsam und die js-Dateien weisen Abhängigkeiten auf. Manchmal können sie nicht ausgeführt werden, wenn sie in der umgekehrten Reihenfolge ausgeführt werden, was die Benutzererfahrung stark beeinträchtigt.

require.js löst das asynchrone Laden und verbessert das Laden von Webseiten. Gleichzeitig können js, die auf der Reihenfolge basieren, nach Arrays sortiert werden.

Der erste Teil lädt require.js und legt es im js-Unterverzeichnis des Verzeichnisses ab:

muss einen Parameter hinzufügen defer async="true" bedeutet dies: Die Datei muss asynchron geladen werden und ist mit der IE-Version kompatibel.

muss data-main="js/main" hinzufügen, um anzuzeigen dass main.js unter js das Hauptlademodul ist. Sie müssen bei der Arbeit streng sein.

require()-Funktion akzeptiert zwei Parameter. Der erste Parameter ist ein Array, das die Module angibt, von denen es abhängt, und der zweite Parameter ist die Rückgabefunktion, die aufgerufen wird, nachdem alle vorherigen Module erfolgreich geladen wurden.

//main.js:

define(function (require,exports,module){
　　　　exports.add = function (x,y){
　　　　　　return x+y;
　　　　};　
});

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>require(['main'], function (math){
　　　        　alert(math.add(1,1));
　　            });</script></head><body></body></html>

Gib a zurück 2, es wird erfolgreich angezeigt.

werden zusammen aufgerufen

//b.js:

define(function (require,exports,module){
　　　　exports.add = function (obj,oEv,show){
　　　　　　return obj[addEventListener(oEv,show,false)]
　　　　};　
});

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>var btn=document.getElementById('btn');function show(){
                alert('弹出')
            }
            require(['main','main'], function (math){
    　　　        math.add(btn,'click',show);
                alert(math.add(1,1));
　　            });</script></head><body><button id="btn">提交</button></body></html>

Lesen Sie diesen Artikel und hinterlassen Sie bitte eine Nachricht, wenn etwas Unangemessenes vorliegt.

Das obige ist der detaillierte Inhalt vonWie verwende ich require.js? Lassen Sie JS schneller laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in Ajax und Tutorial zum Schreiben von nativem Ajax in JSNächster Artikel：Einführung in Ajax und Tutorial zum Schreiben von nativem Ajax in JS

In Verbindung stehende Artikel

Mehr sehen