今天无意间看到
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()方法,加入自己的规则以及文件名称,其他的都不需要修改,这样就可以在页面上省去大量代码了
客户虐我千百遍,我待客户如初恋!