Условное исполнение и упрощение Javascript

Question

У меня есть следующий скрипт, который отлично работает, но я думаю, что это может быть упрощено, не так ли? Кроме того, я бы хотел, чтобы он вызывал только один раз.

Пример, пользовательские входы «My Title». Скрипт выполняется, и пользователь видит «my-title» в поле slug. Если пользователь заменяет значение названия на «My Crazy Title», я хотел бы, чтобы slug оставался «my-title». Как?

$('#article_title').change(function() { 
    str = $('#article_title').val(); 
    formatted = str.replace(/\s+/g, '-').toLowerCase(); 
    $('#article_slug').val(formatted); 
}); 

См пример кода http://jsfiddle.net/TSrYu/

Answer 1

Вы можете упростить это так:.

1. Переключение на использование .one(), чтобы зарегистрировать обработчик события, так что только один раз срабатывает
2. Удалить промежуточные переменные и просто обработать строку сразу

Код:

$('#article_title').one('change', function() { 
    $('#article_slug').val($(this).val().replace(/\s+/g, '-').toLowerCase()); 
}); 

Работа демо: http://jsfiddle.net/jfriend00/XGjWA/

Answer 2

var changed = false; 
$('#article_title').change(function() { 
    // do some other stuff 
    if (!changed) { 
     str = $(this).val(); 
     formatted = str.replace(/\s+/g, '-').toLowerCase(); 
     $('#article_slug').val(formatted); 
    } 
    changed = true; 
}); 

http://jsfiddle.net/mohammadAdil/TSrYu/1/

Answer 3

Есть два незначительных улучшений вы можете сделать:

• Не делает переменные глобальные, объявляя их должным образом.
• не запрашивая DOM снова для элемента, так как он уже доступен при обращении this

Чтобы убедиться, что это происходит только один раз, вы можете отвязать событие (последняя строка в фрагменте

$('#article_title').change(function() { 
    var str = $(this).val(); 
    var formatted = str.replace(/\s+/g, '-').toLowerCase(); 
    $('#article_slug').val(formatted); 
    $(this).unbind("change"); 
});