对于Fibonacci普通的实现方式是：

[javascript]
//这个性能不咋的，函数调用太频繁了
function Fib(n) {
if (n < 2) { return n;}
return Fib(n – 1) + Fib(n – 2);
}
[/javascript]
而Keith Gaughan对它的实现方式用Memoization进行了优化：
[javascript]
var IterMemoFib = function() {
var cache = [1, 1];
var fib = function(n) {
if (n >= cache.length) {
for (var i = cache.length; i <= n; i++) {
//这句代码很耐人寻味，还有循环的方式
cache[i] = cache[i - 2] + cache[i - 1];
}
}
return cache[n];
}
return fib;
}();
[/javascript]

上面关于Fibonacci的优化，就是使用了Memoization技巧，将上一步的加法操作缓存起来，用户循环中下一轮的递增。缓存计算结果是Memorize应用最多的需求，避免了对计算结果的重复性计算，但是如果计算结果是动态的呢，或者说你想获取动态修改过后的计算结果呢？ 比如DOM的length属性，这个是易变的，这个时候就不能去获取缓存的结果了，需要重复计算。

下面先来看一段Flagrant Badassery编写的一个Timed Memoization函数，一方面用于缓存结果，另一方面则是在时间参数指定的时间间隔里清除掉缓存的结果：

[javascript]
var memorize=function(fn,timer){
var obj = {};
return function(){
var key = [].join.call(arguments,"$");
if(timer){
setTimeout(function(){delete obj[key];},timer);
}
//这个返回方式本人进行了一点修改
return (key in obj) ? obj[key] : obj[key] = fn.apply(this,arguments);
}
}
[/javascript]
上面的代码思路不错，在指定的时间之后清楚缓存结果，但是我觉得这个思路还可以用于更多场合，比如清除对象，及时断开作用域链，使得无用的对象可以及时的回收占用的内存。基于这个思路，本人做了些修修补补，编写了下面的几个方法：
[javascript]
//将memorize函数生成的函数也缓存起来
var memorize2 = function(fn,timer){
var key = [].join.call(arguments,"$"),obj={};
return memorize2[key] ? memorize2[key] : (memorize2[key] = function(){
var k = [].join.call(arguments,"$");
if(timer){
setTimeout(function(){delete obj[k];delete memorize2[key];},timer);
}
return obj[k] ? obj[k] : (obj[k] = fn.apply(this,arguments);
}
}
[/javascript]
对于上面说到的，如果有些计算结果是会动态改变的，这时候就该在需要的时候进行重复计算，为此，编写了一个Function扩展，借鉴上面Timed Momeization的思路：
[javascript]
Function.prototype.memorize = function(timer){
var obj = {}, that = this, key = "$";
return function(flag){
var args = [].slice.call(arguments,1) || [];
if(flag){
return obj[key] = that.apply(this,args);
}
key = [].join.call(arguments,"$");
if(timer){
setTimeout(function(){delete obj[key];},timer);
}
return obj[key] ? obj[key] : obj[key] = that.apply(this,args);
}
}
[/javascript]

如上面代码所示，使用memorize返回的函数中带有一个flag参数，如果不存在这个参数或者设置为false，则从缓存中去获取上一步缓存的结果，如果设置为true，则重复计算、并重新设置缓存的值。通过这样的实现方式，既可以通过参数的形式来判断获取动态改变的结果，也可以在不需要动态改变参数的时候获取缓存的结果，《测试用例》。使用方式如下：

[javascript]
var length = function(){
return div.getElementsByTagName("p").length;
}.memorize();
[/javascript]

为此，Memoization对于一些静态的计算结果进行缓存，从而起到优化代码性能的作用；但是对于会动态改变的计算结果，则需要另当别论了。

更多的参考文章：《ONE-LINE JAVASCRIPT MEMOIZATION》，《Memoization in JavaScript》，《Timed Memoization》，《Javascript的Lazy Definition Pattern》

今天又拾起这个一直未实现的冲动，首先既然要并行加载、按顺序执行，那么就必须得给每一个js文件开一个http请求，而且这个请求是无顺序的，即是加载的顺序是无顺序的，但是在执行的时候，就得要按照声明的顺序来执行，比如下面的代码示例：
[javascript]
jL.load({"label":"test","url":"test.js",isOrder:true});
jL.load({"label":"test2","url":"test2.js",isOrder:false});
jL.load({"label":"test3","url":"test3.js",isOrder:true,callback:function(){
alert("test3.js is load");
}}).insert();
[/javascript]

上面的代码中，load方法的参数中包含是否按顺序加载脚本文件，并且在脚本加载下来的时候包含callback函数回调。如果不是按顺序下载的，则直接使用DOM Element的方式插入script到document.body中；insert方法负责开始操作那些俺顺序执行的脚本文件的加载和插入工作；label参数对于需要按顺序执行的脚本文件必不可少，用于标识当前脚本，对无需按顺序执行的脚本可有可无。

刚开始设想的原理是这样的：把需要按顺序执行的脚本通过load方法都临时储存到一个数组里（如果不需要，则直接在load方法里通过DOM Element方法插入），之后调用insert方法来执行上面临时数组（使用XHR Injection的方式获得每一个脚本的responseText），并将请求返回的脚本的内容也暂且储存在临时变量里，待全部的脚本都请求下来之后，再把全部脚本的内容都插入到Document文档里使得脚本起作用。《测试示例1》

上面的方案虽然实现了并行加载、按顺序执行，但是存在诸多弊端，如果有脚本文件比较大，请求的时间比较长，那么先于它加载下来的脚本就迟迟得不到执行了，而且在处理callback回调函数的时候也是在全部脚本加载下来以后才执行。

为此，在这个基础上，修改了实现方式：按顺序执行的脚本仍然使用XHR的方式来加载，并把内容临时储存在数组里，同时通过label标识着脚本文件添加一个load的boolean属性来标识该脚本是否已经加载完成。这样，我就可以使用定时器(setInterval)来检查按label标识顺序排好的数组来检查load属性是否为true，这样来插入脚本到文档中。这样，就可以尽早的将声明在前面的脚本在加载完成的时候就插入到文档内。《测试页面》

在代码中，因为在重复调用insert方法的情况下要处理临时数组和对象的清空问题比较难解决，所以就进行了再一次的封装，支持链式调用，而且总共也才只有load和insert方法，参数说明：label用于标识该脚本文件以示区分，对于isOrder为true时labe必不可少，isOrder为false时可有可无；callback是回调函数，url为脚本的地址。操作方式如下几种：

[javascript]
//分类的方式，几个insert方法调用
jL().load({"label":"jquery","url":"jquery.js",isOrder:true,callback:function(){
alert($("#test").html());
}})
.load({"label":"test","url":"test.js",isOrder:true})
.insert();
///////////////////////////////////
jL().load({"label":"test2","url":"test2.js",isOrder:true})
.load({"label":"test3","url":"test3.js",isOrder:true})
.insert();
//链式调用的方式，最后一个insert方法调用：
jL().load({"label":"jquery","url":"jquery.js",isOrder:false,callback:function(){
alert($("#test").html());
}})
.load({"label":"test","url":"test.js",isOrder:true})
.load({"label":"test2","url":"test2.js",isOrder:true})
.load({"label":"test3","url":"test3.js",isOrder:true}).insert();
//可以将加载信息都声明到一个load方法里：
jL().load(
{"label":"jquery","url":"jquery.js",isOrder:true,callback:function(){
alert($("#test").html());
}},
{"label":"test","url":"test.js",isOrder:true},
{"label":"test2","url":"test2.js",isOrder:true},
{"label":"test3","url":"test3.js",isOrder:true}
)
.insert();
[/javascript]

如上所示，操作简单方便而且实用，下面是js源码：

[javascript]
; (function(win) {
var _h = document.getElementsByTagName("head")[0];
//使用lazy Definition的方式声明xhr实例
var _xhr = function() {
_xhr = win.XMLHttpRequest ? function() {
return new XMLHttpRequest();
}: (new ActiveXObject("Msxml2.XMLHTTP")) ? function() {
return new ActiveXObject("Msxml2.XMLHTTP");
}: function() {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return _xhr();
}
//使用DOM Element的方式把脚本动态插入到文档?
var _domLoad = function(url, parent, callback) {
if (!url){
return;
}
var s = document.createElement("script");
s.setAttribute("src", url); (parent || _h).appendChild(s);
if (callback) {
if (s.readyState) { //IE,Opera
s.onreadystatechange = function() {
if (s.readyState === "loaded" || s.readyState === "complete") {
s.onreadystatechange = null;
callback();
}
}
} else { // FF,Chrome,Safari
s.onload = function() {
s.onload = null;
callback();
}
}
}
}
//通过设置script标签的text属性来插入行内脚本到文档中
//不过一定要插入到head中，插入到body中在IE6下测试出?
var _script = function(text) {
var s = document.createElement("script");
s.text = text;
_h.appendChild(s);
}
//请求每一个js脚本文件
var _request = function(_p, _o) {
var _x = _xhr(),
item = _o._cache[_p.label];
_x.open("GET", _p.url, true);
_x.onreadystatechange = function() {
if (_x.readyState === 4 && (_x.status === 200 || _x.status === 304)) {
item["text"] = _x.responseText;
item["load"] = true;
}
}
_x.send(null);
}
var _load =function (){
for(var i=0,l=arguments.length;i<l;i++){
var a = arguments[i];
if(!a.isOrder){
_domLoad(a.url,a.parent,a.callback);
}else{
this._param.push(a);
this._cache[a.label]={};
this._cache[a.label]["callback"]=a.callback;
}
}
return this;
}
var _insert = function() {
if (!this._param.length) {
return;
}
var _o = null,i = 0;
//请求脚本文件
while (_o = this._param[i++]) {
_request(_o, this);
}
//定时器检查并插入脚本到文档中
var o = this._param.shift(),item = null,that = this;
var interval = setInterval(function() {
item = that._cache[o.label];
if (item["load"]) {
_script(item["text"]);
if (item["callback"]) {
item["callback"]();
}
if (! (o = that._param.shift())) {
clearInterval(interval);
}
}
},5);
return this;
}
var _jL = function() {
this._cache = {};
this._param = [];
}
_jL.prototype = {
load: _load,
insert: _insert
}
win.jL = function() {
return new _jL();
}
})(this);
[/javascript]

var testObj;
try{
testObj=standard.createXhr();
return standard;
}catch(e){
try{
testObj=activeXNew.createXhr();
return activeXNew;
}catch(e){
testObj=activeXOld.createXhr();
return activeXNew;
}
}
}();
[/javascript]
上面的例子就是分支技术的一个应用。我不知道大家对这段代码是否有什么意见或者异议，反正我是觉得冗长了，无端端的声明了三个对象不说，最后还是需要try…catch一套。下面是我所想到的一种解决方案来代替这个关于声明XMLHttpRequest实例对象的例子：
[javascript]
//在运行时就确定了特定的浏览器下将要执行哪个分支的函数
var XHR = {}
XHR.create = (function(){
if (window.XMLHttpRequest) {
return function(){
return new XMLHttpRequest();
}
}
else {
try {
//为了判断Msxml2和Microsoft版本的ActiveXObject，不得不实例化一个,不过也就是一次性过了而已
return new ActiveXObject("Msxml2.XMLHTTP") && function(){
return new ActiveXObject("Msxml2.XMLHTTP");
}
} catch (e) {
return function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
})();
[/javascript]

上面的代码简洁明了，有一个不好的缺点就是需要在IE6下需要实例化多一个ActiveXObject(“Msxml2.XMLHTTP”)作为判断条件，IE7以上以及FF等其他浏览器则不会有这个实例化的过程，不过还是那句话，也就是在初始化的时候有这个过程而已，之后浏览器会根据特定的函数来执行。测试页面

当然了，使用Lazy Definition Pattern的方式来实现也是同样的原理：
[javascript]
var XHR = {}
XHR.create = function(){
if (window.XMLHttpRequest) {
XHR.create = function(){
return new XMLHttpRequest();
}
}
else {
try {
//为了判断Msxml2和Microsoft版本的ActiveXObject，不得不实例化一个
XHR.create = new ActiveXObject("Msxml2.XMLHTTP") &&function(){
return new ActiveXObject("Msxml2.XMLHTTP");
}
} catch (e) {
XHR.create = function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
XHR.create();
};
[/javascript]

我们通常封装浏览器的添加事件函数的方式是使用下面的方式：

[javascript]
var addListener=function(el, type, handle) {
if (el.addEventListener) {
el.addEventListener(type, handle, false);
}else if (el.attachEvent) {
el.attachEvent(‘on’ + type, handle);
} else {
el['on' + type] = handle;
}
}
[/javascript]

上面是一种使用很普遍的封装方式，它的问题之一就是口头说的，每次addListener函数调用的时候，都需要去执行if判断，以至于使用正确的方式，讨厌的if的执行次数跟调用次数相同了，不爽！

为了解决上面讨厌的if的反复执行，我们使用Lazy Definition来改造addListener方法：
[javascript]
var addListener = function(el, type, handle){
if (el.addEventListener) {
//重新定义addListener的方法体，使得下次调用addListener方法的时候就直接调用这个方法体，下同
addListener = function(el, type, handle){
el.addEventListener(type, handle, false);
}
} else
if (el.attachEvent) {
addListener = function(el, type, handle){
el.attachEvent("on" + type, function(e){
handle.call(el, e);
});
}
} else {
addListener = function(el, type, handle){
el["on" + type] = handle;
}
}
//第一次执行addListener方法
addListener(el, type, handle);
}
[/javascript]
上面的addListener定义方式是YAHOO提出的一种Lazy Definition方式，它还有一种变体，我把它改成如下的方式（有点类似于分支技术）：
[javascript]
var addListener = function(el, type, handle){
//在这里也是重新定义addListener方法
addListener = (function(){
if (el.addEventListener) {
return function(el, type, handle){
el.addEventListener(type, handle, false);
};
} else if (el.attachEvent) {
return function(el, type, handle){
el.attachEvent("on" + type, function(e){
handle.call(el, e);
});
};
} else {
return function(el, type, handle){
el["on" + type] = handle;
};
}
})();
addListener(el, type, handle);
}
[/javascript]

现在Lazy Definition的原理已经很清晰了：就是在函数内部重新自定义自己的方法体来实现。【测试页面】。下面再用一个简单的函数来表述：

[javascript]
var foo=function(){
var t=new Date();
foo=function(){
return t;
}
return foo(); //用于第一次调用的时候执行
}
[/javascript]
更多资料可以阅读：《Lazy Function Definition Pattern》