Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Laden von Skripten in js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Vor Kurzem muss das Front-End-Kartenprodukt des Unternehmens in Module unterteilt werden. Es besteht die Hoffnung, dass Benutzer entsprechend der von ihnen verwendeten Funktion laden.
Also habe ich überall gesucht, um das Laden dynamischer JS-Skripte zu untersuchen, aber es ist wirklich traurig! , es gibt fast die gleichen Artikel im Internet, 4 Methoden Ich hasse Leute, die die Ergebnisse anderer Leute kopieren und keinen Link zum Originalartikel hinzufügen. Warum! Der Punkt ist, dass die letzte Methode immer noch ein wenig falsch ist. Nach zwei Tagen Recherche und Information möchte ich es hier mit euch teilen.
Zuerst müssen wir eine package.js in einem festen Ordner erstellen. Nachdem ich sie geöffnet habe, ist der Code wie folgt
function functionOne(){
alert("成功加载");
}
Methode 1: Direkt document.write
Erstellen Sie eine function1.html im selben Ordner mit dem folgenden Code:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
//加载js脚本
document.write("<script src='package.js'><\/script>");
//加载一个按钮
document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
//如果马上使用会找不到，因为还没有加载进来，此处会报错
functionOne();
}
function operation()
{
//可以运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>
Methode 2: Ändern Sie dynamisch das src-Attribut eines vorhandenen Skripts
Erstellen Sie eine function2.html im selben Ordner mit dem folgenden Code:
<html>
<head>
<title></title>
<script type="text/javascript" id="yy" src=""></script>
<script type="text/javascript">
function init()
{
yy.src = "package.js";
//如果马上使用会找不到，因为还没有加载进来，此处会报错
functionOne();
}
function operation()
{
//可以运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
<input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>
Methode 3: Skriptelemente dynamisch erstellen (asynchron)
Erstellen Sie eine function3.html im selben Ordner mit dem folgenden Code:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.src="package.js";
document.body.appendChild(myScript);
//如果马上使用会找不到，因为还没有加载进来
functionOne();
}
function operation()
{
//可以运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
<input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>Diese drei Methoden werden alle asynchron ausgeführt, sodass die Skripte auf der Hauptseite beim Laden dieser Skripte weiterhin ausgeführt werden. Wenn die oben genannten Methoden verwendet werden, hat der folgende Code nicht die erwartete Wirkung.
Sie können jedoch vor functionOne eine Warnung hinzufügen, um die Ausführung des Hauptseitenskripts zu blockieren. Dann stellen Sie fest, dass functionOne ausgeführt werden kann, oder Ihr späterer Code muss unter einer anderen Schaltfläche ausgeführt werden. Oder definieren Sie einfach einen Timer und führen Sie den folgenden Code nach einer festgelegten Zeit aus. Es ist jedoch definitiv unmöglich, diese Methoden im Projekt zu verwenden.
Tatsächlich kann die dritte Methode mit ein paar Änderungen auf synchrones Laden umgestellt werden.
Methode 4: Skriptelemente dynamisch erstellen (synchron)
Erstellen Sie eine function4.html im selben Ordner mit dem folgenden Code:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>
