zoukankan      html  css  js  c++  java
  • 纯js自动批量引入js、css插件,支持自定义参数

    
    
     //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>
    
    
  • 相关阅读:
    友链大集合
    雅礼学习10.7
    雅礼学习10.6
    雅礼学习10.5
    雅礼学习10.4
    雅礼学习10.3
    雅礼学习10.4
    雅礼学习10.2
    雅礼学习10.1
    如何让SublimeText3更好用
  • 原文地址:https://www.cnblogs.com/mrcln/p/6629268.html
Copyright © 2011-2022 走看看