ホームページ > 記事 > ウェブフロントエンド > スクリプトを使用せずに js ファイルをインポートするいくつかの方法
スクリプトを使用せずに js ファイルをインポートするいくつかの方法
- 高洛峰オリジナル
- 2016-12-08 14:50:481689ブラウズ
方法 1: ネイティブ
adc.js の内容は次のとおりです:
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>
方法 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()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
方法 3 ：require.js
require.js はバージョン 2.1.1 を共有します。この場合は、jquery を使用してください。
index.html
7f42f08b94e59059fd58660afdf9360c
8f4d94d1c8df4a18a94a14a0d9c7843b
main.js
console.log("你好世界");
require(["js1","js2","js3"],function () {
// 是异步加载导入。js后缀可以省略
console.log("你们加载完了么？");
var total = num1+num2+num3;
console.log(total);
hello1();
hello2();
hello3();
})
requireJs を使用すると簡単に js ファイルをインポートできますが、js ファイル内の変数名とメソッド名の競合の問題に注意する必要があります。 原因: ブラウザーの js ファイルはグローバル スコープを共有しており、スコープ内の変数名とメソッド名は上書きされる可能性があります
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。