JavaScript加载器

最新推荐文章于 2022-02-12 09:22:25 发布

soleegn

最新推荐文章于 2022-02-12 09:22:25 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript function include prototype path 工作

本文链接：https://blog.csdn.net/soleegn/article/details/1398424

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今天无意间看到Scriptaculous项目，大概留意了以下他的加载器。

此项目一共有5个JS文件，当要用此项目到自己的项目中时只需要：

就可以引入其他的四个JS了，这里的prototype.js并非必备，如果哦只需要某一个js被引入则可以使用：

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

是不是很好的功能？自己实现一个加载器就省去在页面上大量的引入JS的工作了，现在让我们再看看它的原理


  
  
   
   
    
    
    
    
    
    var
    
     Scriptaculous 
    
    =
    
     
    
    ...
    
    {
  Version: '1.6.5',
  require: function(libraryName) ...{
    // inserting via DOM fails in Safari 2.0, so brute force approach
    document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
  },
  load: function() ...{
    if((typeof Prototype=='undefined') || 
       (typeof Element == 'undefined') || 
       (typeof Element.Methods=='undefined') ||
       parseFloat(Prototype.Version.split(".")[0] + "." +
                  Prototype.Version.split(".")[1]) < 1.5)
       throw("script.aculo.us requires the Prototype JavaScript framework >= 1.5.0");
    
    $A(document.getElementsByTagName("script")).findAll( function(s) ...{
      return (s.src && s.src.match(/scriptaculous.js(?.*)?$/))
    }).each( function(s) ...{
      var path = s.src.replace(/scriptaculous.js(?.*)?$/,'');
      var includes = s.src.match(/?.*load=([a-z,]*)/);
      (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
       function(include) ...{ Scriptaculous.require(path+include+'.js') });
    });
  }
}
    
    

Scriptaculous.load();

一共就两个方法，load()判断加入的JS是什么目录下的什么文件，以及有没有prototype.js和他的版本；require()直接调用document.write()朝页面追加JS的引入代码。自己写加载器的时候只需要修改load()方法，加入自己的规则以及文件名称，其他的都不需要修改，这样就可以在页面上省去大量代码了。