简单实用的js模板引擎

不足50行的js模板引擎,支持各种js语法:

<script id="test_list" type="text/html">
<%=
	for(var i = 0, l = p.list.length; i < l; i++){
		var stu = p.list[i];
=%>
	<tr>
		<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
		<td><%==stu.age=%></td>
		<td><%==(stu.address || '')=%></td>
	<tr>
 
<%=
	}
=%>
</script>

“<%= xxx =%>”内是js逻辑代码,“<%== xxx =%>”内是直接输出的变量,类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数,也可以在调用“new JTemp”时设置成别的参数名

调用:

$(function(){
	var temp = new JTemp('test_list'),
		html = temp.build(
			{list:[
           		{name:'张三', age:13, address:'北京'},
        		{name:'李四', age:17, address:'天津'},
        		{name:'王五', age:13}
        	]});
	$('table').html(html);
});

上面的temp生成以后,可以多次调用build方法,生成html

一下是模板引擎的代码:

var JTemp = function(){
	function Temp(htmlId, p){
		p = p || {};//配置信息,大部分情况可以缺省
		this.htmlId = htmlId;
		this.fun;
		this.oName = p.oName || 'p';
		this.TEMP_S = p.tempS || '<%=';
		this.TEMP_E = p.tempE || '=%>';
		this.getFun();
	}
	Temp.prototype = {
		getFun : function(){
			var _ = this,
				str = $('#' + _.htmlId).html();
			if(!str) _.err('error: no temp!!');
			var str_ = 'var ' + _.oName + '=this,f=\'\';',
				s = str.indexOf(_.TEMP_S),
				e = -1,
				p,
				sl = _.TEMP_S.length,
				el = _.TEMP_E.length;
			for(;s >= 0;){
				e = str.indexOf(_.TEMP_E);
				if(e < s) alert(':( ERROR!!');
				str_ += 'f+=\'' + str.substring(0, s) + '\';';
				p = _.trim(str.substring(s+sl, e));
				if(p.indexOf('=') !== 0){//js语句
					str_ += p;
				}else{//普通语句
					str_ += 'f+=' + p.substring(1) + ';';
				}
				str = str.substring(e + el);
				s = str.indexOf(_.TEMP_S);
			}
			str_ += 'f+=\'' + str + '\';';
			str_ = str_.replace(/\n/g, '');//处理换行
			var fs = str_ + 'return f;';
			this.fun = Function(fs);
		},
		build : function(p){
			return this.fun.call(p);
		},
		err : function(s){
			alert(s);
		},
		trim : function(s){
			return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); 
		}
	};
	return Temp;
}();

核心是将模板代码转变成了一个拼接字符串的function,每次拿数据call这个function。

因为主要是给手机(webkit)用的,所以没有考虑字符串拼接的效率问题,如果需要给IE实用,最好将字符串拼接方法改为Array.push()的形式


睡前一乐


touch & canvas 的简单使用~~涂鸦板

如题,研究touch时突发奇想和canvas结合,做了这么个涂鸦板。js代码请直接查看页面源代码,无非是对touchstart等touch事件的使用,以及如何在canvas内部划线

一个比较悲催的问题是,“清空”方法在ios内有效,但在android上表现不好~~~换用canvas的clearRect方法也没能成功

另外还遇到了两个比较麻烦的问题,第一个是用jquery绑定touch事件,在event对象上取不到pageX、Y,查了jqueryMobile的源码,发现需要通过event.originalEvent.touches取得,即源码里的getEventData方法;另一个问题是用脚本设置canvas的width总是不成功,google了N次,发现其一是需要直接设置dom的width属性,而不是style里的width,其二是设置时,直接使用数字,后面不要带“px”,比如: document.getElementById(canvasId).width='400'

温馨提示:请使用触屏设备

xxxxx

一年又一年

间总是过的很快,前几天忙着“优化“自己一年前写做的东西~~忍不住有点感慨。

每看到一段写的很烂的代码,或者找不到要改的逻辑在哪儿时,总会怀疑:这是我写的吗?真的是我写的吗~~(不是你还有谁!!)如果时间允许,真想再重构一次~~可惜时间不允许呀。

去年做这一版时,正是刚开始专js的时候,当时一知半解,又自以为是,很多做法现在看来不仅效率低下,开发麻烦,而且用户体验也不好~~如果当时身边有个js牛人指点指点可能会好很多。

而这一版之前的一版,大约也是在再上一年写的。那时对js的理解还仅停留在jquery和最初级的面向对象的层次,所以那一版虽然功能比较简单,不过两三千行代码,但页面执行已经相当之慢,逻辑乱的改一个小地方也要找半小时。

看过一个微薄说人身体的细胞每7年就会更换一遍,从这层意义上说,7年以后的你就是另外一个人了。可是看自己的代码,似乎一年以后就是另外一个自己了,作为每时每刻都会诞生新东西的行业,程序员需要不间断的学习充实自己,然后不停的去否定,去更新以前的自己,然后就慢慢变成更好的另一个自己。

希望自己可以克服惰性,继续保持谦卑的学习心态~~~~


IE出没,当心!!

有多少前端攻城湿,就有多少IE受害者~~~ →_→

    这段时间开始搞webview,html5~~~~本来以为总算可以暂时逃离IE的魔咒了,可是没想到的是,除了iphone和android,还有个wp7,wp7里还有个IE9,之前听说IE9支持html5,所以开始并没有把它放在心上,可是真正要用它的时候,问题来了

    开始的时候是习惯的拿alert测试,没反应,把页面内容删光,只剩一个alert也不行,google一下,以为是客户端对webview功能做了限制,去找客户端同事,人家很委屈的说,没做任何限制~~~好吧,不能alert,换其他方法测试

    然后是发觉click绑定有时不成功,开始以为绑定方法不对,试遍了jquery的的live、click、bind,和DOM的onclick,都不行,将同样的页面直接用wp7的IE9打开,于是又去找客户端,这次同事认真查了wp7的手册,回复给我一段文档,大意是说:wp7的webview只支持简单的html显示。可是其他很多js功能是可以用的~~~嗯,也就是说具体支持哪些js功能~~没准~~~~这便是悲剧之源

    后来,死马当活马医,将链接的“href=javascript:void(0)”,改成“href=#”,click绑定居然起效了~~~~尼玛的微软,连最屎的IE6都支持“void(0)”

    做技术的有句话:发现了问题就等于解决了问题~~~~可是对于眼下这种薛定谔的猫的问题,真的没办法了,除非有时间一个一个试去~~~~可惜没时间~~~~无奈,降格,把你当wap用总可以吧!!!

蒙娜丽莎


Copyright © 1996-2010 昆仑的山头. All rights reserved.
iDream theme by Templates Next | Powered by WordPress