大梦想家

5年开发工程师,2年实施经理,X年售前顾问,......
数据加载中……
JavaScript加载器
今天无意间看到Scriptaculous项目,大概留意了以下他的加载器。

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

<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

就可以引入其他的四个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()方法,加入自己的规则以及文件名称,其他的都不需要修改,这样就可以在页面上省去大量代码了


客户虐我千百遍,我待客户如初恋!

posted on 2007-07-01 20:40 阿南 阅读(1723) 评论(1)  编辑  收藏 所属分类: JavaScript

评论

# re: JavaScript加载器 2008-06-30 13:08 XLEdoo

需要注意一下,这里使用了$A和其他的prototype方法,必须首先引入prototype以后才能使用,如果想改来自己用的话需要注意哈!
  回复  更多评论    

只有注册用户登录后才能发表评论。


网站导航: