MooTools 简洁模块化的 JavaScript 框架 - 文章教程

MooTools 简洁模块化的 JavaScript 框架

发布于 2019-07-02 字数 3784 浏览 1394 评论 0

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

MooTools 简洁模块化的 JavaScript 框架

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.

浏览器兼容

  • IE
  • Edge
  • Firefox
  • Safari
  • Chrome
  • Opera
  • PhantomJS (headless browser)

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论