suchen

Heim >Web-Frontend >js-Tutorial >Mehrere Möglichkeiten zum Importieren von JS-Dateien ohne Verwendung von Skripten

Mehrere Möglichkeiten zum Importieren von JS-Dateien ohne Verwendung von Skripten

高洛峰
高洛峰Original
2016-12-08 14:50:481714Durchsuche

Methode 1: Nativ

Der Inhalt von adc.js ist wie folgt: 

var hello = "H9";

html.html

<script>
      var s = document.createElement("script");
      s.src = "abc.js";
      document.head.appendChild(s);
      s.addEventListener("load",function(){
        // 等待s的load事件加载完响应，防止未加载完就调用出错
        console.log(hello);
      })
 
      setTimeout(function(){//或者使用定时器保证其载入完后调用（不安全，不如监听事件好）
        console.log(hello);
      },1000);
     // $.getScript("abc.js");
  </script>

Methode 2: jquery.js

$.getScript("abc.js",function(){ alert("heheheh"); console.log(hello); });

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$(&#39;#loadButton&#39;).click(function(){
$.getScript(&#39;new.js&#39;,function(){
newFun(&#39;"Checking new script"&#39;);//这个函数是在new.js里面的，当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>

Methode 3: require.js

require.js teilt Version 2.1.1. Beachten Sie, dass es für große Projekte geeignet ist.

index.html

7f9f866e87d0dce8822a0d41cffa3cf5
fd9c5f5075dceff1898f60be3827dd002cacc6d41bbb37262a98f745aa00fbf0

main.js

console.log("你好世界");
require(["js1","js2","js3"],function () {
  // 是异步加载导入。js后缀可以省略
  console.log("你们加载完了么？");
  var total = num1+num2+num3;
  console.log(total);
  hello1();
  hello2();
  hello3();
})

Sie können js-Dateien einfach mit requireJs importieren, Sie müssen jedoch auf den Konflikt zwischen Variablennamen und Methodennamen in JS-Dateien achten. Ursache: Browser-JS-Dateien teilen sich den globalen Bereich und Variablennamen und Methodennamen im Bereich können überschrieben werden


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：Die JS-Funktion ändert den Elementinhalt von HTML und wie der Attributinhalt geändert wirdNächster Artikel：Die JS-Funktion ändert den Elementinhalt von HTML und wie der Attributinhalt geändert wird

In Verbindung stehende Artikel

Mehr sehen