The code optimization we've just completed is an example of refactoring—modifying existing code to perform the same task in a more efficient or elegant way. To explore further refactoring opportunities, let's look at the behaviors we have bound to each button. The .removeClass()method's parameter is optional; when omitted, it removes all classes from the element. We can streamline our code a bit by exploiting this feature, as follows:
// work in progress
$(document).ready(function() {
$('#switcher-default').addClass('selected')
.bind('click', function() {
$('body').removeClass();
});
$('#switcher-narrow').bind('click', function() {
$('body').removeClass().addClass('narrow');
});
$('#switcher-large').bind('click', function() {
$('body').removeClass().addClass('large');
});
$('#switcher button').bind('click', function() {
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});
我们刚刚完成的代码优化是一个代码重构的例子——修改已经存在的代码，让他们以一种更加高效更加强大的方式实现相同的任务。为了更深入的研究重构的可能，我们看一下绑定到每一个按钮的行为。.removeClass()的参数是可选的，当被省略后，它将移除这个元素的所有的类。我们可以通过这个特点来让我们的代码更加高效，。
代码同上
Note that the order of operations has changed a bit to accommodate our more general class removal; we need to execute .removeClass()first so that it doesn't undo the .addClass()we perform in the same breath.
注意一下，我们的操作的顺序变了一点，以便于我们可以我们更加一般的类的移除。我们需要先运行.removeclass()函数，以便于他不会撤销我们几乎在同一瞬间实现的.addclass()方法。
We can only safely remove all classes because we are in charge of the HTML in this case. When we are writing code for reuse (such as for a plugin), we need to respect any classes that might be present and leave them intact.
我们可以安全的移除所有的类，因为在这种场景下我们完全控制html。当我们书写代码来重用的时候（比如一个插件），我们需要考虑所有的可能被呈现或者不使用的类。
Now, we are executing some of the same code in each of the buttons' handlers. This can be easily factored out into our general button clickhandler, as shown in the following code snippet:
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').bind('click', function() {
$('body').removeClass();
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow');
});$('#switcher-large').bind('click', function() {$('body').addClass('large');
});
});
代码如上。
Note that we need to move the general handler above the specific ones now. The .removeClass()needs to happen before the .addClass(), and we can count on this because jQuery always triggers event handlers in the order in which they were registered. Finally, we can get rid of the specific handlers entirely by, once again, exploiting event context. As the context keyword thisgives us a DOM element rather than a jQuery object, we can use native DOM properties to determine the ID of the element that was clicked. We can, thus, bind the same handler to all the buttons and within the handler perform different actions for each button, as follows:
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').bind('click', function() {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});我们注意到，我们需要把一般处理器移动到特殊处理器之上，这个.removeClass（）方法需要发生在addclass方法之前，我们可以做到这一点，因为jquery总是按照事件被注册的顺序触发事件。最后，我们可以再一次通过事件处理上下文完全避免特定的事件处理器。上下文关键字this提供了一个dom对象而不是jquery对象，我们可以使用原生的dom属性来决定被点击的元素的id。因此，我们可以为所有的按钮绑定相同的处理器，通过这个处理器为每一个按钮表现不同的行为。
代码同上。
The value of the bodyClassvariable will be default, narrow, or large, depending on which button is clicked. Here, we are departing somewhat from our previous code in that we are adding a defaultclass to the <body>when the user clicks <button id="switcher-default">. While we do not need this class applied, it isn't causing any harm either, and the reduction of code complexity more than makes up for an unused class name.
The value of the bodyClassvariable will be default, narrow, or large, depending on which button is clicked. Here, we are departing somewhat from our previous code in that we are adding a defaultclass to the <body>when the user clicks <button id="switcher-default">. While we do not need this class applied, it isn't causing any harm either, and the reduction of code complexity more than makes up for an unused class name.
bodyclass变量的值将会根据被点击的按钮来赋予default，narrow，large不同的值。现在我们的代码变的和之前的有些不一样了，当用户点击button Id=switcher-default之后，我们在body上添加了一个defaut类。尽管我们不需要这个类，但是它并没有造成任何坏处，而且降低代码的复杂性弥补了多出一个不被使用的类名的缺点。
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
