今天無意間看到
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()方法,加入自己的規則以及文件名稱,其他的都不需要修改,這樣就可以在頁面上省去大量代碼了
客戶虐我千百遍,我待客戶如初戀!