初学浅析Jquery 和Mootools

首先申明，我对Javascript 认识很浅，这方面算个入门新手，所以我的认识不一定正确，但是这也应该代表了一些新手普遍思想，如果有精通的朋友提出看法，那相当感谢。

 

说实话，以前是瞧不起Javascript 认为这个东西比较初级，而且无设计可言、代码无规范、调试困难，是个小技。但最近机缘巧合，开始看Couchdb ,这个东西和Javascript 关联挺深，于是也看了看Javascript 发现以前的认识实在很片面、浅薄，原来Javascript也可以有很好的设计，而且其强大的功能和应用领域，也是自己没有想到的。

 

看Javascript 的第一步，是在论坛里Web 前端技术版里，潜水了一天，大概知道了猪是怎么跑的，接下来可以找猪肉吃了。

因为我比较懒，于是直接使用框架吧，但是使用框架，有一个非常烦人的事情，就是框架不止一个，你怎么选？根据潜水的了解，认为Jquery 和Mootools 比较适合自己的情况。

 

接下来谈谈自己对这两个框架的看法吧：

no code say hammer：

$(document).ready(function() {
	// generate markup
	var ratingMarkup = ["Please rate: "];
	for(var i=1; i <= 5; i++) {
		ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
	}
	// add markup to container and applier click handlers to anchors
	$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
		e.preventDefault();
		// send requests
		$.post("rate.php", {rating: $(this).html()}, function(xml) {
			// format result
			var result = [
				"Thanks for rating, current average: ",
				$("average", xml).text(),
				", number of votes: ",
				$("count", xml).text()
			];
			// output result
			$("#rating").html(result.join(''));
		} );
	});
});

 

 这段Jquery 代码，让人觉得，真是省事，如果自己拿Javascript 来写，会麻烦很多。

 

再看一段mootools 代码：

			var gallery = $('gallery');
			
			var addImages = function(images) {
				images.each(function(image) {
					var el = new Element('div', {'class': 'preview'});
					var name = new Element('h3', {'html': image.name}).inject(el);
					var desc = new Element('span', {'html': image.description}).inject(name, 'after');
					var img = new Element('img', {'src': images_path + image.src}).inject(desc, 'after');
					var footer = new Element('span').inject(img, 'after');
					
					if (image.views > 50 && image.views < 250) footer.set({'html': 'popular', 'class': 'popular'});
					else if (image.views > 250) footer.set({'html': 'SUPERpopular', 'class': 'SUPERpopular'});
					else footer.set({'html': 'normal', 'class': 'normal'});
					
					el.inject(gallery);
				});
			};

			$('loadJson').addEvent('click', function(e) {
				e.stop();
				var request = new Request.JSON({
					url: demo_path + 'data.json',
					onComplete: function(jsonObj) {
						addImages(jsonObj.previews);
					}
				}).send();
			});

 这两段代码其实并不全面，比如Jquery 的强大的选择器，以及庞大的插件数量。

 

我觉得，这两个框架的代码风格是最大的区别，

比如这句：

$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e)

 很多事一行代码就搞定了，非常简单。

 

而Mootools 就用了另一种做法，是全部基于对象的，比如一个DOM元素是选择器返回的一个对象，对点击链接的响应，不是直接.click 而是，在调用元素对象的addEvent（）方法。

最后，对DOM 进行生成，也是采用了new Element（） 创建元素对象，然后使用对象的inject（）方法对元素进行组合。对Ajax 请求的发送，也是比较漂亮的写法。

 

作为一个老的Java ，新的Ruby 编程人员，我的肯定是看Mootools 的代码更加舒服，符合我的思维习惯，而且我觉得我可以慢慢利用面向对象的设计能力，将代码重构复用，甚至能比Jquery 更加简单。

 

这个让我想起了很多年前，对ORM 的处理，以前大家都是在jsp 或servlet 里写sql 查询，然后处理resultset 的，当时有一大批sql 高手，放到现在都可以当DBA 呵呵。ORM 一出来，大家也不理解，这个要处理成对象，太别扭了，以前很简单就能做到的事，现在很麻烦，一点都不爽。当然后来ORM 还是慢慢占了上风，但直接写sql 也是可行的方案。

 

总结：

个人：如果你是个纯粹的前端开发人员，以前没有什么面向对象语言（Java、Ruby 等）和设计的基础，那请使用Jquery。否则，请使用Mootools

企业：如果希望能够快速见到效益，在乎成本，也不打算在技术上大的投入，请使用Jquery ，如果有一定素质的面向对象设计人才，希望企业能够在长期有一个技术优势，请使用Mootools