将公共逻辑提取到JavaScript中的可重用函数

鉴于我已：

$(function(){
  $("a[data-toggle-description-length]='toggle'").click(function(event){
    // common part:
    event.preventDefault();
    $("span.show_hide").toggleClass("shown hidden");
    $("table").toggleClass("wide narrow");
    $.get('/toggle_full_details');
  }); 
});

$(function(){
  $("a[data-toggle-description-length-refocus]='toggle'").click(function(event){
    event.preventdefault();
    $("span.show_hide").toggleClass("shown hidden");
    $("table").toggleclass("wide narrow");
    $("input[type='text']:first").focus();   // focus
    $.get('/toggle_full_details');
  }); 
});

如何将公共逻辑提取到函数中

我试过：

$(function update-ui(event){
    event.preventdefault();
    $("span.show_hide").toggleClass("shown hidden");
    $("table").toggleclass("wide narrow");
});

并使用以下代码调用它：

$(function(){
  $("a[data-toggle-description-length]='toggle'").click(function(event){
    update-ui(event);
    $.get('/toggle_full_details');
  }); 
});

但是我得到了

SyntaxError:missing（在形式参数之前）

---

最新代码尝试

您的代码有几个错误：

首先，

updateui

应该没有破折号

因此，updateUi应该是：

var updateUi = function (event) {
   event.preventdDefault();
   $("span.show_hide").toggleClass("shown hidden");
   $("table").toggleClass("wide narrow");
};

理想情况下，这将进入

$（函数（）{}）；

声明中

// You only need one $(function () {} );
// This is a shortcut to the document.ready event
$(function(){ 
  // updateUi will only be available inside the scope of this anonymous function
  var updateUi = function (event) {
       event.preventDefault();
       $("span.show_hide").toggleClass("shown hidden");
       $("table").toggleClass("wide narrow");
  };

  $("a[data-toggle-description-length]='toggle'").click(function(event){
    updateUi(event);
    $.get('/toggle_full_details');
  }); 

  $("a[data-toggle-description-length-refocus]='toggle'").click(function(event){
    updateUi(event);
    $("input[type='text']:first").focus();   // focus
    $.get('/toggle_full_details');
  });
});

---

如果需要使

updateUi

函数全局可用，您可以在

$（函数（）{}）；

代码中有几个错误：

首先，

updateui

应该没有破折号

因此，updateUi应该是：

var updateUi = function (event) {
   event.preventdDefault();
   $("span.show_hide").toggleClass("shown hidden");
   $("table").toggleClass("wide narrow");
};

理想情况下，这将进入

$（函数（）{}）；

声明中

// You only need one $(function () {} );
// This is a shortcut to the document.ready event
$(function(){ 
  // updateUi will only be available inside the scope of this anonymous function
  var updateUi = function (event) {
       event.preventDefault();
       $("span.show_hide").toggleClass("shown hidden");
       $("table").toggleClass("wide narrow");
  };

  $("a[data-toggle-description-length]='toggle'").click(function(event){
    updateUi(event);
    $.get('/toggle_full_details');
  }); 

  $("a[data-toggle-description-length-refocus]='toggle'").click(function(event){
    updateUi(event);
    $("input[type='text']:first").focus();   // focus
    $.get('/toggle_full_details');
  });
});

---

如果您需要使

updateUi

函数全局可用，只需在

$（函数（）{}）；

的外部声明它即可：
-使用默认值，而不是默认值
-使用toggleClass，而不是toggleClass

$(function(){
  // updateUi will only be available inside the scope of this anonymous function
  var updateUi = function (event) {
       event.preventDefault();
       $("span.show_hide").toggleClass("shown hidden");
       $("table").toggleClass("wide narrow");
  };  

  $("a[data-toggle-description-length]='toggle'").click(function(event){
    updateUi(event);
    $.get('/toggle_full_details');
  }); 

  $("a[data-toggle-description-length-refocus]='toggle'").click(function(event){
    updateUi(event);
    $("input[type='text']:first").focus();   // focus
    $.get('/toggle_full_details');
  }); 
});

---

另一个答案是：
-使用默认值，而不是默认值
-使用toggleClass，而不是toggleClass

$(function(){
  // updateUi will only be available inside the scope of this anonymous function
  var updateUi = function (event) {
       event.preventDefault();
       $("span.show_hide").toggleClass("shown hidden");
       $("table").toggleClass("wide narrow");
  };  

  $("a[data-toggle-description-length]='toggle'").click(function(event){
    updateUi(event);
    $.get('/toggle_full_details');
  }); 

  $("a[data-toggle-description-length-refocus]='toggle'").click(function(event){
    updateUi(event);
    $("input[type='text']:first").focus();   // focus
    $.get('/toggle_full_details');
  }); 
});

---

updateUi

函数的名称无效。而

toggleclass！=toggleclass

我尝试了

updateUi

，

updateUi

和

updateUi

定义和调用，它们都给出了

未定义的
变量更新ui=$（函数（事件）如何{
？修复了toggleClass错误。谢谢！1.更新ui不正确，因为函数名会有破折号或任何特殊字符。在JavaScript中，约定使用camelCase，因此updateUi是最好的。2.即使没有破折号，代码也无法工作的原因是您在函数中声明了代码，因此y在自己的作用域中创建它。当您设置
var updateUi=$（function（）{}）；
时，您正在创建一个在
document.ready
中触发的函数，因此可能无法按预期工作。因此，最好的解决方案是
var updateUi=function（）{}
。这应该放在
$（function（）{}）中
updateUi
函数的名称无效。和
toggleclass！=toggleclass
我尝试了
updateUi
，
updateUi
和
updateUi
定义和调用，它们都给出了
未定义的
变量更新ui=$（函数（事件）如何{
？修复了toggleClass错误。谢谢！1.更新ui不正确，因为函数名会有破折号或任何特殊字符。在JavaScript中，约定使用camelCase，因此updateUi是最好的。2.即使没有破折号，代码也无法工作的原因是您在函数中声明了代码，因此y在自己的作用域中创建它。当您设置
var updateUi=$（function（）{}）；
时，您正在创建一个在
document.ready
中触发的函数，因此可能无法按预期工作。因此，最好的解决方案是
var updateUi=function（）{}
。这应该放在
$（function（）{}）中
+1。我想这可能是我对范围的理解。不幸的是，我现在得到了TypeError:event.preventdefault不是第4行的函数（event.preventdefault（）行。我自己一直在努力处理这个事件。在第二行
updateUi
中忘记传递
event
。更新了JSFIDLE和响应。方法为+1。我认为这可能是我对其中作用域的理解。不幸的是，我现在得到TypeError:event.preventdefault不是第4行的函数（event.preventdefault（）行）。我自己一直在处理这个事件。忘记在第二个
updateUi
中传递
事件。更新了JSFIDLE和响应。