js外掛程式動態載入js css解決方案

2022-08-25 15:48:23 字數 1977 閱讀 2674

最近因為工作需要做了乙個js自動匯入的外掛程式,一開始很天真的以為動態建立個script新增到head中就ok了,試了之後才發現了問題,就是如果同時引入了多個js檔案,而且後乙個檔案中用到了前乙個檔案中的變數,那就會報錯,靠~~悲催了,就是說js如果動態載入(非瀏覽器載入因為瀏覽器載入時同步載入的會等待前乙個js載入完成後才進行下乙個js載入,這樣就不會出現問題)那載入的檔案是非同步進行的,難怪啊!然後在網上找了些資料說用ajax同步載入,然後我試了真可以,下面就是我的**分享出來給大家,但是注意這樣載入出來的js有乙個致命的弱點,就是沒法再瀏覽器上除錯- - !!!!!以後再尋找解決方案吧,先貼**:

js主檔案importcomjs.js:

**

* created by carlos on 2015/5/19.

* qimport 匯入幫助函式,可以很方便的匯入指定的js、css檔案。但是需要注意的是,這樣匯入的js將無法除錯,暫時沒有找到解決方案--!

* 使用方法先把此檔案引入,必須放在head中的最前面匯入,

** id必須是qimport,否則無效

* 然後加入

** customscripts引數為:外加的引入檔案配置,可以不填。但填寫必須遵守qimport.importscripts的寫法。

* 如果不想手動初始化引入函式,可以這樣寫:

** 這裡的 data-auto為true時候才會自動初始化,否則需要手動初始化。

* 使用上自動初始化,不用擔心引入順序問題,後面的其他js、css檔案按正常引用就可以了。

* 注意:importcomjs檔案必須第乙個引入,否則將出現引用找不到的問題。

* 新增屬性:

* data-config:自定義配置檔名,預設為「importconfig.json」

* data-personalconfigname:自定義個性化配置名稱,在配置檔案中的「personalscripts」中配置

* 注意:配置載入順序是:importscripts最高、personalscripts其次、customscripts最低。如果引入的次序不對會引起空指標報錯哦^^!

*//**

* 同步載入js指令碼

* @param id 需要設定的標籤的id

* @param url js檔案的相對路徑或絕對路徑

* @return 返回是否載入成功,true代表成功,false代表失敗

*/(function(),

auto:function(),

config:function(),

personal:function(),

src:function(),

getattr:function(attrname)

catch(e){}

return attrvalue;

},relationpath:function(),

path:function(filename)

},autoinit:function()

},getpath:function(p),

init:function(customscripts)

else

}else

},loadjs:function(id,url,rank)

catch (ex)

myhead.insertbefore(myscript, myhead.childnodes[rank]);

return true;

},template:,

includetagname:'include', //引入時候用的標籤:

init:function(),

include:function(),,,

], personalscripts:

] }}

注意配置檔案必須和匯入方法js在同乙個路徑底下。

以上就是我個人封裝的引入js、css的**,希望和大家交流下,有什麼問題希望大家能不吝指教!

使用js載入器動態載入外部js css檔案

let minisite new object 判斷瀏覽器 minisite.browser 載入外部的檔案 param surl 要載入的檔案的url位址 param filetype 要載入的檔案的型別 fcallback 檔案載入完成之後的處理函式 minisite.jsloader func...

用js載入js css,無路徑限制

html中需要載入很多css js,這時候很多人選擇把這些指令碼與樣式表放在乙個js指令碼 命名此指令碼為a 中載入,這樣會使得html看起來很簡潔,此方法可以使用。另一種情況 如果a與其它js css是乙個整體 如 封裝好的外掛程式 而這個整體相對於html的路徑不固定,這時候html只能載入到a...

bootstrap table外掛程式動態載入表頭

這篇文章主要為大家詳細介紹了bootstrap table外掛程式動態載入表頭,具有一定的參考價值,感興趣的小夥伴們可以參考一下 bootstrap的table屬性已經很熟悉了,最近遇到乙個問題,猶豫每個列表載入的資料需求不同,所以需要動態的更換表頭。網上有很多載入 資料的例子,但是卻沒有找到如何動...