论坛首页 Web前端技术论坛

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

浏览 90895 次
该帖已经被评为精华帖
作者 正文
   发表时间:2007-12-05  
mootools的ui等不是很强,但是它的思想是非常强悍的。我个人觉得extjs等用他们的方法来做可以做的更强。

0 请登录后投票
   发表时间:2007-12-05  
现在把extjs2.0relase源码看的差不多了,感觉用它来做程序真的很省心。但是很多地方感觉实现的不是很巧妙。
个人很期待mootools 1.3.现在1.2基本已经完成了。我也在1.2里贡献了一部分代码。呵呵
5 请登录后投票
   发表时间: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.
0 请登录后投票
   发表时间:2007-12-05  
现在看了前面个位的讨论,发现大家都没好好读mootools源代码就拿它和其他框架比较。

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

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

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

0 请登录后投票
   发表时间:2007-12-05  
从生产者的角度来说,现在的mootools不是最好。但是它的理念是值得其他框架开发者借鉴的。

如果是用,推荐extjs. 如果是兴趣,推荐mootools.
0 请登录后投票
   发表时间:2007-12-05  
当然如果想写一些小东西,mootools更合适。我前面说的用指项目开发。
0 请登录后投票
   发表时间:2007-12-05  
在我看过的js框架里面 mootools是最优美的。
正好有开发人员在这里我想问一下。
mootools里面的getPostion貌似没有像extjs里面考虑的那么多。
是当初写的时候不想考虑,还是没有注意到。
0 请登录后投票
   发表时间:2007-12-05  
mootools
js 代码
 
  1. getPosition: function(self, relative){  
  2.     if (great(self) || relative == self) return {x: 0, y: 0};  
  3.     var el = self, left = 0, top = 0, position;  
  4.   
  5.     while (el){  
  6.         var offsetParent = Dimensions.getOffsetParent(el);  
  7.         if (!offsetParent) break;  
  8.         position = Dimensions.getRelativePosition(el, !great(offsetParent));  
  9.         left += position.x;  
  10.         top += position.y;  
  11.         el = offsetParent;  
  12.     }  
  13.   
  14.     var rpos = (relative) ? Dimensions.getPosition($(relative, true)) : {x: 0, y: 0};  
  15.     return {x: left - rpos.x, y: top - rpos.y};  
  16. },  
  17.   
  18. getRelativePosition: function(self, client){  
  19.     if (great(self)) return {x: 0, y: 0};  
  20.   
  21.     var el = self, left = self.offsetLeft, top = self.offsetTop;  
  22.   
  23.     if (Browser.Engine.trident){  
  24.         while ((el = el.offsetParent) && !Dimensions.positioned(el)){  
  25.             left += el.offsetLeft;  
  26.             top += el.offsetTop;  
  27.         }  
  28.         el = self;  
  29.     }  
  30.   
  31.     var position = {x: left, y: top}, isPositioned = Dimensions.positioned(self);  
  32.       
  33.     while ((el = el.parentNode)){  
  34.         var isOffsetParent = Dimensions.positioned(el);  
  35.         if ((!isOffsetParent || client) && ((!isPositioned || isOffsetParent) || Browser.Engine.presto)){  
  36.             var scroll = Dimensions.getScroll(el);  
  37.             position.x -= scroll.x;  
  38.             position.y -= scroll.y;  
  39.         }  
  40.         if (isOffsetParent) break;  
  41.     }  
  42.   
  43.     return position;  
  44. }  

extjs

js 代码
 
  1. getXY : function(el) {  
  2.     var p, pe, b, scroll, bd = (document.body || document.documentElement);  
  3.     el = Ext.getDom(el);  
  4.   
  5.     if(el == bd){  
  6.         return [0, 0];  
  7.     }  
  8.   
  9.     if (el.getBoundingClientRect) {  
  10.         b = el.getBoundingClientRect();  
  11.         scroll = fly(document).getScroll();  
  12.         return [b.left + scroll.left, b.top + scroll.top];  
  13.     }  
  14.     var x = 0, y = 0;  
  15.       
  16.     p = el;  
  17.   
  18.     var hasAbsolute = fly(el).getStyle("position") == "absolute";  
  19.   
  20.     while (p) {  
  21.   
  22.         x += p.offsetLeft;  
  23.         y += p.offsetTop;  
  24.   
  25.         if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {  
  26.             hasAbsolute = true;  
  27.         }  
  28.   
  29.         if (Ext.isGecko) {  
  30.             pe = fly(p);  
  31.               
  32.             var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;  
  33.             var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;  
  34.   
  35.   
  36.             x += bl;  
  37.             y += bt;  
  38.   
  39.   
  40.             if (p != el && pe.getStyle('overflow') != 'visible') {  
  41.                 x += bl;  
  42.                 y += bt;  
  43.             }  
  44.         }  
  45.         p = p.offsetParent;  
  46.     }  
  47.   
  48.     if (Ext.isSafari && hasAbsolute) {  
  49.         x -= bd.offsetLeft;  
  50.         y -= bd.offsetTop;  
  51.     }  
  52.   
  53.     if (Ext.isGecko && !hasAbsolute) {  
  54.         var dbd = fly(bd);  
  55.         x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;  
  56.         y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;  
  57.     }  
  58.   
  59.     p = el.parentNode;  
  60.     while (p && p != bd) {  
  61.         if (!Ext.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {  
  62.             x -= p.scrollLeft;  
  63.             y -= p.scrollTop;  
  64.         }  
  65.         p = p.parentNode;  
  66.     }  
  67.     return [x, y];  
  68. }  

0 请登录后投票
   发表时间:2007-12-05  
[quote="hurd"]从生产者的角度来说,现在的mootools不是最好。但是它的理念是值得其他框架开发者借鉴的。 如果是用,推荐extjs. 如果是兴趣,推荐mootools.[/quote]

我感觉也是,mootools的特色就是内聚性很强。
但是yui和extjs的特色就是工业级的精度和控制力度。

所以我更喜欢mootools的代码。但是用起来还是yui和extjs的放心。
0 请登录后投票
   发表时间:2007-12-05  
我不是开发人员,只是提出过一些意见。

Mootools的getPostion设计成这样主要是考虑到Fx的和Element的调用,
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics