`
Icgemu
  • 浏览: 71583 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

prototype1.6和mootools1.2.3在本人目前工作中比较常用的方法比较

阅读更多
由于目前在项目中比较常用到类继承、事件绑定、Ajax方法,下面是在prototype1.6和mootools1.2.3中这几个实现的比较:
prototype1.6.js
<HTML>
<HEAD>
<title>prototype</title>
<script type="text/javascript" src="prototype.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var C=Class.create({
	a:null,
	b:null,
	initialize:function(a,b){
		this.a=a;
		this.b=b
	},
	speak:function(){
		alert(this.a+" "+this.b);
	}
});
var D=Class.create(C,{
	c:null,
	initialize:function(a,b,c){
		C.prototype.initialize.apply(this,[a,b]);
		this.c=c;
	},
	speak:function(){
		//C.prototype.speak.apply(this);
		//alert(this.a+" "+this.b+" "+this.c);
		var url="http://192.168.1.62:8080/WEB-T_V1.1.43I/query.do";
		new Ajax.Request(url,{
			method:"Get",
			parameters:{
				serviceType:"poiCityService",
				r:0.6617610317731282
			},
			onSuccess:this.callback,
			onFailure:this.error
		});
	},
	callback:function(res){
		var text=res.responseText;
		//var obj=eval('('+text+')');
		var obj=text.evalJSON(true);
		alert(obj.provinceList.length);
	},
	error:function(){
		alert("error!");
	}
});
var Obj={
	a:"a",
	b:"b",
	c:"C"
};
function Ttt(){
	alert(this.a+" "+this.b+" "+this.c);
};
(Ttt.bind(obj))();

var speaker=new D("I","speak","out.");

window.onload=function(){
	Event.observe($('fg'),"click",speaker.speak.bind(speaker));
}
</SCRIPT>
</HEAD>
<BODY>
<button id="fg">test</button><BR>
<div id="data"></div>
</BODY>
</HTML>


mootools1.2.3.js

<HTML>
<HEAD>
<title>mootools</title>
<script type="text/javascript" src="mootools-1.2.3-core.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var Speaker=new Class({
	a:null,
	b:null,
	initialize:function(a,b){
		this.a=a;
		this.b=b;
	},
	speak:function(){
		alert(this.a+" "+this.b);
	}
});
var BigVioceSpeaker=new Class({
	Extends:Speaker,
	c:null,
	initialize:function(a,b,c){
		//Speaker.prototype.initialize.apply(this,[a,b]);
		this.parent(a,b);
		this.c=c;
	},
	speak:function(){
		alert(this.a+" "+this.b+" "+this.c);
	}

});
var Some=new Class({
	some:null,
	initialize:function(a){
		this.some=a;
	},
	say:function(str){
		alert(str.totalpage);
	}
});
var SomeBigVoiceSpeaker=new Class({
	Implements:[Some,BigVioceSpeaker],
	initialize:function(a,b,c,d){
		BigVioceSpeaker.prototype.initialize.apply(this,[a,b,c]);
		Some.prototype.initialize.apply(this,[d]);
	},
	speak:function(){
		//alert(this.a+" "+this.b+" "+this.c+" "+this.some);
		var url="http://localhost:8888/webt/query.do";
		new Request.JSON({
			url:url,
			//update:$("data"),
			data:{serviceType:"poiService",
				acode:"110000",
				page:3,
				name:"%E7%9F%A5%E6%98%A5"
			},
			method:"get",
			onSuccess:this.say
		}).send();
	}
});
var speaker=new SomeBigVoiceSpeaker("I","speak","some","big voice");
//speaker.speak();
//speaker.say();
window.onload=function(){
	var obj=$("fg");
	obj.addEvent("click",speaker.speak.bind(speaker));	
}
</SCRIPT>
</HEAD>
<BODY>
<button id="fg">test</button><BR>
<div id="data"></div>
</BODY>
</HTML>


可以看出他们在实现上差异不大。prototype没有支持多继承,mootools支持但是对初始化成员的方法好像没有,但继承可以调用this.parent();在多继承下不可用,这里采用变通的方法Class.prototype.initialize.apply();初始化各个类。
分享到:
评论

相关推荐

    Mootools1.2.3各版本下载

    在本文中,我们将深入探讨MooTools 1.2.3的主要特性和变化,以及如何下载和使用这个版本。 1. **MooTools的核心特性** - **DOM操作**:MooTools提供了简洁的API来选择、遍历和操作DOM元素,如 `$`, `$$`, `Element...

    mootools1.2.3.rar

    MooTools 1.2.3就是这样的一个工具集,它提供了一系列实用的类和方法,帮助开发者构建高性能的Web应用程序。 Ajax是Asynchronous JavaScript and XML的缩写,是一种创建动态网页的技术。MooTools的Ajax组件使得...

    Prototype1.6 JS 官方下载地址

    Prototype 在 Web 开发中的应用 Prototype 框架广泛应用于 Web 开发中,包括构建复杂的 Web 应用程序、开发 Ajax 应用程序、实现动画和视觉效果等。它也可以与其他 JavaScript 库和框架集成,例如 jQuery、MooTools...

    jQuery、Mootools、Prototype三大JavaScript框架中文手册

    然而,原生JavaScript的API庞大且不统一,为了简化开发,社区创造了一系列的框架,其中jQuery、MooTools和Prototype是三个非常著名的JavaScript库。这些框架提供了一致的接口,增强了DOM操作,简化了事件处理,并...

    Mootools JS框架 v1.2.3 最新版.zip

    在前端开发中,JavaScript框架如Mootools是必不可少的工具,它们简化了DOM操作、事件处理、动画效果、AJAX通信等多个方面的工作。Mootools的核心理念是模块化设计,这意味着开发者可以根据项目需求选择性地引入所需...

    mootools和prototype的开发文档

    虽然MooTools和Prototype在很多方面有相似之处,但MooTools更注重性能优化和模块化,适合大型项目。Prototype则以其简洁的API和广泛的社区支持受到青睐,尤其在DOM操作和AJAX方面表现突出。 总结,MooTools和...

    Prototype、JQuery和Mootools的概要图

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域,它提供了丰富的交互性和动态功能。Prototype、jQuery和MooTools是三个非常流行的JavaScript库,它们都旨在简化JavaScript编程,提高开发效率。下面将对这三...

    mootools框架入门教程

    Element篇是mootools框架中最基础的部分,它封装了一些常用的DOM操作,例如操作元素、添加文本节点、创建DOM节点等。 $方法 $方法是mootools框架中最基本的方法,它可以用来获取元素,类似于JavaScript中的...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    MooTools是一款强大的...通过阅读"Mootools1.4中文PDF手册",开发者可以深入了解MooTools的使用方法和最佳实践,而"MooTools-Core-1.5.1.js"则是实际项目中的运行库,结合手册学习,可以迅速提升JavaScript开发技能。

    MooTools 帮助文档 中文

    Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。总之,Mootools...

    JavaScript libraries--->jQuery, Prototype, Mootools, YUI, Extjs, Dojo

    在给定的标题"JavaScript libraries---&gt;jQuery, Prototype, Mootools, YUI, Extjs, Dojo"中,提到了五种著名的JavaScript库:jQuery、Prototype、Mootools、YUI和ExtJS。这些库都有各自的特性和优势,下面将详细介绍...

    jquery,mootools,ext3,prototype对class选择符速度比较

    标题中的"jquery,mootools,ext3,prototype对class选择符速度比较"指的是对四个流行的JavaScript库——jQuery、MooTools、EXT3和Prototype——在处理CSS类选择器时的性能进行的比较测试。这些库在Web开发中广泛用于...

    mootools 1.2 中文文档

    MooTools是一个轻量级的JavaScript库,设计思想源自于Prototype,但两者在实现和功能上有许多不同之处。MooTools 1.2是该库的一个稳定版本,它提供了丰富的功能集,包括DOM操作、事件处理、动画效果、Ajax交互等。这...

    mootools/prototype的动画效果库moo.fx

    Prototype库是由Sam Stephenson开发的,它是一个轻量级的JavaScript框架,旨在提高开发者在浏览器端的工作效率。Prototype的核心功能包括对象扩展、DOM操作、AJAX交互以及强大的功能如元素选择和事件处理。Prototype...

    mootools

    6. **工具函数**:MooTools包含一系列实用的工具函数,如数组、字符串、日期等常用操作的辅助方法,提高了开发效率。 7. **模块化**:MooTools遵循CommonJS规范,通过require和provide方法实现模块加载和依赖管理,...

    mootools.js插件 1.4.5 core下载.zip

    Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计 也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等。  官方网站:...

    mootools 表单验证

    在MooTools中,表单验证通常通过创建自定义验证规则和使用内置的验证方法来实现。首先,你需要选择要验证的表单元素,这可以通过选择器完成,例如`$$('input[type="text"]')`来选择所有文本输入字段。接着,为每个...

Global site tag (gtag.js) - Google Analytics