- MooTools 1.2 Beginner's Guide
- Jacob Gube Garrick Cheung
- 1002字
- 2025-03-31 06:30:54
Why use MooTools?
I've already mentioned that JavaScript isn't perfect; it's a language that's unintuitive at times and doesn't have a lot of native functions and methods to deal with modern user demands.
For example, Ajax is all the rage these days; the concept of Ajax allows us to communicate with our server-side scripts asynchronously. We heftily rely on Ajax requests and responses to give users an uninterrupted experience as we update the Document Object Model (DOM) behind the scenes after he or she performs an action such as submitting a web form or adding an item to their shopping cart.
If all of that sounds complicated and seems like it would take an insurmountable heap of JavaScript code to write, then you're right.
If you believe that MooTools will save you a lot of time and will help you write more efficient and terse JavaScript, then you're two for two!
Let's look at the advantages of using MooTools.
The advantages of using MooTools
There are many benefits to be had from learning and using MooTools.
I think most would agree that what makes coding in JavaScript awful is stuff like browser quirks and non-standard behavior. In addition, it's very long-winded and even simple operations can sometimes take several lines of code to author because the language is very lightweight.
MooTools, like many of the other JS frameworks, aims at allowing web developers to write complicated procedures with clean, reusable, and understandable code. Not only will this improve the speed at which you complete your projects, but it also makes your code easier to read and maintain.
There are many functions and methods that web developers think JavaScript should have. For example, Ajax can be challenging because there are no set standards to working with it in JavaScript. MooTools attempts to address these missing parts in JavaScript by providing web developers with a set of standardized and useful classes, methods, and functions.
For example, to address the lack of an Ajax class in JavaScript, MooTools has the Request
class which deals with operations involving XMLHttpRequest
objects.
MooTools also has a variety of utility functions and methods that are extremely helpful on many occasions, like the $each()
function which allows you to easily loop through objects such as non-regular arrays or function arguments, and the addEvent
method which attaches event listeners to page objects so that we can react to user actions like mouseovers and mouse clicks.
JavaScript has to run in a wide array of environments such as web browsers. Unlike server-side scripting languages like PHP and Python, where the server is responsible for compiling and interpreting your code, JavaScript is different in that the web browser interprets your code. Web browsers all have different quirks and ways of interpreting JavaScript, resulting in countless hours of debugging and browser testing.
MooTools handles these browser quirks for you. For example, web browsers have different ways of dealing with Ajax requests. Internet Explorer 6 has the ActiveX
object while Mozilla-based browsers like Firefox have the XMLHttpRequest
class.
Traditionally, whenever you create an Ajax request object in JavaScipt, you would have to check first which web browser the user is using. Thus, creating Ajax request objects results in a lot of if
statements and browser-sniffing.
For example, this is one way of creating an Ajax request object in JavaScript:
var request; //Try Compatible Browser if ( window.XMLHttpRequest ) { request = new XMLHttpRequest(); } //Try IE6 else if (window.ActiveXObject) { // IE request = new ActiveXObject("Microsoft.XMLHTTP"); } <... More browsers here...> else { //Code that deals with the event that a browser doesn't support XMLHttpRequest objects document.write('Browser is unsupported'); }
In MooTools, you can forego all of that browser-sniffing. All you have to do to create an XMLHttpRequest
object is the following code:
var myRequest = new Request([insert arguments here]);
There are two important things to note here:
- You've just saved a ton of code to write
- The request object you created will function the same way in all browsers
MooTools officially fully-supports and tests in the following web browsers (though it's very likely that it'll work perfectly in most other web browsers):
- Safari 2+
- Internet Explorer 6+
- Firefox 2+ (and browsers based on gecko)
- Opera 9+
A defining feature of most JavaScript frameworks and libraries is that they provide you with a set of useful tools for working with the Document Object Model. Traversing and manipulating the DOM in JavaScript can take massive amounts of code and can be unintuitive to many web developers (not to mention having to deal with browser quirks that can add to the length and development time of your functions).
MooTools has an intuitive syntax for selecting and working on page objects.
For example, if you want to select all the<a>
hyperlinks with a class of big
that links to a .jpg
file in a web page, it only takes a line of code:
var jpgLinks = $$('a.big[href$=.jpg]');
This line of code creates an array called jpgLinks
containing the aforementioned set of hyperlinks.
In ordinary JavaScript, this same complex selection operation would involve several for
loops and regular expression matching to accomplish. Modern browsers, such as Safari 4, FireFox 3.5, and IE8 (only CSS 2.1 compliant), are slowly catching up by implementing document.querySelector
and document.querySelectorAll
methods to simplify things.
Remember the saying, "Two heads are better than one"? Now multiply that two by several magnitudes of a thousand and that's the number of developers that constantly review, use, and contribute to the MooTools project.
MooTools leverages the collective knowledge and skills of thousands of MooTools users worldwide. Therefore, when a new bug is discovered, it is quickly reported and addressed. Also, you'll encounter some of the most efficient JavaScript code written in MooTools because it has been widely tested and inspected by MooTools users and the MooTools development team.
By using MooTools, you'll have access to a tried-and-tested JavaScript code base.