我KISS(保持简单，愚蠢)，但这个JavaScript结构可以改进吗

Question

我已经完成了以下操作：

• 将所有事件处理程序放入jQueryDOM中，以确保所有事件将只运行
• 在用于缓存的事件之上定义var选择器

请参阅下面的评论，我认为有问题

$(document).ready(){
    var searchCountry1 = $("#searchCountry1");
    var linkCountry1 = $("#linkCountry1");
    var codeCountry1 = $("[name='codeCountry1']");
    //worst part here is if I have 10 searches,links, and codes. is it worst?
    // and for every event I have this :
    searchCountry1.click(function(){
    //get json or open another search window
    });
    codeCountry1.keypress(function() { 
            codeCountry1.val(""); 
        //or clear all other related fields(city or state) to reset
   });
    $linkCountry1.click(function(){});
            //call redirect
    });
    function redirect(codeval,url){}

我已经发布了少量代码，但请帮我想象一下，如果我有太多的搜索、字段和链接具有相同的功能，但参数不同，会怎么样？

我在考虑OOP或者这个的设计模式。但没有办法，（我想现在）。请鼓励我或就如何改进此代码结构提出其他方法。

<input name="codeCountry1" /><br />
<input type="button" id="searchCountry1" /><br />
<a id="linkCountry1" href="#"><a/><br />
<input name="codeState1" /><br />
<input type="button" id="searchState1" /><br />
<a id="linkState1" href="#"><a/><br />
<input name="codeCity1" /><br />
<input type="button" id="searchCity1" /><br />
<a id="linkCity1" href="#"><a/><br />
<input name="codeOther1" /><br />
<input type="button" id="searchOther1" /><br />
<a id="linkOther1" href="#"><a/><br />
<input name="codeOther2" /><br />
<input type="button" id="searchOther2" /><br />
<a id="linkOther2" href="#"><a/><br />

Answer 1

很明显，您需要在生成这些事件的所有子级上使用相同的处理程序。

浏览器中最有用的功能之一是事件气泡

我更喜欢不将类用于与样式无关的东西。我使用数据属性。

因此，你需要包装你的孩子（如果它还没有包装），并给每个孩子一些数据属性，显示要使用的处理程序：

<div data-role="wrapper">
  <input name="codeCountry1" data-action="clear" data-role="country"/><br />
  <input type="button" id="searchCountry1" data-action="search" data-role="country" /><br />
  <a id="linkCountry1" href="#" data-action="redirect" data-role="country"><a/><br />
  <input name="codeState1" /><br />
  <input type="button" id="searchState1" /><br />
  <a id="linkState1" href="#"><a/><br />
  <input name="codeCity1" /><br />
  <input type="button" id="searchCity1" /><br />
  <a id="linkCity1" href="#"><a/><br />
  <input name="codeOther1" /><br />
  <input type="button" id="searchOther1" /><br />
  <a id="linkOther1" href="#"><a/><br />
  <input name="codeOther2" /><br />
  <input type="button" id="searchOther2" /><br />
  <a id="linkOther2" href="#"><a/><br />
</div>

听包装上的儿童事件：

var $wrapper = $( '[data-role="wrapper"]' );
$wrapper.on('click', '[data-action="search"][data-role="country"]', function(e) {
  console.log(e.target) // child element
  //get json or open another search window
});
$wrapper.on('click', '[data-action="redirect"][data-role="country"]', function(e) {
  console.log(e.target) // child element
  //call redirect
});
$wrapper.on('click', '[data-action="clear"][data-role="country"]', function(e) {
  console.log(e.target) // child element
  // from current element got to the wrapper and find all children inside it with something that you need
  var $other = $(e.target).closest('[data-role="wrapper"]').find('[data-action="clear"]').val("");
  //or clear all other related fields(city or state) to reset
});

这种方法不仅为所有子级提供了三个处理程序，还可以动态添加或删除子级，而无需担心处理程序。您还可以从所有元素中删除id（如果不需要表单序列化）。

作为一个缺点，您必须将逻辑层添加到HTML中，然而在HTML中，点击或其他内容会变得更加明显。。。

Answer 2

如果您想让逻辑结构远离标记，或者不能或不想修改它，您仍然可以使用数组来提高可读性。只需将所有选择器收集到一个数组中，并对该数组进行操作：

jQuery(function($) {
    var triplets = [
        [ "#searchCountry1", "linkCountry1", "[name='codeCountry1']" ],
        [ "#searchCountry2", "linkCountry2", "[name='codeCountry2']" ],
        [ "#searchCountry3", "linkCountry3", "[name='codeCountry3']" ]
    ];
    triplets.forEach(function(triplet) {
        var search = $(triplet[0]);
        var link = $(triplet[1]);
        var code = $(triplet[2]);
        search.on("click", function(e) {
            // get json or open another search window
            // use link and/or code in here
        }
        code.on("click", function(e) {
            code.val("");
            // or clear all other related fields(city or state) to reset
        }
        link.on("click", function(e) {
            // call redirect
        });
    });
    function redirect(codeval, url) {
        // …
    }
});

如果你不介意触摸你的标记头来获得alexey的答案，并获得可维护性和性能。