webview中用到的Javascript

 

       以前在博文中提到过，在 webview 中使用 jQuery 等框架，很影响网页加载速度，所以我都是使用纯 Javascript 来写页面脚本。在开发 webview 程序过程中，经常用到了一些东西，总结一下：

1．  排序：

 

对一个对象数组进行排序，大的在前，小的在后

var array = 


[{id:1,date: 1272775205971}, {id:2,date: 1272775145384}, {id:3,date: 1272774832649}]


function sortByDate(array) {


	array.sort(function(a, b){


		if(a.date > b.date) return -1; 


		else if(a.date < b.date) return 1;


		else return 0;


	});


}

 

2．  隐藏桩节点：

 

页面上有如下元素， id 是 line 的 div 是一个桩节点， content 下的所有内容都是由这个桩节点 clone 出来的。

<div id=’content’>


	<div id='line'>


		<img class='type' src=''/>


		<span class='duration'>...</span>


		<span class='date'>...</span>


	</div>


</div>

 

在所有节点 clone 结束之后，需要隐藏这个桩节点。其他的克隆出来的节点 id 也是 line ，没有改变， webkit 下， firstChild 获取的节点是 textNode ，所以需要进行一些判断，来确定这个桩节点。

function hideStub() {


	var stub = (function(){


		return arguments[0].nodeType == 1?arguments[0]:arguments.callee(arguments[0].nextSibling);	


	})(document.getElementById('content').firstChild);


	stub.style.display = 'none';


}

 

3．  以前博文中提过， Webview 支持 java 和 javascript 互调。而调用 Java 方法，返回的字符串不是 javascript 的本地字符串。简单来说，就是 javascript 的字符串和从 java 中获取的字符串不一样，很多字符串操作函数都不支持。需要进行一道转换，转换方法就是对它调用 toLocaleString() 函数。

 

 

4．  从 java 中获取的 json 字符串，在 javascript 中要转成 json 对象，一个很简单的方法就是 eval(json) 或 window.eval(json) 。我以前也一直是这么做的。昨天，我这么解析一个从 java 中返回的 json 字符串，却遇到了问题，用这个 eval 解析它， webkit 一直报错，说语法错误。后来我用了另外一种方法，解决了。

很简单，就是构造一个函数，这个函数返回这个字符串，然后运行这个函数，就得到了 json 对象。

var x = (new Function('return '+ json.toLocaleString()+';'))();

 

5．  Webview 中的页面，要可拖动并且里面元素可以点击，这个问题曾困扰过我，因为事件的冒泡机制似乎并不太管用。后来还是解决了，这种方法我经常用到。

 

页面：

<div id='log'>


<!—-  整个log元素需要可以拖动  -->	


	<div id='line'>


		<img class='type' src=''/>


		<span class='duration'>...</span>


		<span class='date'>...</span>


	</div>		


	<div id='line'>


		<img class='type' src=''/>


		<span class='duration'>...</span>


		<span class='date'>...</span>


	</div>		


	<!—-  很多个id是line的div，每个都可以点击  -->	


</div>

 

Javascript:

document.getElementById('log').addEventListener('touchstart', function(e){


		Scroll.moved = false;


		e.preventDefault();


		clearTimeout(Scroll.handler);


		showScrollBar();


		Scroll.down = true;


		Scroll.y = e.touches[0].clientY;		


	}, false);


	document.getElementById('log').addEventListener('touchmove', function(e){


		if(!Scroll.moved) {//没有滚动的时候，不执行move操作


			var rx = Scroll.ix - e.touches[0].clientX;


			var ry = Scroll.iy - e.touches[0].clientY;


			if(rx>-10 && rx <10 && ry>-10 && ry<10) return;//移动范围小于10*10，则认为没有滚动


			Scroll.moved = true;//否则，认为滚动了


		} 


		e.preventDefault();


		var dy = e.touches[0].clientY - Scroll.y;


		document.getElementById('log').scrollTop += -dy;


		Scroll.y = e.touches[0].clientY;		


	}, false);


	document.getElementById('log').addEventListener('touchend', function(e){


		e.preventDefault();


		Scroll.moved = false;		


		Scroll.handler = setTimeout(hideScrollBar, 1000);


	}, false);


子节点添加点击：


document.getElementById('line').addEventListener('touchstart', function(e){


				e.preventDefault();


			}, false);


			child.addEventListener('touchend', function(e){


				e.preventDefault();


				if(Scroll.moved) return;//页面滚动了，不执行任何操作


				//否则，在此触发点击事件，执行一些操作


			}, false);


//用于存储滚动的状态


Scroll = {


	moved:false,


	handler:null,


	down:false,


	y:0,


	ix:0,


	iy:0,


	dy:0


}