這篇文章主要介紹了javascript實現動態導入js與css等靜態資源文件的方法,基于回調函數實現該功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript實現動態導入js與css等靜態資源文件的方法。分享給大家供大家參考。具體實現方法如下：

1. /** 
2. * 動態導入靜態資源文件js/css 
3. */ 
4. var $import = function(){ 
5. return function(rId, res, callback){ 
6. if(res && 'string' == typeof res){ 
7. if(rId){ 
8. if($($('#' + rId), $('head')).length>0){ 
9. return; 
10. } 
11. } 
12. //加載資源文件 
13. var sType = res.substring(res.lastIndexOf('.') + 1); 
14. // 支持js/css 
15. if(sType && ('js' == sType || 'css' == sType)){ 
16. var isScript = (sType == 'js'); 
17. var tag = isScript ? 'script' : 'link'; 
18. var head = document.getElementsByTagName('head')[0]; 
19. // 創建節點 
20. var linkScript = document.createElement(tag); 
21. linkScript.type = isScript ? 'text/javascript' : 'text/css'; 
22. linkScript.charset = 'UTF-8'; 
23. if(!isScript){ 
24. linkScript.rel = 'stylesheet'; 
25. } 
26. isScript ? linkScript.src = res : linkScript.href = res; 
27. if(callback && 'function' == typeof callback){ 
28. if (linkScript.addEventListener){ 
29. linkScript.addEventListener('load', function(){ 
30. callback.call(); 
31. }, false); 
32. } else if (linkScript.attachEvent) { 
33. linkScript.attachEvent('onreadystatechange', function(){ 
34. var target = window.event.srcElement; 
35. if (target.readyState == 'complete') { 
36. callback.call(); 
37. } 
38. }); 
39. } 
40. } 
41. head.appendChild(linkScript); 
42. } 
43. } 
44. }; 
45. }(); 

希望本文所述對大家的javascript程序設計有所幫助。