導航:首頁 > 文件教程 > require引入2個js文件

require引入2個js文件

發布時間:2025-01-09 11:22:26

⑴ 怎麼在一個js文件中包含另一個JS文件

方法1:
document.write("引用的js路徑");
方法2:
使用第三方框架,比如requirejs

⑵ require同步載入是怎麼實現的

最早的時候,所有javascript代碼都寫在一個文件裡面,只要載入這一個文件就夠了。後來,代碼越來越多,一個文件不夠了,必須分成多個文件,依次載入。下面的網頁代碼,相信很多人都見過。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
這段代碼依次載入多個js文件。
這樣的寫法有很大的缺點。首先,載入的時候,瀏覽器會停止網頁渲染,載入文件越多,網頁失去響應的時間就會越長;其次,由於js文件之間存在依賴關系,因此必須嚴格保證載入順序(比如上例的1.js要在2.js的前面),依賴性最大的模塊一定要放到最後載入,當依賴關系很復雜的時候,代碼的編寫和維護都會變得困難。
require.js的誕生,就是為了解決這兩個問題:

(1)實現js文件的非同步載入,避免網頁失去響應;
(2)管理模塊之間的依賴性,便於代碼的編寫和維護。
二、require.js的載入
使用require.js的第一步,是先去官方網站下載最新版本
下載後,假定把它放在js子目錄下面,就可以載入了。
<script src="js/require.js"></script>
有人可能會想到,載入這個文件,也可能造成網頁失去響應。解決辦法有兩個,一個是把它放在網頁底部載入,另一個是寫成下面這樣:
<script src="js/require.js" defer async="true" ></script>
async屬性表明這個文件需要非同步載入,避免網頁失去響應。IE不支持這個屬性,只支持defer,所以把defer也寫上。
載入require.js以後,下一步就要載入我們自己的代碼了。假定我們自己的代碼文件是main.js,也放在js目錄下面。那麼,只需要寫成下面這樣就行了:
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是,指定網頁程序的主模塊。在上例中,就是js目錄下面的main.js,這個文件會第一個被require.js載入。由於require.js默認的文件後綴名是js,所以可以把main.js簡寫成main。

⑶ 如何在一個js中引用多個js文件

可以創建一個函數叫require 該函數支持兩個參數

第一個參數 src 需要引入的script的路徑 (這個參數可以是路徑也可以是一個數組 多個js文件)

第二個回掉函數 在引入的script標簽載入完成了調用

因為樓主是引用js文件所以必須要在引入的js載入完成了才能運行後面的js

所以下面給出一份演示

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>e演示</title>
<scripttype="text/javascript">
functionrequire(src,fun){
functioncenterFun(O){
varnum=0;
for(vari=0;i<O.length;i++){
(function(j){
if(O[j].complate){
num++;
if(num==O.length){
if(fun){
fun();
}
}
}else{
O[j].onload=function(){
num++;
if(num==O.length){
if(fun){
fun();
}
}
}
}
})(i);
}
}
if(typeofsrc=="object"){
vard=newArray;
for(vari=0;i<src.length;i++){
vare=document.createElement("script");
document.body.appendChild(e);
e.setAttribute("src",src[i]);
d.push(e);
}
centerFun(d);
return0;
}
if(typeofsrc=="string"){
varscript=document.createElement("script");
script.setAttribute("src",src);
document.body.appendChild(script);
if(script.complate){
if(fun){
fun();
}
}else{
if(fun){
script.onload=function(){
fun()
script.onload=null;
}
}

}
}

}
</script>
</head>
<body>
<scripttype="text/javascript">
require(["http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"],function(){
console.log($);
})
</script>
</body>
</html>

該演示定義了一個函數require

可以看到代碼中並沒有script標簽 而是通過require引入的在載入完成過後我顯示了一下$說明函數已經將script載入完成了

閱讀全文

與require引入2個js文件相關的資料

熱點內容
maya粒子表達式教程 瀏覽:84
抖音小視頻如何掛app 瀏覽:283
cad怎麼設置替補文件 瀏覽:790
win10啟動文件是空的 瀏覽:397
jk網站有哪些 瀏覽:134
學編程和3d哪個更好 瀏覽:932
win10移動硬碟文件無法打開 瀏覽:385
文件名是亂碼還刪不掉 瀏覽:643
蘋果鍵盤怎麼打開任務管理器 瀏覽:437
手機桌面文件名字大全 瀏覽:334
tplink默認無線密碼是多少 瀏覽:33
ipaddgm文件 瀏覽:99
lua語言編程用哪個平台 瀏覽:272
政采雲如何導出pdf投標文件 瀏覽:529
php獲取postjson數據 瀏覽:551
javatimetask 瀏覽:16
編程的話要什麼證件 瀏覽:94
錢脈通微信多開 瀏覽:878
中學生學編程哪個培訓機構好 瀏覽:852
榮耀路由TV設置文件共享錯誤 瀏覽:525

友情鏈接