您的位置:首页 > Web前端 > CSS

纯js自动批量引入js、css插件,支持自定义参数

2017-03-27 22:38 549 查看

//autoload.js

1 ;! function(e) {
2     var autoload = e.autoload || {};
3     e.autoload = autoload;
4     e.autoload = new function() {
5         this.options = {
6             id: 'autoload',
7         }
8         var o = this.options;
9         this.include = function(_opt) {
10             o = _opt;
11             var id = document.getElementById('autoload');
12             if(typeof id!=='undefined'){
13                 var cssid = id.getAttribute('css');
14                 var jsid = id.getAttribute('js');
15             }
16             cssid = autoload.split(cssid);
17             jsid = autoload.split(jsid);
18             var c = 0;    //记录js的起始位置
19             for(var i = 0; i < o.path.length; i++) {
20                 var file = o.path[i];
21
22                 if (file.match(/.*.js$/)){
23                     var ind = i+1-c;    //记录js的起始位置
24                     if(jsid.toString().indexOf(ind)>-1){ //判断id中的js链接是否存在
25                         document.write('<script type="text/javascript" src="' + file + '"></script>');
26                     }
27                 }else if (file.match(/.*.css$/)){
28                     c++;
29                     if(cssid.toString().indexOf(i+1)>-1){
30                         var Link = document.createElement('link');
31                         Link.href = o.path[i];
32                         Link.rel = 'stylesheet';
33                         document.getElementsByTagName('head')[0].appendChild(Link);
34                     }
35                 }
36             }
37         }
38     }
39     autoload.split = function(str){
40         var strs= new Array(); //定义一数组
41         strs=str.split(","); //字符分割
42         return strs;
43     }
44 }(window)
45
46 //调用
47 autoload.include({
48     id: 'autoload'    //引入的该js的id
49     //引入的路径
50     ,path: [
51         'css/a.css'
52         ,'css/b.css'
53         ,'js/1.js'
54         ,'js/2.js'
55         ,'js/3.js'
56         ,'js/4.js'
57         ,'js/5.js'
58     ]
59 });


</body>前引入,js和css为path中参数的位置,例中js位置为1,2,4从1开始查找,css同理。

1 <script src="js/autoload.js" id="autoload" js="1,2,4" css="1,2"></script>



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: