WEB交互设计

压缩JS代码的好助手

2010-01-25T18:35:07+08:00

HTML代码

<html>
<head>
<title>JS Minifier</title>
<script type="text/javascript">
String.prototype.has=function(c){return this.indexOf(c)>-1;};function jsmin(comment,input,level){if(input===undefined){input=comment;comment='';level=2;}else if(level===undefined||level<1||level>3){level=2;}if(comment.length>0){comment+='\n';}var a='',b='',EOF=-1,LETTERS='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',DIGITS='0123456789',ALNUM=LETTERS+DIGITS+'_$\\',theLookahead=EOF;function isAlphanum(c){return c!=EOF&&(ALNUM.has(c)||c.charCodeAt(0)>126);}function get(){var c=theLookahead;if(get.i==get.l){return EOF;}theLookahead=EOF;if(c==EOF){c=input.charAt(get.i);++get.i;}if(c>=' '||c=='\n'){return c;}if(c=='\r'){return'\n';}return' ';}get.i=0;get.l=input.length;function peek(){theLookahead=get();return theLookahead;}function next(){var c=get();if(c=='/'){switch(peek()){case'/':for(;;){c=get();if(c<='\n'){return c;}}break;case'*':get();for(;;){switch(get()){case'*':if(peek()=='/'){get();return' ';}break;case EOF:throw'Error: Unterminated comment.';}}break;default:return c;}}return c;}function action(d){var r=[];if(d==1){r.push(a);}if(d<3){a=b;if(a=='\''||a=='"'){for(;;){r.push(a);a=get();if(a==b){break;}if(a<='\n'){throw'Error: unterminated string literal: '+a;}if(a=='\\'){r.push(a);a=get();}}}}b=next();if(b=='/'&&'(,=:[!&|'.has(a)){r.push(a);r.push(b);for(;;){a=get();if(a=='/'){break;}else if(a=='\\'){r.push(a);a=get();}else if(a<='\n'){throw'Error: unterminated Regular Expression literal';}r.push(a);}b=next();}return r.join('');}function m(){var r=[];a='\n';r.push(action(3));while(a!=EOF){switch(a){case' ':if(isAlphanum(b)){r.push(action(1));}else{r.push(action(2));}break;case'\n':switch(b){case'{':case'[':case'(':case'+':case'-':r.push(action(1));break;case' ':r.push(action(3));break;default:if(isAlphanum(b)){r.push(action(1));}else{if(level==1&&b!='\n'){r.push(action(1));}else{r.push(action(2));}}}break;default:switch(b){case' ':if(isAlphanum(a)){r.push(action(1));break;}r.push(action(3));break;case'\n':if(level==1&&a!='\n'){r.push(action(1));}else{switch(a){case'}':case']':case')':case'+':case'-':case'"':case'\'':if(level==3){r.push(action(3));}else{r.push(action(1));}break;default:if(isAlphanum(a)){r.push(action(1));}else{r.push(action(3));}}}break;default:r.push(action(1));break;}}}return r.join('');}jsmin.oldSize=input.length;ret=m(input);jsmin.newSize=ret.length;return comment+ret;}
function $(i) {return document.getElementById(i);}
function go() {
			$('output').value = jsmin($('comment').value, $('input').value, $('level').value);
			$('outputtitle').style.display = $('output').style.display = $('statstitle').style.display = $('stats').style.display = 'block';
			$('oldsize').value = jsmin.oldSize;
			$('newsize').value = jsmin.newSize;
			$('ratio').value = (Math.round(jsmin.newSize / jsmin.oldSize * 1000) / 10) + '%';
		}
		function bw() {
			$('comment').value = $('input').value = $('output').value = '';
			$('outputtitle').style.display = $('output').style.display = $('statstitle').style.display = $('stats').style.display = 'none';
}
</script>
<style type="text/css">
#comment { width:95%; height:4em; }
#input { width:95%; height:10em; }
#go { font-weight:bold; }
#outputtitle, #statstitle, #stats { display:none; }
#oldsize, #newsize, #ratio { text-align:right; width:4em; }
#output { width:95%; height:10em;display:none; }
h2 { margin-bottom:0; }
</style>
</head>
<body bgcolor="linen">
	<h1>JS Minifier</h1>
	<p>By Franck Marcia, 
	From the <a href="<a href="http://javascript.crockford.com/jsmin.html" target="_blank">http://javascript.crockford.com/jsmin.html</a>" target="_blank">original idea</a> of <a href="<a href="http://www.crockford.com/" target="_blank">http://www.crockford.com/</a>" target="_blank">Douglas Crockford</a>, 
	Last modified: 2006/08/31</p>
	<hr/>
	<h2>Comments</h2>
	<textarea id="comment" name="comment"></textarea>
	<h2>Code</h2>
	<textarea id="input" name="input"></textarea>

<center>
		Level: 
		<select id="level">
			<option value="1">minimal</option>
			<option value="2" selected="selected">conservative</option>
			<option value="3">agressive</option>
		</select>
		  
		<input id="go" type="submit" value="JSMin" onclick="go();return false;"/>
		  
		<input type="submit" value="Clear" onclick="bw();return false;"/>

<small><b>Minimal</b>: original algorithm but keep linefeeds if single - <b>Conservative</b>: original algorithm - <b>Agressive</b>: remove more linefeed than the original algorithm but can be regressive</small>
	</center>
	<h2 id="outputtitle">Output</h2>
	<textarea id="output" name="output"></textarea>
	<h2 id="statstitle">Stats</h2>
	<div id="stats">Old size: <input id="oldsize"></span> New size: <input id="newsize"></span> Ratio: <input id="ratio"></span></div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Cognos8.3 Content Manager配置SQLServer2005 连接出错

2009-12-30T16:40:17+08:00

之前用SQLServer2000作为Cognos8.3 运行库,连接很正常.最近由于换成SQLServer2005,测试连接出错:

原来SQLServer2005默认禁用TCP/IP协议:

只需将协议启用就可以了,不过一定要重启SQL Server服务哦

[JS]左右方向无缝滚动

2009-12-29T09:38:49+08:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>来自web developer navigator!的dhScroll Ver2.0.0 左右横向无缝滚动</title>
<style type="text/css">
/*块1样式*/
#scroll {width:600px;height:250px;overflow:hidden;}
/*块2样式*/
.mqdemoa {width:6000px!important;width:3000px;margin:0;padding:0;}
/*块2子元素样式*/
.mqdemoa li {width:148px;margin:0 1px;height:250px;background:red;
float:left;list-style:none;}

/*其他样式，与scroll对象无关联*/
#prenext {width:600px;height:20px;overflow:hidden;}
#prenext span {display:block;font:12px "宋体";width:50%;height:20px;line-height:20px;text-align:center;cursor:pointer;color:#fff;background:#000;}
#prenext .pre {float:left;}
#prenext .next {float:right;}
</style>
<script type="text/javascript">
function dhscroll(){
	//author:dh20156
	var dh = this;
	this.autoid = null;
	//块1
	this.scrollDOM = null;
	//块2
	this.scrollCDOM = null;
	//展示宽度（和块1宽度一致）
	this.showwidth = 0;
	//每次滚动长度，这个值要能被this.showwidth整除才行
	this.steplength = 20;
	var oldlength = this.steplength;
	//滚动时间间隔
	this.steptime = 1;
	//停顿时间
	this.resttime = 3000;
	//滚动长度
	this.uvwidth = 0;

//无缝设置过程
	this.getsw = function(){
		var tempw = this.scrollCDOM.offsetWidth;
		var temps = this.scrollCDOM.innerHTML;
		this.scrollCDOM.innerHTML = [temps,temps].join("");
		this.scrollCDOM.style.width = tempw*2+"px";
		if(document.attachEvent){
			this.scrollDOM.attachEvent("onmouseover",dh.pause);
			this.scrollDOM.attachEvent("onmouseout",dh.goon);
		}else{
			this.scrollDOM.addEventListener("mouseover",dh.pause,true);
			this.scrollDOM.addEventListener("mouseout",
dh.goon,true);
		}
		this.uvwidth = Math.ceil(this.scrollDOM.scrollWidth / 2);
	}

//从右到左
	this.scrollleft = function(){
		if(this.autoid!=null){
			window.clearTimeout(this.autoid);
		}
		var uvleft = this.scrollDOM.scrollLeft;
		uvleft += this.steplength;

this.scrollDOM.scrollLeft = uvleft;

if(uvleft>=this.uvwidth){
			this.scrollDOM.scrollLeft = 0;
		}
		
		if(uvleft % this.showwidth == 0){
			if(this.autostart){this.autoid = 
window.setTimeout(function(){dh.scrollleft()},dh.resttime);}
		}else{
			this.autoid = window.setTimeout(function(){
dh.scrollleft()},dh.steptime);
		}
		document.getElementById("s").innerHTML = 
this.uvwidth+","+uvleft;
	}

//从左到右
	this.scrollright = function(){
		if(this.autoid!=null){
			window.clearTimeout(this.autoid);
		}
		var uvleft = this.scrollDOM.scrollLeft;
		uvleft -= this.steplength;

this.scrollDOM.scrollLeft = uvleft;

if(uvleft <= 0){
			this.scrollDOM.scrollLeft = this.uvwidth;
		}

if(uvleft % this.showwidth == 0){
			if(this.autostart){this.autoid = 
window.setTimeout(function(){dh.scrollright()},dh.resttime);}
		}else{
			this.autoid = window.setTimeout(function(){
dh.scrollright()},dh.steptime);
		}
		document.getElementById("s").innerHTML = 
this.uvwidth+","+uvleft;
	}

//开始滚动，参数为方向，首屏是否停顿
	this.go = function(direction,rest){
		this.autostart = true;
		if(this.autoid!=null){
			window.clearTimeout(this.autoid);
		}
		if(direction=="left"){
			if(rest){
				this.autoid = window.setTimeout(function(){dh.scrollleft()},5000);
			}else{
				dh.scrollleft();
			}
		}else{
			if(rest){
				this.autoid = window.setTimeout(function(){dh.scrollright()},5000);
			}else{
				dh.scrollright();
			}
		}
	}

//往右
	this.pre = function(){
			this.scrollright();
	}
	//往左
	this.next = function(){
			this.scrollleft();
	}
	//暂停
	this.pause = function(){
		dh.oldlength = dh.steplength;
		dh.steplength = 0;
	}
	//继续
	this.goon = function(){
		dh.steplength = dh.oldlength;
	}
}
</script>
</head>
<body>
<p id="s">scrollWidth, scrollLeft</p>

<div id="scroll">
<ul id="scroll2" class="mqdemoa">
	<li>测试1</li>
	<li>测试2</li>
	<li>测试3</li>
	<li>测试4</li>
	<li>测试5</li>
	<li>测试6</li>
	<li>测试7</li>
	<li>测试8</li>
	<li>测试9</li>
	<li>测试10</li>
	<li>测试11</li>
	<li>测试12</li>
	<li>测试13</li>
	<li>测试14</li>
	<li>测试15</li>
	<li>测试16</li>
	<li>测试17</li>
	<li>测试18</li>
	<li>测试19</li>
	<li>测试20</li>
</ul>
</div>
<div id="prenext">
	<span class="pre" 
onmouseover="this.style.background='#eee';this.style.color='#000'" 
onmouseout="this.style.background='#000';this.style.color='#fff'" 
onclick="dhs.pre();">上一页</span>
	<span class="next" 
onmouseover="this.style.background='#eee';this.style.color='#000'" 
onmouseout="this.style.background='#000';this.style.color='#fff'" 
onclick="dhs.next();">下一页</span>
</div>
<dl>
<dt><h1>dhScroll Ver2.0.0 左右横向无缝滚动</h1></dt>
<dd>支持从左到右，从右到左两个方向的无缝滚动；</dd>

<dd>支持手动更改滚动方向；</dd>
<dd>支持连续/停顿方式滚动；</dd>
<dd>鼠标指向暂停滚动，移开继续；</dd>
<dt><h1>滚动对象模型</h1></dt>
<dd><块1><块2><块2的子元素>内容</块2的子元素></块2><
/块1></dd>
<dt><h1>滚动模型设置样式要点</h1></dt>

<dd>块1设置的宽度为展示宽度；overflow:hidden;</dd>
<dd>块2设置的宽度为块2子元素累计宽度（确保块2所有子元素排在一排）；</dd>
<dd>由于脚本中无缝部分采用innerHTML重写块2子元素，导致IE和FF在样式渲染上有所区别，
FF下块2的宽度应设置为块2宽度的两倍；</dd>
<dd>块2子元素必须确保排在一排，非表格的话最好float:left;</dd>
</dl>

HTML代码

//无缝设置过程
	this.getsw = function(){
		var tempw = this.scrollCDOM.offsetWidth;
		var temps = this.scrollCDOM.innerHTML;
		this.scrollCDOM.innerHTML = [temps,temps].join("");
		this.scrollCDOM.style.width = tempw*2+"px";
		if(document.attachEvent){
			this.scrollDOM.attachEvent("onmouseover",dh.pause);
			this.scrollDOM.attachEvent("onmouseout",dh.goon);
		}else{
			this.scrollDOM.addEventListener("mouseover",dh.pause,true);
			this.scrollDOM.addEventListener("mouseout",dh.goon,true);
		}
		this.uvwidth = Math.ceil(this.scrollDOM.scrollWidth / 2);
	}

//从右到左
	this.scrollleft = function(){
		if(this.autoid!=null){
			window.clearTimeout(this.autoid);
		}
		var uvleft = this.scrollDOM.scrollLeft;
		uvleft += this.steplength;

this.scrollDOM.scrollLeft = uvleft;

if(uvleft>=this.uvwidth){
			this.scrollDOM.scrollLeft = 0;
		}
		
		if(uvleft % this.showwidth == 0){
			if(this.autostart){this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.resttime);}
		}else{
			this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.steptime);
		}
		document.getElementById("s").innerHTML = this.uvwidth+","+uvleft;
	}

//从左到右
	this.scrollright = function(){
		if(this.autoid!=null){
			window.clearTimeout(this.autoid);
		}
		var uvleft = this.scrollDOM.scrollLeft;
		uvleft -= this.steplength;

this.scrollDOM.scrollLeft = uvleft;

if(uvleft <= 0){
			this.scrollDOM.scrollLeft = this.uvwidth;
		}

if(uvleft % this.showwidth == 0){
			if(this.autostart){this.autoid = window.setTimeout(function(){dh.scrollright()},dh.resttime);}
		}else{
			this.autoid = window.setTimeout(function(){dh.scrollright()},dh.steptime);
		}
		document.getElementById("s").innerHTML = this.uvwidth+","+uvleft;
	}

<div id="scroll">
<ul id="scroll2" class="mqdemoa">
	<li>测试1</li>
	<li>测试2</li>
	<li>测试3</li>
	<li>测试4</li>
	<li>测试5</li>
	<li>测试6</li>
	<li>测试7</li>
	<li>测试8</li>
	<li>测试9</li>
	<li>测试10</li>
	<li>测试11</li>
	<li>测试12</li>
	<li>测试13</li>
	<li>测试14</li>
	<li>测试15</li>
	<li>测试16</li>
	<li>测试17</li>
	<li>测试18</li>
	<li>测试19</li>
	<li>测试20</li>
</ul>
</div>
<div id="prenext">
	<span class="pre" onmouseover="this.style.background='#eee';this.style.color='#000'" onmouseout="this.style.background='#000';this.style.color='#fff'" onclick="dhs.pre();">上一页</span>
	<span class="next" onmouseover="this.style.background='#eee';this.style.color='#000'" onmouseout="this.style.background='#000';this.style.color='#fff'" onclick="dhs.next();">下一页</span>
</div>
<dl>
<dt><h1>dhScroll Ver2.0.0 左右横向无缝滚动</h1></dt>
<dd>支持从左到右，从右到左两个方向的无缝滚动；</dd>

<dd>支持手动更改滚动方向；</dd>
<dd>支持连续/停顿方式滚动；</dd>
<dd>鼠标指向暂停滚动，移开继续；</dd>
<dt><h1>滚动对象模型</h1></dt>
<dd><块1><块2><块2的子元素>内容</块2的子元素></块2></块1></dd>
<dt><h1>滚动模型设置样式要点</h1></dt>

<dd>块1设置的宽度为展示宽度；overflow:hidden;</dd>
<dd>块2设置的宽度为块2子元素累计宽度（确保块2所有子元素排在一排）；</dd>
<dd>由于脚本中无缝部分采用innerHTML重写块2子元素，导致IE和FF在样式渲染上有所区别，FF下块2的宽度应设置为块2宽度的两倍；</dd>
<dd>块2子元素必须确保排在一排，非表格的话最好float:left;</dd>
</dl>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[JS]可输入选择框简单原型

2009-12-22T10:09:42+08:00

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

org.apache.commons.lang.StringUtil 常用方法使用例子

2009-12-18T11:35:30+08:00

1.空字符串检查
使用函数: StringUtils.isBlank(testString)
函数介绍: 当testString为空,长度为零或者仅由空白字符(whitespace)组成时,返回True;否则返回False
例程:

输出如下:
test blank? true
test2 blank? true
test3 blank? true
test4 blank? False
函数StringUtils.isNotBlank(testString)的功能与StringUtils.isBlank(testString)相反.

2.清除空白字符
使用函数: StringUtils.trimToNull(testString)
函数介绍:清除掉testString首尾的空白字符,如果仅testString全由空白字符
(whitespace)组成则返回null
例程:

输出如下:
test1 trimToNull: null
test2 trimToNull: A Test
test3 trimToNull: null

注意：函数StringUtils.trim(testString)与
StringUtils.trimToNull(testString)功能类似，但testString由空白字符
(whitespace)组成时返回零长度字符串。

3.取得字符串的缩写
使用函数: StringUtils.abbreviate(testString,width)和StringUtils.abbreviate(testString,offset，width)
函数介绍:在给定的width内取得testString的缩写,当testString的长度小于width则返回原字符串.
例程:

输出如下:
This is a te...
...is a test...
Test

4.劈分字符串
使用函数: StringUtils.split(testString,splitChars,arrayLength)
函数介绍:splitChars中可以包含一系列的字符串来劈分testString,并可以设定得
到数组的长度.注意设定长度arrayLength和劈分字符串间有抵触关系,建议一般情况下
不要设定长度.
例程:

输出如下:
{A,b,c,d,e}
{Pharmacy,basketball funky}

5.查找嵌套字符串
使用函数:StringUtils.substringBetween(testString,header,tail)
函数介绍：在testString中取得header和tail之间的字符串。不存在则返回空
例程：

输出如下：
    ABC
    null

6.去除尾部换行符
使用函数:StringUtils.chomp(testString)
函数介绍:去除testString尾部的换行符
例程:

输出如下:
    Hello
    Another test

7.重复字符串
使用函数:StringUtils.repeat(repeatString,count)
函数介绍:得到将repeatString重复count次后的字符串
例程:

输出如下:
    **********
    China China China China China

其他函数:StringUtils.center( testString, count,repeatString );
函数介绍:把testString插入将repeatString重复多次后的字符串中间,得到字符串
的总长为count
例程:

输出如下:
    ***China***

8.颠倒字符串
使用函数:StringUtils.reverse(testString)
函数介绍:得到testString中字符颠倒后的字符串
例程:

输出如下:
    EDCBA

9.判断字符串内容的类型
函数介绍:
StringUtils.isNumeric( testString ) :如果testString全由数字组成返回True
StringUtils.isAlpha( testString ) :如果testString全由字母组成返回True
StringUtils.isAlphanumeric( testString ) :如果testString全由数字或数字组
成返回True
StringUtils.isAlphaspace( testString ) :如果testString全由字母或空格组
成返回True

例程:

输出如下:
    Is state number? false
    Is state alpha? true
    Is state alphanumeric? true
    Is state alphaspace? true

10.取得某字符串在另一字符串中出现的次数
使用函数:StringUtils.countMatches(testString,seqString)
函数介绍:取得seqString在testString中出现的次数,未发现则返回零
例程:

输出:
    4

11.部分截取字符串
使用函数:
StringUtils.substringBetween(testString,fromString,toString ):取得两字符
之间的字符串
StringUtils.substringAfter( ):取得指定字符串后的字符串
StringUtils.substringBefore( )：取得指定字符串之前的字符串
StringUtils.substringBeforeLast( )：取得最后一个指定字符串之前的字符串
StringUtils.substringAfterLast( )：取得最后一个指定字符串之后的字符串

函数介绍：上面应该都讲明白了吧。
例程：

输出如下：
    N0: 25 , N1: 30, N2: 40, N3: 50, N4: 40) [50,60, N5: 30

[JS]iframe未正确闭合的错误

2009-12-14T11:55:12+08:00

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[CSS]列表表格布局

2009-12-07T12:25:45+08:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>test</title>
<style type="text/css">
#test{width:290px;background:#eee;}
#test ul{overflow:hidden;zoom:1;margin:0;padding:0 5px 10px 5px;}
#test li{display:inline;float:left;width:60px;height:60px;margin:10px 5px 0;list-style:none;background:#333;}
</style>
</head>
<body>
<div id="test">
<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
	<li>ddd</li>
	<li>eee</li>
	<li>fff</li>
	<li>ggg</li>
	<li>hhh</li>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
	<li>ddd</li>
	<li>eee</li>
	<li>fff</li>
	<li>ggg</li>
	<li>hhh</li>
</ul>
</div>
</body>
</html>

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>test</title>
<style type="text/css">
#test{width:290px;background:#eee;}
#test ul{overflow:hidden;zoom:1;margin:0;padding:0 5px 10px 5px;}
#test li{display:inline;float:left;width:60px;height:60px;margin:10px 5px 0;list-style:none;background:#333;}
</style>
</head>
<body>
<div id="test">
<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
	<li>ddd</li>
	<li>eee</li>
	<li>fff</li>
	<li>ggg</li>
	<li>hhh</li>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
	<li>ddd</li>
	<li>eee</li>
	<li>fff</li>
	<li>ggg</li>
	<li>hhh</li>
</ul>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

虚拟工作站(VMware Workstation 虚拟机)v7.0 汉化安装特别版+注册机

2009-12-02T09:29:59+08:00

在虚拟机上运行Windows 7或是Vista的用户对于无缘使用其Aero效果一定感到很失望，现在除了微软自己的Windows Virtual PC之外VMWare的虚拟机也可以使用Aero效果了。
VMware在最新的Workstation 7中添加了对Aero Glass等功能的支持。
　　
*完善了对3D的支持
　　*支持最新Windows 7 WDDM驱动
　　*支持vSphere 4.0和ESX
　　*可直接使用虚拟机进行打印
　　*AutoProtect
　　*支持对虚拟机进行加密
　　*支持IPv6、ALSA
　　*虚拟磁盘可扩展，无需使用额外软件
下载页面:
VMware Workstation 汉化安装特别版+注册机

AOP DynamicProxy动态代理模式(类似Spring AOP 的实现)

2009-11-30T18:27:41+08:00

AOP的意思就是面向切面编程.
OO注重的是我们解决问题的方法(封装成Method),而AOP注重的是许多解决解决问题的方法中的共同点,是对OO思想的一种补充!
还是拿人家经常举的一个例子讲解一下吧:
比如说,我们现在要开发的一个应用里面有很多的业务方法,但是,我们现在要对这个方法的执行做全面监控,或部分监控.也许我们就会在要一些方法前去加上一条日志记录,
我们写个例子看看我们最简单的解决方案
我们先写一个接口IHello.java代码如下:

里面有个方法,用于输入"Hello" 加传进来的姓名;我们去写个类实现IHello接口

现在我们要为这个业务方法加上日志记录的业务,我们在不改变原代码的情况下,我们会去怎么做呢?也许,你会去写一个类去实现IHello接口,并依赖Hello这个类.代码如下:

其中.Logger类和Level枚举代码如下:
Logger.java

Level.java

那我们去写个测试类看看,代码如下:
Test.java

运行以上代码我们可以得到下面结果:

从上面的代码我们可以看出,hello对象是被HelloProxy这个所谓的代理态所创建的.这样,如果我们以后要把日志记录的功能去掉.那我们只要把得到hello对象的代码改成以下:

上面代码,可以说是AOP最简单的实现!
但是我们会发现一个问题,如果我们像Hello这样的类很多,那么,我们是不是要去写很多个HelloProxy这样的类呢.没错,是的.其实也是一种很麻烦的事.在jdk1.3以后.jdk跟我们提供了一个API java.lang.reflect.InvocationHandler的类. 这个类可以让我们在JVM调用某个类的方法时动态的为些方法做些什么事.让我们把以上的代码改一下来看看效果.
同样,我们写一个IHello的接口和一个Hello的实现类.在接口中.我们定义两个方法;代码如下 :

IHello.java

Hello.java

我们一样的去写一个代理类.只不过.让这个类去实现java.lang.reflect.InvocationHandler接口,代码如下:

import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.lang.reflect.Proxy;
public class DynaProxyHello implements InvocationHandler {
    /** 
     * 要处理的对象(也就是我们要在方法的前后加上业务逻辑的对象,如例子中的Hello)
     */
    private Object delegate;
    /** 
     * 动态生成方法被处理过后的对象 (写法固定) 
     * @param delegate
     * @param proxy
     * @return
     */
    public Object bind(Object delegate) {
        this.delegate = delegate;
        return Proxy.newProxyInstance(
                this.delegate.getClass().getClassLoader(), this.delegate
                        .getClass().getInterfaces(), this);
    }
    /** 
     * 要处理的对象中的每个方法会被此方法送去JVM调用,也就是说,要处理的对象的方法只能通过此方法调用
     * 此方法是动态的,不是手动调用的
     */
    public Object invoke(Object proxy, Method method, Object[] args)
            throws Throwable {
        Object result = null;
        try {
            //执行原来的方法之前记录日志
            Logger.logging(Level.DEBUGE, method.getName() + " Method end .");
            
            //JVM通过这条语句执行原来的方法(反射机制)
            result = method.invoke(this.delegate, args);
            //执行原来的方法之后记录日志
            Logger.logging(Level.INFO, method.getName() + " Method Start!");
        } catch (Exception e) {
            e.printStackTrace();
        }
        //返回方法返回值给调用者
        return result;
    }
}

上面类中出现的Logger类和Level枚举还是和上一上例子的实现是一样的.这里就不贴出代码了.

让我们写一个Test类去测试一下.代码如下:
Test.java

运行输出的结果如下:

由于线程的关系,第二个方法的开始出现在第一个方法的结束之前.这不是我们所关注的!
从上面的例子我们看出.只要你是采用面向接口编程,那么,你的任何对象的方法执行之前要加上记录日志的操作都是可以的.他(DynaPoxyHello)自动去代理执行被代理对象(Hello)中的每一个方法,一个java.lang.reflect.InvocationHandler接口就把我们的代理对象和被代理对象解藕了.但是,我们又发现还有一个问题,这个DynaPoxyHello对象只能跟我们去在方法前后加上日志记录的操作.我们能不能把DynaPoxyHello对象和日志操作对象(Logger)解藕呢?
结果是肯定的.让我们来分析一下我们的需求.
我们要在被代理对象的方法前面或者后面去加上日志操作代码(或者是其它操作的代码),
那么,我们可以抽象出一个接口,这个接口里就只有两个方法,一个是在被代理对象要执行方法之前执行的方法,我们取名为start,第二个方法就是在被代理对象执行方法之后执行的方法,我们取名为end .接口定义如下 :

我们去写一个实现上面接口的类.我们把作他真正的操作者,如下面是日志操作者的一个类:
LoggerOperation.java

然后我们要改一下代理对象DynaProxyHello中的代码.如下:

import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.lang.reflect.Proxy;
public class DynaProxyHello implements InvocationHandler {
    /**
     * 操作者
     */
    private Object proxy;
    /**
     * 要处理的对象(也就是我们要在方法的前后加上业务逻辑的对象,如例子中的Hello)
     */
    private Object delegate;
    /**
     * 动态生成方法被处理过后的对象 (写法固定) 
     * @param delegate
     * @param proxy
     * @return
     */
    public Object bind(Object delegate,Object proxy) {
        
        this.proxy = proxy;
        this.delegate = delegate;
        return Proxy.newProxyInstance(
                this.delegate.getClass().getClassLoader(), this.delegate
                        .getClass().getInterfaces(), this);
    }
    /** 
     * 要处理的对象中的每个方法会被此方法送去JVM调用,也就是说,要处理的对象的方法只能通过此方法调用
     * 此方法是动态的,不是手动调用的
     */
    public Object invoke(Object proxy, Method method, Object[] args)
            throws Throwable {
        Object result = null;
        try {
            //反射得到操作者的实例
            Class clazz = this.proxy.getClass();
            //反射得到操作者的Start方法
            Method start = clazz.getDeclaredMethod("start",new Class[] { Method.class });
            //反射执行start方法
            start.invoke(this.proxy, new Object[] { method });
            //执行要处理对象的原本方法
            result = method.invoke(this.delegate, args);
//            反射得到操作者的end方法
            Method end = clazz.getDeclaredMethod("end",new Class[] { Method.class });
//            反射执行end方法
            end.invoke(this.proxy, new Object[] { method });

} catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
}

然后我们把Test.java中的代码改一下.测试一下:

结果还是一样的吧.

如果你想在每个方法之前加上日志记录,而不在方法后加上日志记录.你就把LoggerOperation类改成如下:

运行一下.你就会发现,每个方法之后没有记录日志了. 这样,我们就把代理者和操作者解藕了!

下面留一个问题给大家,如果我们不想让所有方法都被日志记录,我们应该怎么去解藕呢?
我的想法是在代理对象的public Object invoke(Object proxy, Method method, Object[] args)方法里面加上个if(),对传进来的method的名字进行判断,判断的条件存在XML里面.这样我们就可以配置文件时行解藕了.如果有兴趣的朋友可以把操作者,被代理者,都通过配置文件进行配置 ,那么就可以写一个简单的SpringAOP框架了.

[JS]获取浏览器窗体宽高数据

2009-11-30T15:31:10+08:00

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]