Question

我做了以下事情：

将所有事件处理程序放在jQuery DOM中，以确保所有事件只会运行
在事件顶部定义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){}

我发布了少量代码，但请帮我想象如果我有太多的搜索，字段和链接具有相同的功能但是diff参数？

我在考虑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

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

浏览器中最有用的功能之一是Event Bubbling

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

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

<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的答案并获得可维护性和性能。

我吻（保持简单，愚蠢），但这个JavaScript结构可以改进吗？

2 个答案: