mootools完成特效_使用MooTools，jQuery和Dojo III完成常见任务

「爱情、让人受尽委屈。」 2023-02-22 03:32 23阅读 0赞

mootools完成特效

My love of the JavaScript frameworks knows no bounds. Unfortunately too many developers stick to one framework without taking the time to learn the others. The more frameworks you know, the better a programmer you will be and the more money you'll make. Let me show you how to accomplish a few more tasks using three JavaScript frameworks: MooTools, jQuery, and Dojo.

我对JavaScript框架的热爱是无限的。 不幸的是，太多的开发人员坚持使用一个框架却没有花时间学习其他框架。 您知道的框架越多，您将成为一名更好的程序员，您就会赚到更多的钱。 让我向您展示如何使用三个JavaScript框架完成更多任务：MooTools，jQuery和Dojo。

## 计算元素尺寸和位置 **(**Calculate Element Dimensions and Position**)** ##

Knowing not only the height and width of a dimension but it's top/left position from an offset parent or document body can be extremely helpful when trying to animate or move a DOM element.

在尝试动画或移动DOM元素时，不仅知道尺寸的高度和宽度，而且知道其偏移父级或文档主体的顶部/左侧位置，都将非常有帮助。

### Moo工具 **(**MooTools**)** ###

var dimensions = document.id('myElement').getDimensions();
    /* returns:
    { 
    	height: 4684,
    	width: 1408,
    	x: 1408,
    	y: 4684
    }
    */

### jQuery的 **(**jQuery**)** ###

var myElement = jQuery('#myElement');
    var position = myElement.position();
    var dimensions = {
    	height: myElement.height(),
    	width: myElement.width(),
    	top: position.top,
    	left: position.left
    };

### 道场 **(**Dojo**)** ###

var dimension = dojo.coords('myElement');
    /* returns:
    {
    	h: 4684,
    	l: 0,
    	t: 0,
    	w: 1408,
    	x: 0,
    	y: 0
    }
    */

## 延伸物件 **(**Extend an Object**)** ##

Extending an object means taking on object and merging a second objects properties into it. This is very helpful in merging default options with instance options.

扩展对象意味着继承对象并将第二个对象属性合并到其中。 这对于将默认选项与实例选项合并非常有用。

### Moo工具 **(**MooTools**)** ###

$extend(firstObject,{ anotherProperty:'anothervalue' });
    //second arg is added to the first object

### jQuery的 **(**jQuery**)** ###

jQuery.extend(firstObject,{ anotherProperty:'anothervalue' })

### 道场 **(**Dojo**)** ###

dojo.mixin(firstObject,{ anotherProperty:'anothervalue' });

## 停止活动 **(**Stop an Event**)** ##

Stopping an event is helpful when looking to execute functionality (usually an XHR request) when a link is clicked.

当单击链接以寻求执行功能(通常是XHR请求)时，停止事件很有用。

### Moo工具 **(**MooTools**)** ###

$('myElement').addEvent('click',function(e) {
    	e.stop();
    });

### jQuery的 **(**jQuery**)** ###

$('#myElement').click(function(e){ 
    	event.stopPropagation();
    	e.preventDefault();
    	// (no internal method that does both)
    });

### 道场 **(**Dojo**)** ###

dojo.connect(dojo.byId('myElement'),'onclick',function(e) {
    	dojo.stopEvent(e);
    });

## 将内容加载到元素中 **(**Load Content into an Element**)** ##

Sure we can create an XHR request manually to load content into an element but why do that when your favorite lirbary can do that work for you?

当然，我们可以手动创建XHR请求以将内容加载到元素中，但是当您最喜欢的库可以为您完成这项工作时，为什么这样做呢？

### Moo工具 **(**MooTools**)** ###

document.id('myElement').load('ajax/script.html');

### jQuery的 **(**jQuery**)** ###

jQuery('#myElement').load('ajax/script.html');

### 道场 **(**Dojo**)** ###

//as found on Pete Higgins' website:
    //http://higginsforpresident.net/2009/12/140-characters-of-awesome/
    dojo.extend(dojo.NodeList, {
    	grab: function(url){
    		dojo.xhr('GET', { url:url })
    			.addCallback(this, function(response){
    				this.addContent(response, 'only');
    			});
    		return this;
    	}
    });
    dojo.query('#myElement').grab('header.html');

## 获取和设置HTML内容 **(**Get and Set HTML Content**)** ##

Getting and setting HTML is a frequent JavaScript operation...yet each library handles it a bit differently.

获取和设置HTML是一种常见JavaScript操作...但是每个库对HTML的处理方式有所不同。

### Moo工具 **(**MooTools**)** ###

//get
    var html = document.id('myElement').get('html');
    //set
    document.id('myElement').set('html','Hello!');

### jQuery的 **(**jQuery**)** ###

//get
    var html = jQuery('#myElement').html();
    //set
    jQuery('#myElement').html('Hello!');

### 道场 **(**Dojo**)** ###

//get 
    var html = dojo.byId('myElement').innerHTML
    //set
    dojo.byId('myElement').innerHTML = 'Hello!';

## 使用元素存储 **(**Use Element Storage**)** ##

Element data storage is important because it allows you to store settings within the element itself -- perfect for defeating scope and context issues.

元素数据存储很重要，因为它允许您将设置存储在元素本身内-非常适合解决范围和上下文问题。

### Moo工具 **(**MooTools**)** ###

//set
    document.id('myElement').store('key','value');
    //get
    var value = document.id('myElement').retrieve('key');

### jQuery的 **(**jQuery**)** ###

//set
    jQuery('#myElement').data('key','value');
    //get
    var value = jQuery('#myElement').data('key');

### 道场 **(**Dojo**)** ###

//set
    dojo.attr('myElement','data-key','value');
    //get
    dojo.attr('myElement','data-key');

There you are -- more proof that the toolkits are one in the same, all except the syntax.  Do yourself a favor and learn more than one JavaScript framework -- you'll be better for it!

在这里，您将获得更多的证据，证明除了语法之外，所有工具包都是相同的。 帮自己一个忙，学习不止一个JavaScript框架-您会为此更好的！

> 翻译自: [https://davidwalsh.name/dojo-mootools-jquery][https_davidwalsh.name_dojo-mootools-jquery]

mootools完成特效

[https_davidwalsh.name_dojo-mootools-jquery]: https://davidwalsh.name/dojo-mootools-jquery