mootools 获取类名_MooTools类创建技巧II

mootools 获取类名

A while back I shared a few MooTools class creation tips that I live by. More experience in creating MooTools plugins has given me some new guidelines to share.

前一段时间，我分享了一些我赖以生存的MooTools类创建技巧。 在创建MooTools插件方面的更多经验为我提供了一些共享的新指南。

代码“内联”，然后分类。 不要强迫 (Code "Inline" First, Then Class-ize; Don't Force It )

The number one tip I give to MooTools Class rookies is this: create the desired class functionality before turning it into a class. Once you have the code working using "inline" MooTools JavaScript, evaluate what you have. You may decide that your functionality is too specific to the task at hand that making a Class isn't the right choice.

我给MooTools Class新手提供的第一个秘诀是：在将所需的类功能转换为类之前，先创建所需的类功能。 使用“内联” MooTools JavaScript处理代码后，请评估您拥有的内容。 您可能会认为您的功能过于特定于手头的任务，因此选择Class不是正确的选择。

If you do think you should turn the code into a class, take a look at all of your initial "var {key} = {value}" declarations -- those will likely be your arguments and options. Take any repeated code and turn them into class methods. Do the same for specific functionalities the Class should have. Here's a very basic example:

如果您确实认为应该将代码转换为类，请查看所有初始的“ var {key} = {value}”声明-这些很可能是您的参数和选项。 采取任何重复的代码，并将它们变成类方法。 对类应具有的特定功能执行相同的操作。 这是一个非常基本的示例：

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocWidth = 20;
	var tocActive = 'toc-active';
	
	/* new: starts the show */
	var start = function() { interval = show.periodical(showDuration); };
	var stop = function() { $clear(interval); };
	/* worker */
	var show = function(to) {
		images[currentIndex].fade('out');
		toc[currentIndex].removeClass(tocActive);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive);
	};
	
	/* new: control: table of contents */
	images.each(function(img,i){
		toc.push(new Element('a',{
			text: i+1,
			href: '#',
			'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
				}
			},
			styles: {
				left: ((i + 1) * (tocWidth + 10))
			}
		}).inject(container));
		if(i > 0) { img.set('opacity',0); }
	});
	
	/* new: control: next and previous */
	var next = new Element('a',{
		href: '#',
		id: 'next',
		text: '>>',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show();
			}
		}
	}).inject(container);
	var previous = new Element('a',{
		href: '#',
		id: 'previous',
		text: '<<',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
			}
		}
	}).inject(container);
	
	/* new: control: start/stop on mouseover/mouseout */
	container.addEvents({
		mouseenter: function() { stop(); },
		mouseleave: function() { start(); }
	});
	
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		start();
	});
});

And now the Class version:

现在是Class版本：

var SimpleSlideshow = new Class({
	options: {
		showControls: true,
		showDuration: 3000,
		showTOC: true,
		tocWidth: 20,
		tocClass: 'toc',
		tocActiveClass: 'toc-active'
	},
	Implements: [Options,Events],
	initialize: function(container,elements,options) {
		//settings
		this.container = $(container);
		this.elements = $$(elements);
		this.currentIndex = 0;
		this.interval = '';
		if(this.options.showTOC) this.toc = [];
		
		//assign
		this.elements.each(function(el,i){
			if(this.options.showTOC) {
				this.toc.push(new Element('a',{
					text: i+1,
					href: '#',
					'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
					events: {
						click: function(e) {
							if(e) e.stop();
							this.stop();
							this.show(i);
						}.bind(this)
					},
					styles: {
						left: ((i + 1) * (this.options.tocWidth + 10))
					}
				}).inject(this.container));
			}
			if(i > 0) el.set('opacity',0);
		},this);
		
		//next,previous links
		if(this.options.showControls) {
			this.createControls();
			
		}
		//events
		this.container.addEvents({
			mouseenter: function() { this.stop(); }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
		});

	},
	show: function(to) {
		this.elements[this.currentIndex].fade('out');
		if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
		this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].fade('in');
		if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
	},
	start: function() {
		this.interval = this.show.bind(this).periodical(this.options.showDuration);
	},
	stop: function() {
		$clear(this.interval);
	},
	//"private"
	createControls: function() {
		var next = new Element('a',{
			href: '#',
			id: 'next',
			text: '>>',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop(); 
					this.show();
				}.bind(this)
			}
		}).inject(this.container);
		var previous = new Element('a',{
			href: '#',
			id: 'previous',
			text: '<<',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop(); 
					this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
				}.bind(this)
			}
		}).inject(this.container);
	}
});

See how easy the transition is when you have the inline code in front of you? Simple!

看到内嵌代码时，转换有多容易？ 简单！

尽可能添加事件 (Add Events When Possible)

Adding events to your classes gives a completely new level of control over the class functionality. Consider my Overlay class. I spent 95% of the time creating the plugin functionality and 5% implementing events but I consider events essential to the Overlay. Here's a quick example of implementing events:

将事件添加到您的类将对类功能进行全新的控制。 考虑我的叠加课程 。 我花了95％的时间来创建插件功能，并花了5％的时间来实现事件，但是我认为事件对于叠加层至关重要。 这是实现事件的快速示例：

//.....
Implements: [Options,Events],
open: function() {
	this.fireEvent('open');
	//do stuff
},
//.....

Now my Overlay class allows you fire events at 4 different times. More flexible and a perfect usage of events.

现在，我的Overlay类允许您在4个不同的时间触发事件。 更加灵活和完美地使用事件。

评估选项与参数 (Evaluate Options vs. Arguments)

Judge your list of options and your class' primary responsibilities to determine if all of the options should be kept as options and not as arguments, and visa versa. When I come to a 50/50 decision I choose to make the parameter an option. If the class cannot live without the given option/argument and there's no suitable default, keep it as an argument.

判断您的选择清单和班级的主要责任，以确定是否所有选择都应保留为选择而不是论据，反之亦然。 当我做出50/50的决定时，我选择将参数设为选项。 如果没有给定的选项/参数该类无法生存，并且没有合适的默认值，请将其保留为参数。

链接：返回此； (Chaining: return this;)

One of the great advantages of using a JavaScript frameworks and classes is the ability to chain method class to make your code shorter. And implementing that type of functionality is so easy!

使用JavaScript框架和类的一大优点是能够链接方法类以使代码更短。 实现这种功能非常容易！

//.....
store: function(key,value) {
	this.data[key] = value;
	return this;
}
//.....

Don't let your methods end with nothing -- return this!

不要让您的方法一无所有-返回此！

把它放在伪造！ (Put it in the Forge!)

Share your awesome plugin by posting it in the MooTools Forge. Sharing your plugins in the Forge allows you to easily get feedback, improvements, and requests.

通过将其发布到MooTools Forge中来分享您的插件。 在Forge中共享插件可让您轻松获得反馈，改进和要求。

There you have it. Feel free to share any of your tips!

你有它。 随时分享您的任何提示！

翻译自: https://davidwalsh.name/mootools-class-tips-ii

mootools 获取类名