我为什么选择mootools,抛弃了prototype. (mootools与prototype 核心代码分析)

fins

浏览: 2607460 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Mootools prototype jQuery EXT Ajax

我为什么选择mootools,抛弃了prototype. (mootools 与 prototype 核心代码分析)

===========================================
前言
===========================================

最近喜欢上了mootools(相见恨晚啊),在公开表示了对他的偏爱.
很多朋友都问我为什么要移情别恋,其实理由还是蛮多的.

今天在这里打算列举出一部分.让更多的朋友能够了解一下mootools,也希望有更多的朋友喜欢上他.

文章的标题注定了我会更多的讲述 mootools比prototype好的地方,
希望大家不要被我的误导,以为mootools处处都比prototype好.
mootools还是有一些不足的.

本次对比针对 mootools 1.11版和 prototype 1.51版,
只比较了一些核心代码,其他的工具方法,辅助函数不再本文讨论之内.

开始前,再次重申一遍:我曾经很爱prototype,而且我将永远都会用"伟大"来形容它.

好下面对比正式开始 (
mootools以下简称moo.
本文所引用的代码, 只是起到说明作用,不保证他们都可以被正确的执行.
同时为了使本文简洁一些,引入的一些 moo和prototype的代码也只是片段或是伪代码.
)

===========================================
一. 类机制
===========================================

js里的类实际上就是function.
如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

var PersonClass=function(name,gender){
	this.name=name;
	this.gender=gender;
	alert("My name is "+this.name);
}

var myGirlFriend=new PersonClass('Vickey','female');

执行后, 会创建一个PersonClass类的实例myGirlFriend, 并执行function内的语句.
那些语句可以理解为是类的构造函数.

Prototype
现在来看看在prototype的帮助下如何去定义这个类:

var PersonClass = Class.create();

PersonClass.prototype.initialize=function(name,gender){
	this.name=name;
	this.gender=gender;
	alert("My name is "+this.name);
};

var myGirlFriend=new PersonClass('Vickey','female');

//如果想给类增加属性和方法时使用 
PersonClass.prototype.XXX=...;
//或者是使用 prototype提供的 
Object.extend(PersonClass.prototype, {...} );

(关于Object.extend稍后在对比继承机制时再细说.)

再来看看prototype是实现类机制的核心代码.

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

通过看代码不难看出,prototype的Class实际上只是帮助我们抽象出了"类的构造函数".
而当我们在prototype的这种机制下进行类的定义时,实际上带来的好处是非常有限的.
prototype的Class只是从结构对我们的类进行了重新规划. 而这样的规划意义并不是很大.
而且prototype带有强制性,即, initialize 是必须要定义的.
实际上这里存在一个缺陷, Class应该提供一个默认的initialize(一个空函数就好),
或者是在create返回的function里进行必要的判断.
(prototype1.6的类机制变化比较大,但是还没仔细研究过,所以不敢轻易评论).

Mootools

现在来看看在 moo的帮助下如何去定义一个类:

var PersonClass = new Class( {
	initialize: function(name,gender){
		this.name=name;
		this.gender=gender;
		alert("My name is "+this.name);
	}
});
var myGirlFriend=new PersonClass('Vickey','female');

其中类的 initialize 不是必须的.
如果你想给 PersonClass 增加属性和方法,你可以在new Class的参数里直接以 json方式定义.
也可以使用如下方式

PersonClass.implement ({ 
	age:0 ,
	getName : function() {return this.name;}
} , {...}, ..... );

implement支持多个{}.关于implement稍后在对比继承机制时再细说.

在来看一下moo类机制的一些核心代码.

var Class = function(properties){
	var klass = function(){
		return (arguments[0] !== null && this.initialize && $type(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
	};
	$extend(klass, this);
	klass.prototype = properties;
	klass.constructor = Class;
	return klass;
};

Class.prototype = {
	extend: function(properties){
		var proto = new this(null);
		for (var property in properties){
			var pp = proto[property];
			proto[property] = Class.Merge(pp, properties[property]);
		}
		return new Class(proto);
	},
	implement: function(){
		for (var i = 0, l = arguments.length; i < l; i++) $extend(this.prototype, arguments[i]);
	}

};

代码的具体原理就不细说了.大家在moo的Class里看到了 extend 和implement,那下面就来具体说一说moo和prototype的继承机制吧.

===========================================
二. 继承机制
===========================================

Prototype
prototype提供的继承很简单.

Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}

他只是把source里的属性赋给destination,同时会覆盖destination里的同名属性.
他可以用于对象,也可以用于类,当要实现类的继承时,destination要使用 MySubClass.prototype.

prototype的继承机制可以说是非常薄弱的.

Mootools

moo提供了三种继承机制:

首先他也提供了简单的继承机制:
Objcet.extend (注意,不是上面代码中 Class 里的 extend)
他的代码如下


var $extend = function(){
	var args = arguments;
	if (!args[1]) args = [this, args[0]];
	for (var property in args[1]) args[0][property] = args[1][property];
	return args[0];
};
Object.extend = $extend;

他的使用方法和 prototype 完全一样.

但是大家可能注意到了这句 if (!args[1]) args = [this, args[0]]; 这句的纯在使得下面的代码写法成为可能.

var myObjcet={....};
myObjcet.extend=$extend;
myObjcet.extend(objA);
myObjcet.extend(objB);
myObjcet.extend(objC);

简单的一句话,让extend的用法增加了更多的灵活性,不得不赞一个了!!!

下面说说重点, moo的类里的extend和 implement
先说 implement,之前已经说了一些了

var MyClassA = new Class();
MyClassA.implement( { methodA : function() {... } }  );

执行后 MyClassA 将拥有 methodA.

implement用来向类中添加属性和方法(会覆盖同名属性和方法),相当于
Object.extend (MyClassA.prototype , {... } )
但是Object.extend 不支持多个source,implement可以,示例如下:
MyClassA.implement( objA , objB, objC ... );

下面来看看moo的Class.extend.
moo的Class.extend才是我们期待的真正的"类继承",看一下官方的示例


		var Animal = new Class({
			initialize: function(age){
				this.age = age;
			}
		});
		var Cat = Animal.extend({
			initialize: function(name, age){
				this.parent(age); //will call the previous initialize;
				this.name = name;
			}
		});

看那个parent() !!!!
通过moo的Class.extend实现的继承提供一个关键的方法 parent().
使用他你可以调用父类中的同名方法,好像java里的super一样.
这个示例已经可以说明一切了.

关于prototype和moo的类机制和继承机制的对比就到这里,孰优孰劣大家心里应该有数了吧.

===========================================
三.抽象对象
===========================================

再来看一看"抽象对象". 这个虽然对于开发人员来说用处不大,但还是对比一下吧,小细节也能看出作者的用心.

Prototype
prototype的抽象对象很简单
var Abstract = new Object();
具体的意义不大.

Mootools
moo的的抽象对象相对更完善一些.

var Abstract = function(obj){
	obj = obj || {};
	obj.extend = $extend;
	return obj;
};

支持自定义抽象(以参数形式传入),同时会为抽象对象自动添加extend方法.

===========================================
四. 关于 $()
===========================================

Prototype
prototype的$大家都比较熟悉了, 工作原理就是
通过id取得一个页面元素(或者直接传入一个页面元素对象),然后给他增加一些prototype提供的方法和属性,来方便开发人员对页面元素的使用.

Mootools
moo在这方面做的差不多.
不同的主要有两点, 首先moo为页面元素增加的方法和属性与prototype的不同(这个稍后会介绍),另外一个不同是moo的$兼具了对象管理的一个功能.
他引入了一个 Garbage 类, 来对页面元素进行一个统一的管理和回收(主要是回收).
可以更好的减少js(或浏览器)造成的内存泄露等问题.

具体的大家可以看一下代码,在这里就不详细说明了.

===========================================
五.关于 Array Enumerable Hash
===========================================

prototype 和 moo 都提供了集合迭代方法 (each)
这个网上已经有一篇不错的对比文章,我就不在这里重复了
http://blog.fackweb.cn/?p=50.

moo的 forEach/each方法: function(fn, bind){..}
那个bind 结合代码和上面那篇文章, 大家应该可以很好的看出来prototype和moo的不同与优劣.

prototype里面有 Enumerable 的概念,moo没有.
但是我个人一直觉得 Enumerable 比较鸡肋.
在实际开发中,很少使用.
Enumerable的功能完全可以用普通json对象或者是 Hash来实现.
moo的作者也许同样这么认为.所以不再设置一个鸡肋的 Enumerable类.
但是请大家放心, Enumerable 能做的事情, 在moo里也能完成.

可以理解为

moo的 Array + Hash +{} 完全可以接替 prototype的 Array + Enumerable + Hash +{}
当然对于一些工具方法两者提供的都不太一样,不好比较,但是那些方法都是附属品.
我们完全可以自己来实现,所以不在这次的比较范畴之内.

===========================================
六. 关于 Element
===========================================

两者的 Element 从作用上看类似.都是一种对页面元素的包装,为页面元素添加了一些诸如 addEvent remove style之类的方法.
但是大家通过看代码可以发现 moo的实现明显更简洁更OO.

同时还有一个关键的不同,prototype又提取出了一个Form对象,里面包含了很多表单相关的方法.
同时还衍生出了 serializeElements Method 等等很多类和方法,代码瞬间变得异常复杂和难以琢磨.

而moo中没有Form对象,在moo中,Form本身就是一个Element 他没什么特别的,这样的思想类似components模式
普通Element具备的方法 Form 都应该具备, Form具备的方法 Element也都应该包含.form 和其他页面元素没什么不同.
form元素只是一个包含了 input select textarea等子元素,同时拥有action target等属性而已.
一个div 一个span 一个td... 同样可以包含input select textarea子元素,同样可以拥有.action target属性.
浏览器处理他们的方式可能不同,但是在moo面前,大家完全平等.

其实prototype里 form和普通页面元素几乎也是平等的,但是问题就是,既然是平等的,又何必硬生生的造出Form以及那么多的衍生物呢?

===========================================
七.Ajax
===========================================

Prototype
prototype的ajax实现主要是靠一个 Ajax类来实现.(但是这个类形同虚设,大家更多的是和 Ajax.Request 类打交道.

先来看一个prototype下一个简单的ajax提交实例:

var myAjax = new Ajax.Request( url,{parameters: myData , onComplete: callBackFunction } );

其中 myData 可以是字符 : "name=Vickey&gender=female";
也可以是对象 { name : Vickey, gender : female }

Mootools
moo首先在将ajax机制分层.提取出了一个基类:XHR.
目前XHR有两个子类, 一个是 Ajax ,另一个是Json.Remote.

在moo下一个简单的ajax提交实例:

 var myAjax =new Ajax(url, {data : myData , onComplete: callBackFunction  }).request();

大家可以看到request成为了Ajax对象的一个方法,这样的设计显然是更合理更自然也更OO的.

而且关键的一点是,你可以提前创建好你需要的ajax对象.在需要发出请求时再发出请求.

 var myAjax =new Ajax(...);
.....
 myAjax.request();

同时还有一个重要特性, request是支持参数的,这个参数就是你要提交的数据.

也就是说,你可以在new Ajax时不指定数据或者指定一个默认数据.
在提交的时候可以提交另一个data.如.

myAjax.request(yourData);

其中data可以是字符串,可以是对象, 也可以是一个页面元素.

要用ajax提交一个form 或者一个 div下的所有表单元素,只是改变一下 myData.
var myData= $("formID"); // var myData= $("divID");
然后就和普通的ajax提交完全一样了.

myAjax.request(myData);

当然还有更oo的方式 :
myData.send({onComplete: callBackFunction });

用后一种方式的时候要保证提交的元素有action属性,没有你就赋一个 myData.action=url.
prototype里如何实现这一功能呢??

Prototype
Form.request($("formID") ,{ onComplete: callBackFunction });

当然prototype里也可以类似moo的做法 , 只要让myData=$("formID").serialize(true) 就可以了.
但是这一个小小的不同,反映出了设计上的差距.

Mootools
moo的Json.Remote类,简单,但是很实用:

	var jSonRemoteRequest = new Json.Remote( url , {onComplete:callBackFunction }).send({name: 'Vickey',gender: 'female' });

这个类和Ajax类的本质区别是,
他提交的是一个序列化后的 json字符串("{name: 'Vickey',gender: 'female' } "),而不是把 json对象转化成QueryString ("name=Vickey&gender=female");

===========================================
结束语
===========================================

写这篇文章不是要批评prototype,以我现在的水平还没那个资格.
只是和mootools对比后, prototype在设计上的不足立刻就显现了出来.

虽然prototype新版本变化很多,很多我上面提到的一些不足都改正了,而且也加入了很多以前不具备的新的特性.
但是prototype现在的发展停留在:"修补不足,增加功能"的阶段,而没有从设计上进行深层次的重构,所以我不认为他在mootools面前有足够的底气.

至于jquery我没有深入研究过,但是它的设计觉得完全是prototype风格的, 注意,我说的是设计风格,而不是代码风格.
代码上他可能写的更精妙,更有趣,但是设计上依然是prototype风格:薄弱的类机制,靠简单的extend支撑起整个系统.
JQuery在很多方面很出色,但是归根结底他和prototype走在一条路上,只是在有些方面他走的更快.

mootools并非完美无缺,但是至少现在他美的地方比prototype更多,缺的地方比prototype更少.

所以,我选择mootools. 你呢??

不要听评论,不要看介绍, 只要看看他们的源代码, 同时动手用他们写些东西, 你的答案自然会浮现出来.

分享到：

世上没有B/S系统,只有B系统和S系统. | 我们 (js水平远远没有登峰造极的人) 该如何 ...

2007-09-09 18:12
浏览 24681
评论(72)
论坛回复 / 浏览 (69 / 90865)
查看更多

72 楼 xifo 2008-08-17

这些争论很有意思，据我所知，国内程序员对于JS框架（不仅仅是AJAX框架）的偏好有一些另类，也就是说跟国际上趋势不太一致，个中缘由就不好分析好。

下面这张图可以帮助大家理解目前讨论的这几个框架受欢迎的程度：

71 楼 zqgogogo 2008-06-12

LZ喜欢抬杠，鉴定完毕

70 楼 hurd 2007-12-05

我不是开发人员，只是提出过一些意见。

Mootools的getPostion设计成这样主要是考虑到Fx的和Element的调用，

69 楼 i_love_sc 2007-12-05

hurd 写道

从生产者的角度来说，现在的mootools不是最好。但是它的理念是值得其他框架开发者借鉴的。如果是用，推荐extjs. 如果是兴趣，推荐mootools.

我感觉也是，mootools的特色就是内聚性很强。 
但是yui和extjs的特色就是工业级的精度和控制力度。 
 
所以我更喜欢mootools的代码。但是用起来还是yui和extjs的放心。

68 楼 i_love_sc 2007-12-05

mootools 
<div class='code_title'>js 代码</div>
<div class='dp-highlighter'>
<div class='bar'> </div>
<ol class='dp-c' start='1'>
 <li class='alt'>getPosition: function(self, relative){ </li>
 <li class=''> if (great(self) || relative == self) return {x: 0, y: 0}; </li>
 <li class='alt'> var el = self, left = 0, top = 0, position; </li>
 <li class=''> </li>
 <li class='alt'> while (el){ </li>
 <li class=''> var offsetParent = Dimensions.getOffsetParent(el); </li>
 <li class='alt'> if (!offsetParent) break; </li>
 <li class=''> position = Dimensions.getRelativePosition(el, !great(offsetParent)); </li>
 <li class='alt'> left += position.x; </li>
 <li class=''> top += position.y; </li>
 <li class='alt'> el = offsetParent; </li>
 <li class=''> } </li>
 <li class='alt'> </li>
 <li class=''> var rpos = (relative) ? Dimensions.getPosition($(relative, true)) : {x: 0, y: 0}; </li>
 <li class='alt'> return {x: left - rpos.x, y: top - rpos.y}; </li>
 <li class=''>}, </li>
 <li class='alt'> </li>
 <li class=''>getRelativePosition: function(self, client){ </li>
 <li class='alt'> if (great(self)) return {x: 0, y: 0}; </li>
 <li class=''> </li>
 <li class='alt'> var el = self, left = self.offsetLeft, top = self.offsetTop; </li>
 <li class=''> </li>
 <li class='alt'> if (Browser.Engine.trident){ </li>
 <li class=''> while ((el = el.offsetParent) && !Dimensions.positioned(el)){ </li>
 <li class='alt'> left += el.offsetLeft; </li>
 <li class=''> top += el.offsetTop; </li>
 <li class='alt'> } </li>
 <li class=''> el = self; </li>
 <li class='alt'> } </li>
 <li class=''> </li>
 <li class='alt'> var position = {x: left, y: top}, isPositioned = Dimensions.positioned(self); </li>
 <li class=''> </li>
 <li class='alt'> while ((el = el.parentNode)){ </li>
 <li class=''> var isOffsetParent = Dimensions.positioned(el); </li>
 <li class='alt'> if ((!isOffsetParent || client) && ((!isPositioned || isOffsetParent) || Browser.Engine.presto)){ </li>
 <li class=''> var scroll = Dimensions.getScroll(el); </li>
 <li class='alt'> position.x -= scroll.x; </li>
 <li class=''> position.y -= scroll.y; </li>
 <li class='alt'> } </li>
 <li class=''> if (isOffsetParent) break; </li>
 <li class='alt'> } </li>
 <li class=''> </li>
 <li class='alt'> return position; </li>
 <li class=''>} </li>
</ol>
</div>
 
extjs 
 
<div class='code_title'>js 代码</div>
<div class='dp-highlighter'>
<div class='bar'> </div>
<ol class='dp-c' start='1'>
 <li class='alt'>getXY : function(el) { </li>
 <li class=''> var p, pe, b, scroll, bd = (document.body || document.documentElement); </li>
 <li class='alt'> el = Ext.getDom(el); </li>
 <li class=''> </li>
 <li class='alt'> if(el == bd){ </li>
 <li class=''> return [0, 0]; </li>
 <li class='alt'> } </li>
 <li class=''> </li>
 <li class='alt'> if (el.getBoundingClientRect) { </li>
 <li class=''> b = el.getBoundingClientRect(); </li>
 <li class='alt'> scroll = fly(document).getScroll(); </li>
 <li class=''> return [b.left + scroll.left, b.top + scroll.top]; </li>
 <li class='alt'> } </li>
 <li class=''> var x = 0, y = 0; </li>
 <li class='alt'> </li>
 <li class=''> p = el; </li>
 <li class='alt'> </li>
 <li class=''> var hasAbsolute = fly(el).getStyle("position") == "absolute"; </li>
 <li class='alt'> </li>
 <li class=''> while (p) { </li>
 <li class='alt'> </li>
 <li class=''> x += p.offsetLeft; </li>
 <li class='alt'> y += p.offsetTop; </li>
 <li class=''> </li>
 <li class='alt'> if (!hasAbsolute && fly(p).getStyle("position") == "absolute") { </li>
 <li class=''> hasAbsolute = true; </li>
 <li class='alt'> } </li>
 <li class=''> </li>
 <li class='alt'> if (Ext.isGecko) { </li>
 <li class=''> pe = fly(p); </li>
 <li class='alt'> </li>
 <li class=''> var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0; </li>
 <li class='alt'> var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0; </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''> x += bl; </li>
 <li class='alt'> y += bt; </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''> if (p != el && pe.getStyle('overflow') != 'visible') { </li>
 <li class='alt'> x += bl; </li>
 <li class=''> y += bt; </li>
 <li class='alt'> } </li>
 <li class=''> } </li>
 <li class='alt'> p = p.offsetParent; </li>
 <li class=''> } </li>
 <li class='alt'> </li>
 <li class=''> if (Ext.isSafari && hasAbsolute) { </li>
 <li class='alt'> x -= bd.offsetLeft; </li>
 <li class=''> y -= bd.offsetTop; </li>
 <li class='alt'> } </li>
 <li class=''> </li>
 <li class='alt'> if (Ext.isGecko && !hasAbsolute) { </li>
 <li class=''> var dbd = fly(bd); </li>
 <li class='alt'> x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0; </li>
 <li class=''> y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0; </li>
 <li class='alt'> } </li>
 <li class=''> </li>
 <li class='alt'> p = el.parentNode; </li>
 <li class=''> while (p && p != bd) { </li>
 <li class='alt'> if (!Ext.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) { </li>
 <li class=''> x -= p.scrollLeft; </li>
 <li class='alt'> y -= p.scrollTop; </li>
 <li class=''> } </li>
 <li class='alt'> p = p.parentNode; </li>
 <li class=''> } </li>
 <li class='alt'> return [x, y]; </li>
 <li class=''>} </li>
</ol>
</div>

67 楼 i_love_sc 2007-12-05

在我看过的js框架里面 mootools是最优美的。
正好有开发人员在这里我想问一下。
mootools里面的getPostion貌似没有像extjs里面考虑的那么多。
是当初写的时候不想考虑，还是没有注意到。

66 楼 hurd 2007-12-05

当然如果想写一些小东西，mootools更合适。我前面说的用指项目开发。

65 楼 hurd 2007-12-05

从生产者的角度来说，现在的mootools不是最好。但是它的理念是值得其他框架开发者借鉴的。

如果是用，推荐extjs. 如果是兴趣，推荐mootools.

64 楼 hurd 2007-12-05

现在看了前面个位的讨论，发现大家都没好好读mootools源代码就拿它和其他框架比较。

mootools现在的教程都非常滞后，想了解它一定要看它的代码。

有朋友抱怨mootools性能不怎么样，那是因为看了一些国外的文章。这些文章做比较的都是第三方做的，而且比较使用的版本非常早。想了解Mootools:Selectors性能可以找SlickSpeed看看，SlickSpeed 使用的Mootools版本也对Mootools 1.2来说变化也是很大的。

另外Mootools的目标不是成为一个轻量级的框架，而是成为最好用的框架。

63 楼 hurd 2007-12-05

感觉差沙同学没理解mootools的this.parent, mootools里的this.parent不等于superClass, 它只是调用superClass里的同名方法。

	var Animal = new Class({    
		initialize: function(age){    
			this.age = age;    
		},
		sleep: function(){
			alert('Animal sleep'  )
		}
	});    
	var Cat = Animal.extend({    
		initialize: function(name, age){    
			this.parent(age); //will call the previous initialize;    
			this.name = name;    
		},
		sleep: function(){
			alert('Cat sleep' )
			this.parent();
		}
	});
	var mycat	= new Cat('bb', 18);
	mycat.sleep();

上例中的mycat.sleep();执行后你就明白mootools里的parent有什么用了。

另外你提到类里需要的parent属性可以用其他变量名代替，为什么一定要用parent.

62 楼 hurd 2007-12-05

现在把extjs2.0relase源码看的差不多了，感觉用它来做程序真的很省心。但是很多地方感觉实现的不是很巧妙。
个人很期待mootools 1.3.现在1.2基本已经完成了。我也在1.2里贡献了一部分代码。呵呵

61 楼 hurd 2007-12-05

mootools的ui等不是很强，但是它的思想是非常强悍的。我个人觉得extjs等用他们的方法来做可以做的更强。

60 楼 hurd 2007-12-05

建议看看1.2b1吧，现在强悍的了不得。

59 楼笨笨狗 2007-11-29

汗，我回这个帖子，但却非常喜爱Prototype，嘿嘿
afcn0说的没错，Prototype是让你按js的方式写js

58 楼 afcn0 2007-11-29

仅仅因为"Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. ",Prototype整个设计目标就是不脱离js优化提高js编码体验,DRY,可以看mailing list里面讨论的代码,Prototype大大改良了js以及DOM,而不是简单重视易用性,是一个Professional JavaScript and DOM library.

57 楼 fins 2007-11-29

afcn0 写道

这帖还有人回呀,我是没用过mootools哪个东西,但是从我长时间订阅Prototype core讨论组mailing list以及Prototype的进步,我基本认为回这个贴的基本是不会用Prototype的,不过我是觉得jQuery很特别的,倒不是它的简单,易用,主要是它跨越了DOM对象,而返回jq对象,这样就可以避免DOM问题,完全都在自己的包装下,这个特点很不错,但是对于习惯DOM Scripting的人,要想完全掌握jQuery,需要有非常深刻的jq代码理解,要不只能做些简单东西.

" 我基本认为回这个贴的基本是不会用Prototype的 "
为什么这么说呢? 愿闻其详.

另外,其实现在我两个都不用, 都是学习他们的代码和设计思想, 然后自己写符合我要求的最简单的js基础库.

只是我从mootools 身上学到的东西确实很有意思, 学到了很多js之外的东西.

afcn0 hax ... 等几位朋友讨论的js话题一向都是超级高深的都是上升到语言内核层面的, 也许站在和你们一样高度来看问题的话, 所有这些东西都是一样的.
不过跳出js语言本身,而是从程序设计这个角度来看, 我觉得mootools确实比prototype好玩.
作者的设计和想法很有趣.

56 楼迷梦江南 2007-11-27

我是用mootools的，最近我遇到一个问题。在core.js里面有个
$native函数，我没有弄明白它是怎么调用的。还请指教！

55 楼 afcn0 2007-11-26

54 楼 verynewbee 2007-11-26

虽然你说不是在批评Prototype，但是我敢肯定你是在一种既定的思维状态下写的这篇文章，就是“Prototype不好，Mootools好”。有了这样的思维前提之后，写的东西未免有失偏颇。

所以你多次强调你不是在贬低Ptototype，但其实你某种程度上就是。

不过你写的还是比较好的，多谢分享。

还有个小意见：中文的逗号、句号还是应该用全角的...它就应该是它而不是他。

53 楼 may27th 2007-10-29

以前也用prototype，不过现在渐渐用得少了，现在大多都从头手写，因为发觉暂时还用不着prototype中那么多的功能（效果）

一般现在写代码用一个自己搞的common.js, 里面包含：
$()
addEvent （removeEvent）
PageConsole
getElementsByClassName
trim
或者再加一个包好的ajax object 就差不多满足现在的需求了

在现在做的这个项目里引用一个prototype.js不是很好，因为是业务系统，万一哪天bug发生在prototype.js中，就麻烦了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论