Mootools 1.2教程(1)——MooTools介绍

MooTools 1.2介绍

原文地址:30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library

请尊重个人劳动,转载请注明出处:http://fdream.net, 译者:Fdream

这里是《MooTools 1.2系列教程目录》

有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。

MooTools 1.2 JavaScript库介绍

MooTools 1.2是个强大的轻量级的JavaScript库,专门为减轻Web中交互性JavaScript开发。在某种程度上,你可以认为MooTools是CSS的扩展。例如,CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间(点击事件、鼠标悬停事件、键盘事件……),MooTools让这一切变得非常容易。…

Mootools在Chrome下奇怪的表现

写了个在页面中点击小图查看大图的功能,应用到了我的blog上,效果可以点一下我前一篇日志中的图。本来在Firefox和IE下都跑得挺好的,可惜我也比较喜欢用Chrome,于是用Chrome看了一下,结果却发现很奇怪的现象:先是两个不同对象的动画效果会混乱,好不容易调好了结果却发现大图的尺寸也乱了……

先是动画效果的问题,两个不同的Element,均使用MooTools封装后的Element对象的morph方法,代码如下:

// 背景层的动画
this._overlayer.morph({ 'opacity': [0, 0.8] });
// 图片的动画
this._imagelayer.morph({
    'left': ex, 
    'top': ey, 
    'width': size.width, 
    'height': size.height, 
    'padding': 8 
});

代码中并没有想要改变this._overlayer宽和高,结果却是this._imagelayer出不来了,this._overlayer的宽和高却变成了图片的宽和高,想想应该是把morph对象弄混了。于是试试给this._imagelayer新new了一个Fx.Morph对象,这样子:…

jQuery被微软纳入ASP.NET AJAX

.net平台上本来有一套Microsoft自己的Ajax开发框架,不过貌似反应不怎么好,现在终于有个好的消息了:非常火热的jQuery框架已经被Microsoft纳入了ASP.NET AJAX开发框架中,ScottGu已在其BLOG中对其做了较为具体的介绍:

原文地址:jQuery and Microsoft

从图上可以看出,在Visual Studio中,其智能提示还是相当不错的。另外,Microsoft将会另外开发一些基于jQuery的控件(controls)和小插件(widgets),而jQuery的帮助文档也将加入官方的帮助文档中。据其介绍,此功能不久后即将发布。

不知道以后会不会继续支持MooTools,以前辛辛苦苦地写了个注释文档,用了几次以后发现MooTools更新了,于是就再也没有用过了。Visual Studio 2008用来写JavaScript还是很不错的,希望以后能够支持MooTools!…

[翻译]jQuery和MooTools的真正区别(下)

看这篇之前,请先看上一篇:[翻译]jQuery和MooTools的真正区别(上)

Extensibility – Because I Like To Tweak Things

可扩展性——因为我喜欢调整一些东西

This brings me to the last big benefit that coding this way provides, assuming that you are writing your code in a way that lets you take advantage of it: extensibility. MooTools has a class based hierarchy (inspired by Dean Edwards excellent work), but don’t let the name fool you. It’s called a class but it’s really just an object factory that makes taking advantage…

[翻译]jQuery和MooTools的真正区别(上)

自己一直在用MooTools框架,偶然看见这篇文章,作者是MooTools Team的成员之一,讲解了jQuery和MooTools的一点点区别,主要是我觉得他写JavaScript代码和他的思维方式很值得学习。另外,对JavaScript的编程思想和对框架的选择都有很多很好的建议,对于犹豫在各种框架上的人有很好的指导作用,另外对于想深入对框架进行研究或者想自己开发框架的人也有很好的建议。文章虽然很长,但是我觉得不错,然后就翻译了。水平有限,文笔粗陋,其中有少数地方自己都觉得翻译得有些牵强,欢迎批评指正。

由于文章太长,我这里就分了上下两篇,下文在这里:[翻译]jQuery和MooTools的真正区别(下)

原文:jQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework

难以理解的JavaScript变量作用域

在一个iframe中,有这样一段js:

var clear_btn = parent.document.getElementById('clearbtn');
clear_btn.onclick = function () {
    //...
    PSearch.clearResult(); // PSearch这个对象在该页面引用的js文件中,全局变量
    //...
};

当在我的IE 7下的时候居然会out of memory,而在clearResult中并没有干任何事情!在IE 8下的时候,却是找不到PSearch,很诡异……突然想起曾经碰到过类似的问题,于是改成这样:

var clear_btn = parent.document.getElementById('clearbtn');
var ps = PSearch; // PSearch这个对象在该页面引用的js文件中,全局变量
clear_btn.onclick = function () {
    //...
    

Mootools一个小bug

在Mootools 1.2正式版中,有一个很小很诡异的bug,一般碰不上这么bt的事情。在页面里面有iframe,并且会涉及到跨域的问题时,若在页面执行过程中改变代理脚本,在改变代理脚本的前后会出现JavaScript线程假死的情况——所有的JavaScript事件都会失去响应,而此时若还原默认的脚本设置,则又可恢复正常。后来发现问题出在Event对象中,有这么几行:

win = win || window;
var doc = win.document;
event = event || win.event;

经测试,发现在这里居然取不到win.document——拒绝访问(Permission Denied)!打印了一下win的属性,发现已经是被mootools打包后的window对象了,但不知为何里面的所有属性都是拒绝访问。直接很裸地试着直接取“document”,居然成功了!修改此段代码如下:

win = win || window;

onclick在前还是onblur在前?

想写一个Mootools的select插件,和html里的select类似的功能,不过能够完全自己定制界面,而且不会像默认控件一样永远在最高层。在实现一个功能时,当时由于思维出了点偏差,碰到一个奇怪的问题:到底是onclick事件先发生还是onblur事件先发生呢?

假设有两个div,id分别为a和b,在a上绑定onclick事件,在b上绑定onblur事件,事先通过focus()方法让光标聚焦在b上,这样,当点击a时,将分别发生onclick和onblur事件,但是,哪个会先发生呢?

特别在IE和Firefox下测试了一下,测试结果比较诡异:

在IE6下:onblur和onclick事件的发生顺序是完全随机的,有时候onblur在前,有时候onclick在前,但两者的次数差不多是相同的;

在FF2下:始终是onclick事件在前。…