Question

我有一系列javascript函数，由＆＃39; onClick＆＃39;在html中的函数名称。

    Corporate number <input type="text" autofocus id="corp_text">
    <button onclick="getCorpNum(this.form)">SAVE</button><br><br>

    LLC number <input type="text" autofocus id="LLC_text">
    <button onclick="getLLCNum(this.form)">SAVE</button><br><br>

    Type of nonprofit <input type="text" autofocus id="NP_text">
    <button onclick="getNonProfit(this.form)">SAVE</button><br><br>

    Other description <input type="text" autofocus id="OD_text">
    <button onclick="getDesc(this.form)">SAVE</button><br><br>

在javascript中，函数的形式非常相似：

    /**
     * Get corporation number text field data.
     */
     var getCorpNum = function() {
         var Corp_number = [];
         Corp_number=document.getElementById("corp_text").value;
         if (Corp_number.length > 0) createJSONobj("Corp", Corp_number);
     }
    /**
     * Get LLC number text field data.
     */
    var getLLCNum = function() {
       var LLC_number = [];
       LLC_number = document.getElementById("LLC_text").value;
       if (LLC_number.length > 0) createJSONobj("LLC", LLC_number);
    }

    /**
     * Get type of non-profit text field.
     */
    var getNonProfit=function() {
        var NP_number = [];
        NP_number = document.getElementById("NP_text").value;
        if (NP_number.length > 0) createJSONobj("NP", NP_number);
    }

   /**
    * Get other description text
    */
    var getDesc=function() {
        var getDesc=[];
        getDesc = document.getElementById("OD_text").value;
        if (getDesc.length > 0) createJSONobj("Other_desc", getDesc);
    }

问题在于我还有其他类似的功能，它们都具有相同的形式，我希望减少代码量。一种通用的东西，可以捕获代码的形式。这对我来说很难，因为onClicks需要每个函数对象的名称。

Answer 1

你可以传递不同的部分。

Corporate number <input type="text" autofocus id="corp_text">
<button onclick="getThing('corp_text', 'Corp')">SAVE</button><br><br>

然后在更通用的函数中使用这些变量：

var getThing = function(id, name) {
     var values=document.getElementById(id).value;
     if (values.length > 0) createJSONobj(name, values);
}

但是。。。也许比“getThing”描述更具描述性：）

Answer 2

这个怎么样？

首先，让每个按钮调用一个函数并传入它作为字符串参数的表单类型

Corporate number <input type="text" autofocus id="corp_text">
<button onclick="getDetail('corp')">SAVE</button><br><br>

然后，有一个灵活的功能，可以获得您需要的细节：

 var getDetail = function(type) {
  var getElem = document.getElementById(type + '_text').value;
  if ((getElem).length > 0) {
    createJSONobj(type, getElem);
  }
 }

Answer 3

这里是我如何处理这个问题 - 你可以通过将函数调用的不同部分存储在外面来将你的函数重构为一个。请注意，我不知道代码中createJSONobj的作用，因此我创建了一个虚拟实现，以便您可以看到控制台输出。

另一个值得注意的变化是不使用HTML标记中的onxxx属性。看看unobtrusive JavaScript，你会明白为什么。

＆＃13;

function createJSONobj(k, v) {
  console.log('Dummy function ' + k + ', ' + v);
};

var jsonNameMap = {
  'corp_text': {
    k: 'Corp'
  },
  'LLC_text': {
    k: 'LLC'
  },
  'NP_text': {
    k: 'NP'
  },
  'OD_text': {
    k: 'Other_desc'
  }
};

document.getElementById('myForm').addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    var field = e.target.previousSibling.nodeType !== 3 ?
      e.target.previousSibling :
      e.target.previousSibling.previousSibling;

    if (field.value.length > 0) {
      createJSONobj(jsonNameMap[field.id].k, field.value);
    }
  }
});

＆＃13;

<form id="myForm">
  Corporate number
  <input type="text" autofocus id="corp_text">
  <button>SAVE</button>
  <br>
  <br>LLC number
  <input type="text" id="LLC_text">
  <button>SAVE</button>
  <br>
  <br>Type of nonprofit
  <input type="text" id="NP_text">
  <button>SAVE</button>
  <br>
  <br>Other description
  <input type="text" id="OD_text">
  <button>SAVE</button>
  <br>
  <br>
</form>

＆＃13;

另外需要注意的是：考虑只有一个保存按钮。我不确定你的用例是什么，而是每个字段的＆＃34;按钮＆＃34;方法肯定有点忙。

Answer 4

只是添加已经很明显的其他答案...... 您还可以选择使用data-属性来保存您希望传递给调用函数的值，并将其与约定相结合，例如<button>将始终位于<input>之后/之前这样一种方式，当您单击该按钮时，您可以使用JavaScript导航回其先前的兄弟（<input>）并从中提取所需的值。

请参阅示例代码段...打开JavaScript控制台以查看实际输出。该代码段还演示了如何将保存合并到一个“全部保存”按钮。

function createJSONobj(key, value) {
  var o = {};
  o[key] = value;
  var json = JSON.stringify(o);
  console.log(json);
}

function saveValue(el) {
  var input = el.previousElementSibling;  //get the input element next to the button
  saveJson(input);
}

function saveJson(input) {
  var key = input.dataset.jsonKey;        //get that input's data-json-key value
  var value = input.value;                //get the input's value
  
  if (value.length > 0) {
    createJSONobj(key, value);
  } else {
    console.log('Nothing to create.');
  }

}

function saveAll(frm) {
  //console.log(frm);
  
  var inputs = document.querySelectorAll('input', frm);  //get me all the inputs from the form
  //console.log(inputs);
  
  for(var i = 0, il = inputs.length; i < il; i++) {    
    var currentEl = inputs[i];
    saveJson(currentEl);
  }
  
}

<form id="theForm">
    
    Corporate number <input type="text" autofocus id="corp_text" data-json-key="Corp">  
    <button type="button" onclick="saveValue(this)">SAVE</button><br><br>

    LLC number <input type="text" id="LLC_text" data-json-key="LLC">
    <button type="button" onclick="saveValue(this)">SAVE</button><br><br>

    Type of nonprofit <input type="text" id="NP_text" data-json-key="NP">
    <button type="button" onclick="saveValue(this)">SAVE</button><br><br>

    Other description <input type="text" id="OD_text" data-json-key="Other_desc">
    <button type="button" onclick="saveValue(this)">SAVE</button><br><br>
    
    <!--better yet, instead of all those buttons -->
    <hr>
    <button type="button" onclick="saveAll(this.form)">SAVE ALL</button>
      
</form>

至于我自己的偏好，我宁愿使用像knock这样的绑定库或像angular这样的框架来做这种事情。它们可以更好地分离UI内容与应用程序逻辑之间的关注。

减少一系列javascript函数表达式中的代码冗余

4 个答案: