如何在两个JS函数中共享私有styep_id变量且保留数据

嘿，我来帮你搞定这个styep_id共享的问题！既然不能用全局公共变量，那咱们有几个靠谱的办法，既能让两个函数拿到同一个值，又不会丢失数据。

方案1：用闭包封装，共享私有变量 #

闭包可以让函数访问外部作用域的变量，而且这个变量不会暴露到全局。咱们可以把两个函数包裹在一个自执行函数里，这样它们就能共享一个私有变量，既安全又能保留数据：

// 用自执行函数创建闭包作用域，隔离私有变量
(function() {
  let _styepId = null; // 私有变量，仅闭包内函数可访问

  window.delete_estimate_position_type = function() {
    var estpt_tr_jqobj, estpt_action_links_td_jqobj, authenticity_token, request_url, stya_id;
    _styepId = $(this).attr("styep_id"); // 把值存入私有变量

    if (_styepId !== "") {
      estpt_action_links_td_jqobj = $(this).parent();
      estpt_tr_jqobj = estpt_action_links_td_jqobj.parent();
      stya_id = $("td.service-type-est-position-estimate-position-type-name>input.stya-id-for-styep", estpt_tr_jqobj).val();
      estpt_tr_jqobj.remove();
      show_stya_delete_link_if_possible(stya_id);
      remove_estpgt_if_has_no_estpt($(this).attr("estpgt_id"));
    }
  };

  window.save_configuration = function() {
    var estpt_for_estpgt = "";

    $('.estpt-for-estpgt').each(function(){
      if ($(this).find('tr.action_record_tr').size() == 0){
        estpt_for_estpgt = this;
        return false;
      }
    });

    if (estpt_for_estpgt == "") {
      var form = $(this).closest('form');
      form.submit();

      // 直接读取闭包里的私有变量
      const authenticity_token = $("#authenticity_token").val();
      const request_url = "/service_type_est_positions/" + _styepId + "/destroy_from_service_type_config";
      $.post(request_url, { authenticity_token: authenticity_token}, process_service_type_est_position_delete, "json");
    } else {
      $.alerts.okButton = 'Labi';
      jError("Vismaz vienai Tēmes pozīciju grupai nav norādīta neviena Tēmes pozīcija!", "Kļūda");
    }
    return false;
  };

  // 保留原有的辅助函数
  window.remove_estpgt_if_has_no_estpt = function(estpgt_id) {
    if ($("#estpt_for_" + estpgt_id + ">tr:first").size() == 0) {
      $("#estpgt_" + estpgt_id).remove();
      $("#estpt_tr_for_" + estpgt_id).remove();
    }
  };
})();

这个方案的优势是变量不会污染全局环境，只要页面不刷新，变量值就会一直保留。

方案2：把styep_id存在DOM元素的data属性里 #

如果闭包对你来说有点复杂，另一个更直观的办法是把styep_id存在某个持久的DOM元素上（比如页面里的表单，或者专门加个隐藏输入框），这样两个函数都能读取这个值：

首先修改delete_estimate_position_type，把值存入DOM：

function delete_estimate_position_type() {
  var estpt_tr_jqobj, estpt_action_links_td_jqobj, styep_id, authenticity_token, request_url, stya_id;
  styep_id = $(this).attr("styep_id");

  if (styep_id !== "") {
    // 把styep_id存在表单的data属性里，也可以用专门的隐藏input
    $('form').data('currentStyepId', styep_id);

    estpt_action_links_td_jqobj = $(this).parent();
    estpt_tr_jqobj = estpt_action_links_td_jqobj.parent();
    stya_id = $("td.service-type-est-position-estimate-position-type-name>input.stya-id-for-styep", estpt_tr_jqobj).val();
    estpt_tr_jqobj.remove();
    show_stya_delete_link_if_possible(stya_id);
    remove_estpgt_if_has_no_estpt($(this).attr("estpgt_id"));
  }
}

然后在save_configuration里读取这个值：

function save_configuration(){
  var estpt_for_estpgt = "";

  $('.estpt-for-estpgt').each(function(){
    if ($(this).find('tr.action_record_tr').size() == 0){
      estpt_for_estpgt = this;
      return false;
    }
  });

  if (estpt_for_estpgt == "") {
    var form = $(this).closest('form');
    form.submit();

    // 从表单的data属性里取出styep_id
    const styep_id = form.data('currentStyepId');
    const authenticity_token = $("#authenticity_token").val();
    const request_url = "/service_type_est_positions/" + styep_id + "/destroy_from_service_type_config";
    $.post(request_url, { authenticity_token: authenticity_token}, process_service_type_est_position_delete, "json");
  } else {
    $.alerts.okButton = 'Labi';
    jError("Vismaz vienai Tēmes pozīciju grupai nav norādīta neviena Tēmes pozīcija!", "Kļūda");
  }
  return false;
}

这个方案适合快速修改，DOM的data属性在页面生命周期内是持久的，不会轻易丢失数据。

方案3：修改save_configuration为带参数的函数 #

如果save_configuration是在delete_estimate_position_type执行之后立即调用的，那可以直接把styep_id作为参数传进去：

function delete_estimate_position_type() {
  var estpt_tr_jqobj, estpt_action_links_td_jqobj, styep_id, authenticity_token, request_url, stya_id;
  styep_id = $(this).attr("styep_id");

  if (styep_id !== "") {
    // ... 原有代码 ...

    // 如果需要立即保存，直接传参数调用
    save_configuration.call(this, styep_id);
  }
}

function save_configuration(styep_id){
  var estpt_for_estpgt = "";

  $('.estpt-for-estpgt').each(function(){
    if ($(this).find('tr.action_record_tr').size() == 0){
      estpt_for_estpgt = this;
      return false;
    }
  });

  if (estpt_for_estpgt == "") {
    var form = $(this).closest('form');
    form.submit();

    const authenticity_token = $("#authenticity_token").val();
    const request_url = "/service_type_est_positions/" + styep_id + "/destroy_from_service_type_config";
    $.post(request_url, { authenticity_token: authenticity_token}, process_service_type_est_position_delete, "json");
  } else {
    $.alerts.okButton = 'Labi';
    jError("Vismaz vienai Tēmes pozīciju grupai nav norādīta neviena Tēmes pozīcija!", "Kļūda");
  }
  return false;
}

不过这个方案只适合保存操作紧跟删除操作的场景，如果用户是先删除再手动点击保存按钮，那方案1或2会更合适。

内容的提问来源于stack exchange，提问作者user6158284