不使用script導(dǎo)入js文件的幾種方法

更新時(shí)間：2016年10月27日 22:18:04 投稿：mdxy-dxy

這篇文章主要介紹了不使用script導(dǎo)入js文件的方法,需要的朋友可以參考下

方法一:原生

　adc.js內(nèi)容如下：

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事件加載完響應(yīng)，防止未加載完就調(diào)用出錯(cuò)
        console.log(hello);
      })

      setTimeout(function(){//或者使用定時(shí)器保證其載入完后調(diào)用（不安全，不如監(jiān)聽(tīng)事件好）
        console.log(hello);
      },1000);
     // $.getScript("abc.js");
  </script>

方法二：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"');//這個(gè)函數(shù)是在new.js里面的，當(dāng)點(diǎn)擊click后運(yùn)行這個(gè)函數(shù)
});
});
});
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button>

方法三：require.js

require.js分享2.1.1版本，注意是針對(duì)大項(xiàng)目使用，一邊情況下使用jquery即可。

index.html

<script data-main="main" src="require.js"></script>

main.js

console.log("你好世界");
require(["js1","js2","js3"],function () {
  // 是異步加載導(dǎo)入。js后綴可以省略
  console.log("你們加載完了么？");
  var total = num1+num2+num3;
  console.log(total);
  hello1();
  hello2();
  hello3();
})

使用requireJs可以很方便的導(dǎo)入js文件，但是要注意js文件中變量名方法名沖突的問(wèn)題。產(chǎn)生原因：瀏覽器js文件共用全局作用域，作用域中變量名方法名可能被覆蓋

您可能感興趣的文章:

script
js

相關(guān)文章

uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法
這篇文章主要給大家介紹了關(guān)于uniapp小程序底部tabbar圖標(biāo)大小設(shè)置辦法的相關(guān)資料,在使用uniapp進(jìn)行開(kāi)發(fā)時(shí),tabbar是我們使用的很頻繁的一個(gè)組件,但是在特定的平臺(tái)會(huì)有一些使用上的限制,需要的朋友可以參考下
2023-08-08
js獲取Html元素的實(shí)際寬度高度的方法
下面小編就為大家?guī)?lái)一篇js獲取Html元素的實(shí)際寬度高度的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
小程序animate動(dòng)畫(huà)實(shí)現(xiàn)直播間點(diǎn)贊
這篇文章主要為大家詳細(xì)介紹了小程序animate動(dòng)畫(huà)實(shí)現(xiàn)直播間點(diǎn)贊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript隱式類型轉(zhuǎn)換
JavaScript的數(shù)據(jù)類型是非常弱的（不然不會(huì)叫它做弱類型語(yǔ)言了）！在使用算術(shù)運(yùn)算符時(shí)，運(yùn)算符兩邊的數(shù)據(jù)類型可以是任意的，比如，一個(gè)字符串可以和數(shù)字相加
2016-03-03
JavaScript實(shí)現(xiàn)文字黑洞特效的代碼詳解
這篇文章介紹了用 JavaScript 和 HTML5 Canvas 實(shí)現(xiàn)文字黑洞特效的項(xiàng)目,包括項(xiàng)目特征,如黑洞特效、引力效果、文字動(dòng)畫(huà)和交互設(shè)計(jì),以及技術(shù)亮點(diǎn),還闡述了實(shí)現(xiàn)邏輯,涵蓋項(xiàng)目結(jié)構(gòu)、文字和黑洞對(duì)象的實(shí)現(xiàn)、動(dòng)畫(huà)循環(huán)等,并給出了詳細(xì)的代碼示例和解釋
2025-03-03
JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁(yè)地震撕裂效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁(yè)地震撕裂效果代碼,引入第三方插件實(shí)現(xiàn)頁(yè)面的抖動(dòng)、撕裂及圖片等效果,需要的朋友可以參考下
2015-10-10
javascript:void(0)是什么意思示例介紹
Javascript中void是一個(gè)操作符，該操作符指定要計(jì)算一個(gè)表達(dá)式但是不返回值，有不了解的朋友可以參考下本文
2013-11-11
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊(duì)列原理與用法實(shí)例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之隊(duì)列原理與用法,較為詳細(xì)的說(shuō)明了隊(duì)列的概念、原理,并結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)與使用隊(duì)列的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-11-11
在B/S開(kāi)發(fā)中經(jīng)常用到的JavaScript技術(shù)
javascript運(yùn)用中，經(jīng)常用到的代碼，建議每段代碼都要看下，注意本文有三頁(yè)，仔細(xì)看玩，逐個(gè)研究透徹，那么網(wǎng)頁(yè)中常見(jiàn)的問(wèn)題，你也就熟悉掌握了
2008-05-05
JS寫(xiě)谷歌瀏覽器chrome的外掛實(shí)例
本篇文章主要給大家講解了一個(gè)用JS寫(xiě)出的谷歌瀏覽器的怪掛實(shí)例，以及給大家分享了其中的代碼，有興趣的朋友學(xué)些下。
2018-01-01