Вопрос по JavaScript Micro-Templating Джона Ресига
 

Написал небольшую функцию на основе JavaScript Micro-Templating Джона Ресига. Вот она:

var tmpl = function tmpl(str, data) {
			if (!str || !data) { return false }

			var fn = new Function("obj", "var p=[];with(obj){p.push('" +
					str.replace(/[\r\t\n]/g, " ")
							.split("<%")
							.join("\t")
							.replace(/((^|%>)[^\t]*)'/g, "$1\r")
							.replace(/\t=(.*?)%>/g, "',$1,'")
							.split("\t").join("');")
							.split("%>")
							.join("p.push('")
							.split("\r")
							.join("\\'")
					+ "');} return p.join('');");

			return  fn(data);
		};

Но не могу понять до конца как она работает. Зачем там .join("p.push('")? Почему когда я определяю fn как var fn= function() {} код перестает правильно работать?

Пример использования:

tmpl('<div id="<%=id1%>"><%=id1%><%=id1%></div><div id="<%=id2%>"><%=id2%></div>', {id1: 'id1Text', id2: 'id2Text'})