Introducción a jQuery (Parte 12)

En esta ocasión no grabe un screencast, ya que solo voy a reacomodar código en base a lo explicado en los pasados posts. Creo que será más fácil apreciar esos cambios si lo muestro como estaba el código y como fue cambiando. Así pueden ver los detalles sin tener que esperar a que lo escriba.

En la parte 11 de la serie el archivo tasks.js iba de la siguiente forma:

$( function () {
$( 'input[type="checkbox"]' ).click( function ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
} );

// $( "li" ).click( function () {
// $( this ).toggleClass( "highlight" );
// } );

$( "ol" ).on( "click", "li", function () {
$( this ).toggleClass( "highlight" );
} );

$( "a.delete" ).click( function ( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
} );

$( "button#add" ).click( function () {
var $input = $( "input#task" );
var value = $input.val();

var $ol = $( "ol" );

var templateHtml = $( "div.template" ).html();

$ol.append( templateHtml.replace( "{{task}}", value ) );
} );

} );


Expliqué el uso de “on” en lugar de usar “click” directamente en los eventos, así que lo primero que haré es cambiar los “clicks” por “on” y borrar los comentarios del código.



$( function () {
$( "ol" ).on( "click", 'input[type="checkbox"]' , function ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
} );

$( "ol" ).on( "click", "li", function () {
$( this ).toggleClass( "highlight" );
} );

$( "ol" ).on( "click", "a.delete", function ( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
} );

$( "button#add" ).click( function () {
var $input = $( "input#task" );
var value = $input.val();
var $ol = $( "ol" );
var templateHtml = $( "div.template" ).html();
$ol.append( templateHtml.replace( "{{task}}", value ) );
} );

} );


Aquí se puede ver que se esta usando varias veces el selector $( “ol” ) lo cual puede guardarse en una variable y no tener que hacer la consulta al DOM cada vez que lo necesitamos.



$( function () {
var $ol = $( "ol" );

$ol.on( "click", 'input[type="checkbox"]' , function ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
} );

$ol.on( "click", "li", function () {
$( this ).toggleClass( "highlight" );
} );

$ol.on( "click", "a.delete", function ( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
} );

$( "button#add" ).click( function () {
var $input = $( "input#task" );
var value = $input.val();
var templateHtml = $( "div.template" ).html();
$ol.append( templateHtml.replace( "{{task}}", value ) );
} );
} );


Por último voy a dejar de usar funciones anónimas y especificar el ligado de los eventos en un solo lugar. Además guardo en una variable la caja de texto para agregar tareas y así no tener que buscarla cada que se necesite agregar una tarea:



$( function () {
var $ol = $( "ol" ),
$newTask = $( "input#task" );

function checkbox_click ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
}

function hightlight() {
$( this ).toggleClass( "highlight" );
}

function deleteItem( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
}

function addItem () {
var templateHtml = $( "div.template" ).html();
$ol.append( templateHtml.replace( "{{task}}", $newTask.val() ) );
}

$ol.on( "click", 'input[type="checkbox"]', checkbox_click );
$ol.on( "click", "li", hightlight);
$ol.on( "click", "a.delete", deleteItem);
$( "button#add" ).click( addItem );
} );


Con esto, en mi opinión, el código se ve más claro.



Links Relacionados:

Introducción a jQuery (Parte 11)



Mario H. Cornejo

Comentarios