Wie verwende ich require.js? Lassen Sie JS schneller laden-js-Tutorial-php.cn

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

PHP中文网

Freigeben： 2017-06-21 10:59:39

Original

1765 Leute haben es durchsucht

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;
　　　　};　
});

Nach dem Login kopieren

//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>

Nach dem Login kopieren

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)]
　　　　};　
});

Nach dem Login kopieren

//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>

Nach dem Login kopieren

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!