導航:首頁 > 文件教程 > 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文件相關的資料

熱點內容
關於旅遊收入的數據從哪裡找 瀏覽:989
gson解析json集合問題 瀏覽:680
安卓ipsec標識符填什麼 瀏覽:215
在哪裡解壓文件第一分卷 瀏覽:63
奧維使用教程 瀏覽:324
編程程序怎麼轉到plc上 瀏覽:807
文件名沖突但是找不到 瀏覽:261
上海瑞金醫院app下載 瀏覽:998
qq群里的機器人買武器 瀏覽:428
捕魚達人歷史版本 瀏覽:73
mp4視頻文件解密軟體 瀏覽:62
多軸編程哪個軟體最方便 瀏覽:27
老平板哪個是顯示屏數據線插座 瀏覽:849
5sing上傳音頻文件格式 瀏覽:171
win10輸入文件滑鼠右鍵異常 瀏覽:634
聽幼兒故事用什麼app 瀏覽:514
iphone修改音頻文件名 瀏覽:53
國家氣象站點數據在哪裡下載 瀏覽:342
網路設置的網站 瀏覽:914
手機測量放樣怎麼導數據和線型 瀏覽:648

友情鏈接