MooTools 简洁模块化的 JavaScript 框架

发布于 2019-07-02 21:16:21 字数 3461 浏览 1635 评论 0

MooTools 是一个简洁，模块化，面向对象的 JavaScript 框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的 JavaScript 代码。MooTools 从 Prototype.js 中汲取了许多有益的设计理念，语法也和其极其类似。

MooTools 提供的功能要比 Prototype.js 多，整体设计也比 Prototype.js 要相对完善，功能更强大，比如增加了动画特效、拖放操作等。它允许您编写功能强大且灵活的代码，其优雅、有记录的、和一致的，MooTools 代码被广泛记载和易于阅读，使你能够扩展功能以符合您的要求。

如何使用

接下来我们将给大家介绍一部分 Mootools 的典型用法。

1、Mootools选择器，通过Mootools简单的语法，选择一个DOM元素

// get elements by class
$('.foo'); // or even: document.getElements('.foo');

// selector with different elements
$('div.foo, div.bar, div.bar a');

// get a single element
document.getElement('div.foo');

2、创建新的DOM元素，一个简单的创建DOM元素的例子

// the short way
new Element('div#bar.foo');

// using the element constructor
new Element('div', {
    'class': 'foo',
    id: 'bar'
});

3、事件处理，给某个元素绑定事件

// attach a click event o a element
myElement.addEvent('click', function(){
    alert('clicked!');
});

// attach several events at a time
myElement.addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

你可以通过下面的方法，移除上面绑定的事件

// remove a event
myElement.removeEvent(type, fn);

4、使用Mootools发起GET/POST请求，异步加载数据

// create a new Class instance
var myRequest = new Request({
    url: 'getMyText.php',
    method: 'get',
    onRequest: function(){
        myElement.set('text', 'loading...');
    },
    onSuccess: function(responseText){
        myElement.set('text', responseText);
    },
    onFailure: function(){
        myElement.set('text', 'Sorry, your request failed :(');
    }
});

// and to send it:
myRequest.send(data);

要发送一个请求将更加简单

myForm.send();
// optionally you can add/change the form properties
myForm.set('send', {url: 'contact.php', method: 'get'});

5、编写MooTools类

var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});

var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        // calls initalize method of Animal class
        this.parent(age);
        this.name = name;
    }
});

var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.