JavaScript框架：Prototype与MooTools深度解析

### JavaScript框架：Prototype与MooTools深度解析 #### 1. Prototype框架中的邮件检查回调函数 在使用Prototype框架进行Ajax请求时，当请求成功后，会调用`checkEmail_callBack()`函数，并将用于向服务器发送请求的`XMLHttpRequest`对象作为参数传递给它。以下是该函数的代码： ```javascript function checkEmail_callBack(request) { var emailValue = $F("email"); if (request.responseText == "available") { alert("The email " + emailValue + " is currently not in use!"); } else { alert("I’m sorry, but " + emailValue + " is in use by another user."); } } ``` 此函数的执行步骤如下： 1. 获取邮件文本框的值，并将其存储在`emailValue`变量中。 2. 通过比较请求的`responseText`属性与字符串`"available"`，来判断该电子邮件是否可供用户使用。 3. 根据`if`语句的结果，向用户显示相应的消息，告知其电子邮件是否可用。 Prototype是一个强大的框架，它提供了丰富的实用工具，改变了我们编写JavaScript的方式。要获取更多关于Prototype及其提供的实用工具的信息，可以查看API文档（http://www.prototypejs.org/api ）和教程（http://www.prototypejs.org/learn ）。 #### 2. 深入了解MooTools框架 乍一看，MooTools与Prototype非常相似，这是因为MooTools最初是为与Prototype协同工作而开发的。在DOM操作方面，MooTools更像是jQuery和Prototype的结合体。 ##### 2.1 查找元素 MooTools提供了与Prototype类似的`$()`函数，用于查找元素并对其进行扩展。例如： ```javascript $("myDiv") ``` 上述代码会查找`id`为`myDiv`的元素，使用MooTools的方法对其进行扩展，并返回扩展后的元素。我们可以使用DOM元素对象的方法和属性，以及MooTools提供的方法。 此外，MooTools还提供了`$$()`函数，用于使用CSS选择器检索元素，并且可以通过将多个选择器作为参数传递给该函数来同时使用多个选择器。例如： ```javascript $$(".myClass"); $$("div", ".myClass", "p > div") ``` 与Prototype的一个显著区别是，在MooTools中，我们不需要对返回的数组进行迭代来对其中的元素执行操作。例如： ```javascript $$("div", "a").setStyle("color", "red"); ``` 上述代码会选择页面中所有的`<div>`和`<a>`元素，并将它们的文本颜色设置为红色。而在Prototype中，我们需要使用`each()`方法来实现相同的功能，代码如下： ```javascript function changeColor(item) { var styles = new Object(); styles.color = "red"; item.setStyle(styles); } $$("div", "a").each(changeColor); ``` 可以看出，MooTools的`$$()`函数有点像Prototype的`$$()`函数和jQuery的`$()`函数的结合。同时，MooTools也有`each()`方法，如果我们想对数组中的每个元素执行操作，可以使用该方法。 ##### 2.2 修改样式 MooTools的`setStyle()`方法用于修改元素的样式，它接受两个参数：第一个是CSS属性，第二个是其值。与jQuery类似，我们可以使用样式表中使用的CSS属性或脚本中使用的驼峰式版本。例如： ```javascript $("#myDiv").setStyle("background-color", "red"); $("#myDiv").setStyle("backgroundColor", "red"); ``` 上述两行代码都会将元素的背景颜色设置为红色，因此我们可以使用任何一种属性名称来设置单个样式属性。 除了`setStyle()`方法，MooTools还为元素对象添加了`addClass()`、`removeClass()`、`toggleClass()`和`hasClass()`方法，用于更方便地操作元素的类。以下是这些方法的使用示例： ```javascript $("#myDiv").addClass("someClass").removeClass("someClass"); $("#myDiv").toggleClass("myClass").toggleClass("myClass"); $("#myDiv").hasClass("myClass"); ``` - `addClass()`和`removeClass()`方法分别用于向元素添加和移除指定的类。 - `toggleClass()`方法会根据元素是否具有指定的CSS类来添加或移除该类。 - `hasClass()`方法会根据元素是否具有指定的CSS类返回`true`或`false`。 ##### 2.3 创建、插入和移除元素 使用MooTools创建元素与使用Prototype非常相似，我们只需使用`Element`对象的构造函数，并传递要创建的元素类型以及包含元素属性的对象。以下是一个创建`<a>`元素并将其添加到文档中的示例： ```javascript var attributes = new Object(); attributes.id = "myLink"; attributes.href = "http://www.prototypejs.org"; attributes.target = "_blank"; var a = new Element("a", attributes).appendText("Go to Prototype’s Website"); $(document.body).adopt(a); ``` 要从DOM中移除元素，只需调用`dispose()`方法。例如： ```javascript $("#myLink").dispose(); ``` ##### 2.4 使用和处理事件 当使用`$()`函数扩展元素对象时，MooTools会为元素添加`addEvent()`方法，用于为指定的事件附加事件处理程序。以下是一个使用示例： ```javascript function myDiv_click(event) { alert("You clicked me!"); } $("#myDiv").addEvent("click", myDiv_click); ``` `addEvent()`方法接受两个参数：第一个是要监听的事件，第二个是事件触发时要执行的处理函数。 MooTools还允许我们使用`addEvents()`方法一次性注册多个事件处理程序。以下是一个示例： ```javascript function eventHandler(e) { // do something with the event here } var handlers = new Object(); handlers.mouseover = eventHandler; handlers.mouseout = eventHandler; $("#myDiv").addEvents(handlers); ``` 当事件触发时，如果处理程序是通过`addEvent()`或`addEvents()`方法设置的，MooTools会将其自己的`Event`对象传递给事件处理函数。该对象具有一组专有的属性，部分属性类似于W3C事件和鼠标事件对象，部分属性则与IE或W3C事件模型中的任何属性都不同，但提供了相同的信息。以下是MooTools的`Event`对象的一些属性： | 属性 | 描述 | | ---- | ---- | | page.x | 鼠标相对于浏览器窗口的水平位置 | | page.y | 鼠标相对于浏览器窗口的垂直位置 | | client.x | 鼠标相对于客户端区域的水平位置 | | client.y | 鼠标相对于客户端区域的垂直位置 | | target | 事件目标 | | relatedTarget | 与事件目标相关的元素 | | type | 调用事件处理程序的事件类型 | 要获取MooTools的`Event`对象的完整属性列表，请访问http://mootools.net/docs/core/Native/Event 。 #### 3. 使用MooTools重写DHTML工具栏 我们可以利用MooTools的DOM操作能力，重写DHTML工具栏。以下是具体的代码： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example with MooTools</title> <style type="text/css"> .tabStrip { background-color: #E4E2D5; padding: 3px; height: 22px; } .tabStrip-tab { float: left; font: 14px arial; cursor: pointer; padding: 2px; border: 1px solid transparent; } .tabStrip-tab-hover { border-color: #316AC5; background-color: #C1D2EE; } .tabStrip-tab-click { border-color: #facc5a; background-color: #f9e391; } </style> <script src="mootools-1.2.3-core-yc.js" type="text/javascript"> </script> <script type="text/javascript"> var currentNum = 0; function handleEvent(e) { var el = $(e.target); if (e.type == "mouseover" || e.type == "mouseout") { if (el.hasClass("tabStrip-tab") && !el.hasClass("tabStrip-tab-click")) { el.toggleClass("tabS ```