肉包子的摇滚生活 » jQuery

技术资料

fangyuqiang — Tue, 27 Oct 2009 06:04:03 +0000

这里随意纪录一些平时不好整理，又想分享的一些技术资料。

RFC参考资料，radius项目：

在线文档资料：

Maven权威指南中文版

创业：

博客、个站

团队、商业

资讯、社区

CSS3

HTML5

资源、实例

浏览器、调试插件

工具、手册

xHTML、CSS、RDF、RSS、WAI、508-Validatoren

SourceForge界面大变化，YUI grid css亮相

fangyuqiang — Mon, 10 Aug 2009 07:15:55 +0000

很久之前就知道SourceForge界面做了大的变化，确实变得非常的NICE，用着很爽。这2天无意中用firebug看了下，惊奇的发现居然是用YUI grid css来做的，JavaScript用的是jquery。

我也用yui做过几个项目，yui提供的快速布局工具确实可以很快的生成布局。不过总觉得有缺憾，也找不到一个很好的网站使用yui grid css做的，SourceForge确实让我惊艳了。。因为原来用yui grid做的时候，发现它的布局太死板，没办法做细节调整，后来我就投奔blueprints阵容了，不过，专业级的人物果然不一样，死板的布局一样可以做出像SourceForge现在这样强大的界面。

点击可以查看下新版的SourceForge：
http://sourceforge.net/

不过，说实话，还是blueprints更好用，它对界面布局的颗粒度更细，更自由。从blueprints提供的理念来做，理论上可以做出任意大小栅格的布局的。而这点，yui grid很难。

jquery官网怎么搞的，那么明显的错误都不改一下

fangyuqiang — Mon, 01 Dec 2008 08:27:18 +0000

如图，经常上jquery的官方去查api，很早就发现它的tab的那个标签有问题，新版的css会导致它多出0.5em的一个margin，使得tab都浮起来了，看起来很不顺，我说jquery每天多少人访问啊，它干嘛就不修正一下。。根本不会超过5分钟的事情！

想说的一个主要的问题：这么大的网站，是什么人在负责维护的？

玩玩webgame开发（3）：自动战斗实现以及一些游戏细节（下）

fangyuqiang — Fri, 14 Nov 2008 14:12:30 +0000

战斗过程图示意：

[img]/upload/attachment/50153/d795065a-57e8-343c-9b37-8d1f27bfe3c8.jpg” alt=”[/img]

在《自动战斗实现以及一些游戏细节》的上一篇里面介绍了游戏人物战斗属性的设计以及战斗的触发，本章节是一个重点，主要介绍战斗过程的一系列函数与算法的实现。

本作的一个基本的思路很简单：

伤害 = 攻击-防御

速度决定攻击的间隔，其值为最大速度-速度，比如最大速度设置为12，那攻击间隔就是12-3 =9.也就是9秒发动一次攻击。

幸运决定了暴击跟躲闪，如果躲闪，伤害为0，如果暴击，伤害为攻击*2-防御

双方有任何一方HP小于0，则认为战斗结束，如果双方HP都不小于0结束战斗，即战斗中断，则判断人物逃跑，扣除一次攻击的hp。来看看在上篇就给出的代码：

这段代码前面主要是拼凑一个时间戳，类似[00:00]的格式。值得注意的地方在于下面的动作进度条，这个进度条是每秒推进一次，可以很直观的让用户感觉到战斗的过程。实现算是一个小小的技巧：

2个div都设置成绿色的背景，初始的css设置宽度为0。宝宝需要9秒进度条才会满，怪物需要7秒，满之前显示的就是进度的百分比。比如战斗进行了4秒，宝宝显示的进度的长度应该是4/9，而怪物是4/7。据此，temp是战斗时间对宝宝速度的求余操作，每次过9秒宽度就要从0开始。注意的是到9秒的时候进度是满的，求余结果是0，所以要进行一个判断。

接下来是一个核心部分，双方发动攻击的代码：

我这里用的是setInterval(function(){},boboSpeed*1000)这样的方式，就是按照宝宝的速度定时发动攻击。注意setInterval在没有进行clear之前是一直执行的。因为设计的初衷是给自家MM玩，战斗过程不要人操作，遇到怪物就直接开打一直到结束。如果你要要进行攻击设定，可能用setTimeout程序控制战斗过程更合适。

战斗逻辑部分的处理是这样的：根据对方的幸运判断对方躲闪，没有躲闪的话，根据自己幸运判断自己是否出现暴击。这里有个隐藏的bug陷阱，由于伤害是简单的攻击-防御来计算的，如果不加判断，遇到敌人的防御大于攻击的情况，那每次攻击没伤害还会让敌人的hp增加。所以damage的计算要有这个考虑。另外，hp是不能小于0的，这个也有考虑到。

战斗结束后一定要记得清除所有的定时任务，否则会在后台不断运行。这个是宝宝对怪物进行攻击的实现。怪物对宝宝进行攻击基本相同，不再赘述。

接下来看看战斗结束部分。战斗的结束主要要进行的一些动作包括：对一些临时的数据进行清除，判断战斗结果，数据重置等。战斗的结束分为2种，一种是中断逃跑，一种是完全结束，一方阵亡。对于中断逃跑的情况：

注释部分基本做了流程的概括。需要注意的一点是，如果战斗是中断的，那么宝宝跟怪兽都要回到原来的格子上面，所以战斗前要保存宝宝原来的位置的值。而如果战斗进行到底的话，肯定会有一方阵亡。宝宝赢了就占据当前格，输了则直接被移除，就不存在这个问题。

完全结束，一方阵亡的情况基本是相同的流程，只是少了逃跑惩罚以及位置回复。

战斗部分完整的代码在上一篇的最后有给出，可以点击这里查看http://playfish.javaeye.com/blog/265264

本章的最后介绍一下在上面代码里面出现的一些很重要的函数，

这个函数的作用就是拼凑出战斗信息字符串，如开头的示意图所示。函数的最后使用了$(“#battleInfo”)[0].scrollTop = 10000;来使得滚动条保持在最底部，现实的效果就是战斗信息会自动往下滚，不然战斗信息多了以后还要手动的下拉滚动条。

在整个程序中大量的用到了jquery的attr函数，稍微做一下介绍，attr支持对dom的属性进行获取跟设置，本代码里面大部分应用都是用来修改宝宝与怪物在各种情况下的表情，例如战斗最后结束，胜利的一方会摆出胜利的表情，而失败会摆出郁闷的表情。

宝宝攻击被躲闪的表情：

另外一个重要的函数是战斗结果的函数，目前还不完整，还缺少了获得战利品跟经验等级的实现。

战斗部分就暂时介绍到这里。以后再下去的部分会介绍物品的设计实现，以及对之前的介绍过的地图设计实现做一些补充，增加了地图障碍实现等。

玩玩webgame开发（3）：自动战斗实现以及一些游戏细节（上）

fangyuqiang — Mon, 10 Nov 2008 15:14:43 +0000

国际惯例，先上个效果图：

webgame自动战斗实现

战斗部分的实现应该是游戏里最复杂的部分，具体实现我的小游戏还没做完整，这里只是给出一些我的思路和做法。

战斗部分很复杂，全文大概分成以下几点：

战斗属性设置
战斗触发
战斗过程（重点）
战斗结束

由于游戏初衷是给我家MM玩的，所以过程都设置得很简单，宝宝跟怪物遇上，就自动开打，战斗过程全部自动，根据双方的速度定时发动攻击。

宝宝的战斗属性我的设置如下

var bobo = {
	pos		:	{X:1,	Y:1},        //地图上的坐标位置
	name	:	'辛德瑞拉 杰克罗琳',    //宝宝的名字，GF喜欢个这么拉风的。。。
	hp		:	100,	                       //full hp
	curHp	:	100,	                       //current hp
	level	:	0,			               //等级
	exp		:	0,                           //经验
	ap		:	15,		              //攻击力attack power
	def		:	1,		              //防御力defence
	speed	:	3,		              //速度
	luck	:	15,                                 //幸运
	eyeshot	:	2,		              //视野
	type	:	'bobo',                           //类型，用于区分怪兽，宝宝，NPC
	file	:	'baozi'                            //文件名称
};

怪物的属性基本跟这个类似。但是不同的是，一个地图上可能有多种多样的怪物，所以怪物我使用对象数组来保存：

var monsters = [
		{
			pos:{	X:1,	Y:8	},
			name:'青蛙',	hp:30, curHp:30, level:0,
			exp:0,	ap:10,	def:0,	speed:5,
			luck:15,	type:'monster',	file:'qingwa'
		},
		{
			pos:{	X:5,	Y:6	},
			name:'青蛙',	hp:30,	curHp:30,	level:0,
			exp:0,	ap:20,	def:0,	speed:5,
			luck:15,	type:'monster',	file:'qingwa'
		},
		{
			pos:{	X:4,	Y:5	},
			name:'青蛙',	hp:130,	curHp:30,	level:0,
			exp:0,	ap:5,	def:0,	speed:5,
			luck:15,	type:'monster',	file:'qingwa'
		},
		{
			pos:{	X:10,	Y:9	},
			name:'青蛙',	hp:50,	curHp:30,	level:0,
			exp:0,	ap:20,	def:0,	speed:5,
			luck:15,	type:'monster',	file:'qingwa'
		}
];

当然，如果以后做成了多人互动，也可以将宝宝改成使用对象数组来保存。

有了这样的数据结构后，还需要将这样的数据结构转化为页面上的表现形式。比如宝宝要变成页面上的一个图片，怪物要变成在各个地点散落出现的图片。这就需要一个将数组转化为html元素的过程。这个过程我是采用jquery的map函数实现的。

//将所有怪物对象转换为jQuery的img对象
var monstersFace = $.map(monsters,function(i){
	return $('');
});

map的作用，就是将一个数组映射为另一个数组返回。这里就省却了我们自己不少功夫。关于jquery的map具体说明可以参看http://docs.jquery.com/Utilities/jQuery.map#arraycallback

在开发篇的2已经提到了如果将这些对象插入到地图中，这里不再重复。接下来介绍下战斗如何触发以及如何进行。

战斗的触发设定我的实现是：每次宝宝移动，都判断当前坐标上面的图片数目，如果图片为2，即宝宝跟怪物在同一个格子上面，那么触发战斗。用jquery的方式实现就很简单了

	var curPosObj = $("#"+"X"+curPos.X+"Y"+curPos.Y); //当前坐标对象

	if($(curPosObj).find('img').length > 1 ){              //如果有2张图片
		var obj = $(curPosObj).find('img').get(0);   //获得第一张
		switch(obj.className){                             //使用classname来区分图片是怪物还是物品，物品功能将在以后介绍
			case "monster": //与怪物战斗
				battle(curPos,prePos);
				break;
			case "item":	  //获得物品
				getItem(curPos);
				break;
		}
	}

触发了战斗后，开打。开篇的效果图就是开打后的效果，相信大家对thickbox的效果都很熟悉了，不过这个使用jquery的另一个插件blockUI实现的，因为觉得这个界面的定制性更强一些。关于jquery的blockUI插件：http://malsup.com/jquery/block/#overview

进入战斗：

	var curPosObj = $("#"+"X"+curPos.X+"Y"+curPos.Y);   //当前战斗坐标
	var prePosObj = $("#"+"X"+prePos.X+"Y"+prePos.Y); //战斗前宝宝的位置

	var boboFace = $(curPosObj).find('img').get(1);
	var monsterFace = $(curPosObj).find('img').get(0);
	$('#boboFace').append(boboFace);          //将宝宝的头像设置到战斗画面中
	$('#monsterFace').append(monsterFace);//怪物的头像设置

	var monster = getObjByPos(curPos.X,curPos.Y,'monster');

	setBattleValue('monster', monster); //将宝宝的战斗信息设置到战斗画面中
	setBattleValue('bobo', bobo);           //怪物的战斗信息设置

	//利用blockUI显示战斗画面
	$.blockUI({
		message	: 	$('#battle') ,
		css		: 	{
						top		:	'15%',
						width 	:	'60%',
						left	:	'20%',
						cursor	:	'default'
					}
	});

战斗部分应该说是一个大难点，篇幅也比较长，时间关系，所以本篇分成了上下2篇，我有时间就继续往下写。等不及的同志可以先玩味下代码，下篇我就继续介绍的战斗实现的一些细节。主要是战斗过程以及战斗结束的处理。

	//开始战斗，当前双方hp都大于0
	if(bobo.curHp >0 || monster.curHp > 0 ){

		var boboWin = true;
		var timer = 0;				//战斗计时
		var timerStr = '[00:00]';	//显示时间字符串

		sysBattleMessage('战斗开始');

		var boboSpeed = maxSpeed-bobo.speed;		//宝宝速度计算
		var monsterSpeed = maxSpeed-monster.speed;	//怪物速度计算

		var battleTimer=setInterval(function(){		//计时，定时显示信息
			var s = timer%60;
			var m = Math.floor(timer/60);
			if (s<10) {
				s = "0" + s;
			}
			if(m<10){
				m = "0" + m;
			}
			timerStr = '['+m+':'+s+']';

			//显示宝宝动作进度条
			var temp = (timer+1)%boboSpeed == 0  ? boboSpeed : (timer+1)%boboSpeed;
			$('#boboAction').width(temp/boboSpeed*100+'%');
			//显示怪物动作进度条
			temp = (timer+1)%monsterSpeed == 0 ? monsterSpeed : (timer+1)%monsterSpeed;
			$('#monsterAction').width(temp/monsterSpeed*100+'%');
			//计时增加
			timer++;
		},1000);

		//宝宝定时发动攻击
		var attackMonsterT = setInterval(function(){

			//战斗模式，先判断对方躲闪，如果躲闪，此次攻击无效
			var dodge =  Math.floor(Math.random()*100) < monster.luck;	//躲闪

			if(dodge){
				battleMessage(bobo,monster,'dodge',0,timerStr,monster.curHp);
			}
			else{
				var crit = Math.floor(Math.random()*100) < bobo.luck;	//暴击判断，返回bool值 				 				var damage = bobo.ap*(Number(crit)+1) - monster.def > 0 ? bobo.ap*(Number(crit)+1) - monster.def : 0;

				monster.curHp -= damage;

				if(monster.curHp < 0 ){
					monster.curHp = 0;
				}

				//显示战斗信息
				battleMessage(bobo,monster,crit?'crit':'common',damage,timerStr,monster.curHp);

				//战斗结束，清除所有定时任务
				if(monster.curHp <=0){
					clearInterval(attackMonsterT);
					clearInterval(attackBoboT);
					clearInterval(battleTimer);
					battleOver(boboWin,monster);
				}
			}
		},boboSpeed*1000);

		//怪物定时发动攻击
		var attackBoboT = setInterval(function(){

			var dodge =  Math.floor(Math.random()*100) < bobo.luck;	//躲闪

			if(dodge){
				battleMessage(monster,bobo,'dodge',0,timerStr,bobo.curHp);
			}
			else{
				var crit = Math.floor(Math.random()*100) < monster.luck;	//暴击 				 				var damage = monster.ap*(Number(crit)+1) - bobo.def > 0 ? monster.ap*(Number(crit)+1) - bobo.def : 0;

				bobo.curHp -= damage;

				if(bobo.curHp < 0){
					bobo.curHp = 0;
				}

				battleMessage(monster,bobo,crit?'crit':'common',damage,timerStr,bobo.curHp);

				if(bobo.curHp <=0){ 					clearInterval(attackMonsterT); 					clearInterval(attackBoboT); 					clearInterval(battleTimer); 					boboWin = false; 					battleOver(boboWin,monster); 				} 			} 		},monsterSpeed*1000); 	} 	 	$('#battleCloseIcon').click(function(){ 		if(bobo.curHp>0
		&& monster.curHp>0
		&& confirm('战斗还未结束，逃跑将被怪兽追击，确定宝宝要逃跑吗？')){		//战斗未结束
			$.unblockUI({
                onUnblock: function(){
						bobo.curHp = bobo.curHp - monster.ap >0?bobo.curHp - monster.ap : 1;
						clearInterval(attackMonsterT);
						clearInterval(attackBoboT);
						clearInterval(battleTimer);
						$('#battleInfo').html('');	//清空战斗信息
						$('#monsterFace').empty();	//清空头像

						$('#boboAction').width('0%');	//重置战斗计时
						$('#monsterAction').width('0%');

						//将图片改为普通图片，占据位置
						$(boboFace).attr({
							src:'images/'+bobo.type+'/'+bobo.file+'/'+'lv'+bobo.level+'/common.gif'
						});
						$(prePosObj).append(boboFace);
						//设置坐标
						bobo.pos.X = prePos.X;
						bobo.pos.Y = prePos.Y;
						//怪兽图片
						$(monsterFace).attr({
							src:'images/'+monster.type+'/'+monster.file+'/'+'lv'+monster.level+'/common.gif'
						});
						$(curPosObj).append(monsterFace);
						$("#battleCloseIcon").unbind( "click" );
					}
				});
			}
			else{
			$.unblockUI({
                onUnblock: function(){
					clearInterval(attackMonsterT);
					clearInterval(attackBoboT);
					clearInterval(battleTimer);
					$('#battleInfo,#monsterFace').empty();	//清空战斗信息

					$('#boboAction').width('0%');	//重置战斗计时
					$('#monsterAction').width('0%');

					//将图片改为普通图片，占据位置
					if(boboWin){
						$(boboFace).attr({
							src:'images/'+bobo.type+'/'+bobo.file+'/'+'lv'+bobo.level+'/common.gif'
						});
						$(curPosObj).append(boboFace);
					}
					else{
						$(monsterFace).attr({
							src:'images/'+monster.type+'/'+monster.file+'/'+'lv'+monster.level+'/common.gif'
						});
						$(curPosObj).append(monsterFace);
					}
				}
            });
			}
		});

玩玩webgame开发（2）：人物移动与战争迷雾实现

fangyuqiang — Tue, 04 Nov 2008 15:28:04 +0000

惯例，先上下效果图片：

webgame地图效果

在上一篇玩玩webgame开发（1）大概给出了jquery方式的地图实现，最近又做了一些改进，加进了更多元素。代码全部改成jquery插件的方式。有机会做专门的介绍。

这次的主题主要是地图上面人物的移动以及战争迷雾的实现。

人物的移动其实比较简单，就是监听键盘上下左右按键事件。

$(document).keydown(function(event){
			$.boboMove(event);
});

后台boboMove函数的写法：

	switch(event.keyCode){
		case 37:
			if(bobo.pos.X > minX){ //判断地图边缘
				bobo.pos.X -= 1; //坐标变化
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);//将人物移动到这个位置上，实际做法就是将人物的图片放在这个div上面
			}
			break;
		case 38:
			if(bobo.pos.Y < maxY){
				bobo.pos.Y += 1;
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
			}
			break;
		case 39:
			if(bobo.pos.X < maxX){ 				bobo.pos.X += 1; 				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace); 			} 		break; 		case 40: 			if(bobo.pos.Y > minY){
				bobo.pos.Y -= 1;
				$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
			}
		break;
	}
	cleanBattleFog(); //清除战争迷雾

我写的这个webgame打算做个战争迷雾的效果，玩过魔兽争霸或者英雄无敌的人应该对这个概念很清楚，就是在没有探索之前，地图上面的区域都是迷雾覆盖无法看到的。

迷雾覆盖效果实现其实很简单，对于我所做的系统来说，迷雾就是所有的区域div都加上一个battleFog的css。

移除战争迷雾的算法是这样的：在人物的视野内的格子div移除battleFog这个css类。例如人物视野为1，人物坐标3，3。那么视野内的(2,3),(3,3),(3,4),(4,3),(3,2)。显示出来就是一个十字形，如果视野是2，那么显示出来就类似一个星形。

在正式给出代码之前，各位看客可以自己考虑一下这个算法的实现。可能大家都觉得这个很简单。。但是今天在写这个的时候才发觉这个看似简单的问题要写好不那么好想，可能很久没动脑筋了吧，这里卖个小关子，大家动动脑筋想想，给出人物当前的坐标，以及人物的视野，得出当前人物所有可以看到的坐标。
=================思考十分钟分割线=================
呵呵，最后给出我的战争迷雾移除算法：

function cleanBattleFog(){
	var fogToBeClean = []; //将被移除迷雾的区域数组，保存所有将被移除迷雾的div的id
//bobo.pos.X 人物X坐标，
//bobo.pos.Y 人物Y坐标
//bobo.eyeshot 人物视野
	for(var m =bobo.pos.X-bobo.eyeshot;m<=bobo.pos.X+bobo.eyeshot; m++ ){
		for(var n=bobo.pos.Y-bobo.eyeshot;n<=bobo.pos.Y+bobo.eyeshot;n++){
			var xdiff = m - bobo.pos.X;
			var ydiff = n - bobo.pos.Y;
			if(xdiff*xdiff + ydiff*ydiff <= bobo.eyeshot*bobo.eyeshot
				 && m>=1 && n>=1 && m <= map.maxY && n <= map.maxX
			){
				fogToBeClean.push('#X'+m+'Y'+n);
			}
		}
	}
	$(fogToBeClean.join(',')).removeClass('battleFog');
}

其实算法不难，就是2点间坐标距离要小于视野。并且要注意考虑地图的边界，不然可能得到不在地图内的坐标。
每得到一个坐标，用数组的push方法保存到数组中。jquery支持用逗号分割的表达式获得多个对象，所以最后直接一个join搞定。

玩玩webgame开发（1）：用jquery生成地图

fangyuqiang — Wed, 29 Oct 2008 16:46:03 +0000

先上个效果图：

jquery生成webgame的地图

选型：jquery,php,mysql。我喜欢jquery，灵活，强大的选择器，还算够用的ajax功能，还有丰富的plugin，以及effects，这些对于做webgame都是很有用的。php打算用框架来做，不过我php也是半吊子，现在在cakephp跟国产的fleaphp中犹豫不决。mysql，无条件选用

=正文=

由于我很想做一个战斗系统来玩，类似war3里面迷雾探索的，所以不管3721，js直接从战斗系统开始写。晚上写了一会，大概整出这样的代码。

var battle = {
 //can accect a random map
 createMap:function(map){
 var defaultMap = [       //定义默认地图，字母分别对应css的类名
 ['g','r','f','f','f','r','f','w'],
 ['w','g','f','f','f','r','g','f'],
 ['w','r','g','f','f','g','f','r'],
 ['f','r','f','f','f','r','f','f'],
 ];
//函数传递进来的参数判断
 if(boboUtil.isUndefined(map) || map.length == 0){
 map = defaultMap;
 }
//将2维数组转化为1维数组
 var mapSequence =  new Array();
 for(var i=0;i mapSequence.length )
 return false;
 $(this).addClass(mapSequence[i]);
//设置格子的坐标
 //set x,y index
 var x = i % fieldWidth +1;
 var y = Math.floor(i / fieldWidth +1);
 $(this).attr("id",""+x+y);
 });
 }
};

实现原理：

页面上先添加适当数目的空div，我觉得用js添加div可能存在性能问题，所以直接html里面放置一些空的div，作为地图元素。
定义一系列的css，为不同格子地图设置好宽高与背景色，实际运用时候这些背景可以换成图片什么的。
定义一个map的数组，这个数组保存地图的信息，即地图每个格子的css类名，通过js，将这些css类名添加到每个div中

最近业余时间想找点事情做，看我家MM似乎回家都比较无聊，就一个劲看片，就想给她写个webgame玩吧，至于为什么不做其他的游戏啥的，好吧，我承认我只会web。也想练练自己的JavaScript，提高下js水平，虽然对js很有兴致，但是工作方面都是做java，再下去就荒废了。

最后顺便附上一个简单的时间测试代码，使用console.log，请在firefox用firebug查看，当然，如果是IE，可以把这句换成alert。用法简单，在页面上写：

var executeTimeTest=function(func){
	var start = 0;
	var end = 0;
	start = new Date().getTime()
	for(i = 0; i < 10000000; i++) {
		func;
	}
	end = new Date().getTime();
	console.log((end - start) / 1000+'s');

};

liferay的JS代码基础解析

fangyuqiang — Mon, 08 Sep 2008 15:17:45 +0000

这段代码是Liferay 5.1版本的代码，主要功能是实现浏览器版本的判断，以根据浏览器的不同调用不同css，实现多浏览器兼容。本文秉着学习JS的态度逐步的对Liferay的一些有用的js代码进行解析。

Liferay.Browser = {
	init: function() {
		var instance = this;
		var version = instance.version();
		var exactVersion = instance.version(true);
		instance._browserVars = {
			agent: '',
			is_firefox: false,
                       ...节约篇幅略去部分代码
			is_mozilla: false,
		};
		instance._browserVars.agent = instance.browser().toLowerCase();
                ...
		jQuery.extend(instance, instance._browserVars);
	},
	browser: function() {
		var instance = this;

		return jQuery.browser.browser;
	},
	compat: function() {
		var instance = this;
		for (var i in instance._browserVars) {
			if (!window[i]) {
				window[i] = instance._browserVars[i];
			}
		}
	},
	version: function(exact) {
		var instance = this;
		if (!exact) {
			return jQuery.browser.version.major;
		}
		else {
			return jQuery.browser.version.string;
		}
	},
	_browserVars: {}
};
jQuery(
	function() {
		Liferay.Browser.init();
	}
);

这一段代码主要是对jQuery的一个j2browse的插件进行了包装，使用自己的变量命名需要来命名。对于初学者来说这样的写法可能比较难以理解。首先是

Liferay.Browser＝{...}；

可能会有疑惑，定义一个变量不是var开头吗？从JE上面一些锁定的老帖http://www.javaeye.com/topic/19506，大家都知道javascript是可以隐式声名变量的。但要注意，隐式声名变量总是被创建为全局变量。这种写法的意思就是将Liferay.Browser这个对象声明为全局变量。

再看

Liferay.Browser＝{...}；

{}是js里面对象直接量的写法，在js中，对象属性也可以是函数，而不仅仅是数字字符串。这样的写法我所知道的带来的好处是：js中对象属性可以通过.来调用，而通过.来调用从外观上是很符合其它语言的习惯的，比较易读。在{}内定义了函数后，就可以通过Liferay.Browser.init()这样的方式来完成调用了。也就是接下来的

jQuery(
	function() {
		Liferay.Browser.init();
	}
);

这一段jQuery();实际上就是执行了一个函数，这个jQuery()的函数的参数也是一个function，可以理解为jQuery(var);同alert(“error”);对比就非常容易理解了。很多新人对于jquery的写法很困惑，跟平常用的一些简单的验证脚本的js写法都不一样,其实最容易混淆和难以接受的概念就是函数function也可以作为一个变量一个参数来传递。

而其实上面的整个代码，你可以这样来理解：

a = {1,2,3};
alert(a.1);

还有一点，通常看到的function的形式都是 function a(){}的形式，这里的function()函数名都没有。这是js的匿名函数，js允许这样的匿名函数。通常这种匿名函数都用在被作为参数传递的场合，在jQuery的应用中非常常见。