javascript实现动态导入js与css等静态资源文件的方法

这篇文章主要介绍了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程序设计有所帮助。