Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verbesserung der JS-Methode zum dynamischen Laden von jquery getScript

Detaillierte Erläuterung der Verbesserung der JS-Methode zum dynamischen Laden von jquery getScript

巴扎黑Original: 2017-07-03 10:09:481469Durchsuche

Viele Freunde müssen die getScript-Methode verwenden, um JS dynamisch zu laden. In diesem Artikel wird detailliert beschrieben, wie diese Funktion implementiert wird.

Code kopieren

$.getScript (url,callback)

Diese Methode ist eine von jquery selbst bereitgestellte Methode zum dynamischen Laden von js. Wenn eine Website eine große Menge an JS laden muss, ist das dynamische Laden von JS eine bessere Methode. Wenn eine bestimmte Funktion benötigt wird, wird das entsprechende JS geladen.
Allerdings stellte ich fest, dass ich bei der Verwendung etwas unzufrieden war.

Jedes Mal, wenn Sie diese Funktion ausführen müssen, werden Sie dieses js anfordern. Ist das nicht ein schlechter Dienst?
Also habe ich die API-Beschreibung der offiziellen Jquery-Website gefunden: http://api.jquery.com/jQuery.getScript/
Tatsächlich ist diese Methode eine Kapselung der Ajax-Methode. Sie können die Caching Um den http-Status 200 auf 304 zu ändern und dabei den Cache des Clients zu nutzen:

Der Code lautet wie folgt:

$. ajaxSetup({
cache: true
});

Sie werden also feststellen, dass jedes Mal, wenn Sie diese Funktion aufrufen, Folgendes aussieht:

Jedes Mal, wenn js aufgerufen wird, verschwinden die folgenden Parameter wie „?_=13126578“ und der Status lautet „Nicht geändert“.
Aber ich bin ein bisschen keimfeindlich, obwohl der Server jedes Mal, wenn ich diese Funktion verwende, nicht mehr die gesamte js-Datei zurückgeben muss, was mir immer ein Unbehagen bereitet. Daraus entstand der Titel dieses Blogs.
Beginnen wir ohne weitere Umschweife mit dem Code:

Der Code lautet wie folgt:

<!DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script src="jquery-1.7.2.min.js" type="text/
javascript
"></script> 
<script type="text/javascript"> 
//定义一个全局script的标记数组，用来标记是否某个script已经下载到本地 
var scriptsArray = new Array(); 
$.cachedScript = function (url, options) { 
//
循环
script标记数组 
for (var s in scriptsArray) { 
//console.log(scriptsArray[s]); 
//如果某个数组已经下载到了本地 
if (scriptsArray[s]==url) { 
return { //则返回一个
对象
字面量，其中的done之所以叫做done是为了与下面$.ajax中的done相对应 
done: function (method) { 
if (typeof method == &#39;function&#39;){ //如果传入参数为一个方法 
method(); 
} 
} 
}; 
} 
} 
//这里是jquery官方提供类似getScript实现的方法，也就是说getScript其实也就是对ajax方法的一个拓展 
options = $.extend(options || {}, { 
dataType: "script", 
url: url, 
cache:true //其实现在这缓存加与不加没多大区别 
}); 
scriptsArray.push(url); //将url地址放入script标记数组中 
return $.ajax(options); 
}; 
$(function () { 
$(&#39;#btn&#39;).bind(&#39;click&#39;, function () { 
$.cachedScript(&#39;t1.js&#39;).done(function () { 
alertMe(); 
}); 
}); 
$(&#39;#btn2&#39;).bind(&#39;click&#39;, function () { 
$.getScript(&#39;t1.js&#39;).done(function () { 
alertMe(); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<button id="btn">自定义的缓存方法</button> 
<br /> 
<button id="btn2">getScript</button> 
</body> 
</html>

Der Code in t1.js ist ebenfalls eine Funktion

Der Code lautet wie folgt:

function warningMe() {
alert('clicked me');

Hier die gesamte Transformation. Wenn Sie diese Funktion verwenden, stellen Sie während der Initialisierung nur eine js-Anfrage an den Server. Nach Abschluss des Ladevorgangs wird der Server nicht erneut angefordert, auch wenn er 304 ist 🎜>Statuscode
Es wird keinen mehr geben.
Ich bin ein Neuling in js, bitte streicheln Sie mich, O(∩_∩)O~

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verbesserung der JS-Methode zum dynamischen Laden von jquery getScript. 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：Detaillierte Erläuterung der Verwendung der getJSON-Methode zum Abrufen einer JSON-DateninstanzNächster Artikel：Detaillierte Erläuterung der Verwendung der getJSON-Methode zum Abrufen einer JSON-Dateninstanz

In Verbindung stehende Artikel

Mehr sehen