Javascript条件执行和简化答案

【问题标题】：Javascript conditional execution and simplificationJavascript条件执行和简化
【发布时间】：2013-04-23 21:50:43
【问题描述】：

我有以下脚本很好用，但是我认为这可以简化，对吗？另外，我希望它只触发一次。

例如，用户输入“我的标题”。脚本执行，用户在 slug 字段中看到“my-title”。如果用户用“我的疯狂标题”替换标题值，我希望 slug 保持“我的标题”。怎么样？

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

见代码示例http://jsfiddle.net/TSrYu/

【问题讨论】：

不确定这是否有效，但您可以尝试$('#article_title').one( 'change', function(){} )
Eeeck，请将var 放在str 和formatted 前面，这样它们就不是隐式全局变量了。

标签： javascript jquery refactoring conditional-execution

【解决方案1】：

你可以这样简化：

改用.one() 来注册您的事件处理程序，这样它只会触发一次。
删除中间变量，一次性处理字符串

代码：

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

工作演示：http://jsfiddle.net/jfriend00/XGjWA/

【讨论】：

感谢@jfriend00 正是我所需要的。解决了。

【解决方案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/

【讨论】：

谢谢@mohammad-adil 我很感激。它工作正常。我选择了下面的解决方案，因为它更短

【解决方案3】：

您可以进行两个小改进：

没有通过正确声明变量来使变量成为全局变量。
不再为元素查询 DOM，因为通过访问 this 已经可以使用它

为确保它只发生一次，您可以取消绑定事件（sn-p 中的最后一行

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

【讨论】：