通过命名和回忆重复的片段来简化 jQuery 代码

Question

抱歉，这个问题太笼统了"newbie."我不完全确定我正在尝试做的事情是否可行，但我想我会检查一下。

我有一个脚本可以在 iframe 中查找和操作许多不同的元素，如下所示：

$(window).load(function(){

    $('#iframe').contents().find('target1').doSomething1();
    $('#iframe').contents().find('target2').doSomething2();
    $('#iframe').contents().find('target3').doSomething3();
    $('#iframe').contents().find('target4').doSomething4();
    $('#iframe').contents().find('target5').doSomething5();
    $('#iframe').contents().find('target6').doSomething6();
    $('#iframe').contents().find('target7').doSomething7();
    $('#iframe').contents().find('target8').doSomething8();
    $('#iframe').contents().find('target9').doSomething9();
    ...

});

我想做的是，如果可能的话，通过将 $('#iframe').contents().find() 定义为某种较短的表达式并将其重新调用，使代码更短、更易读。像这样：

$(window).load(function(){

    function iframe(){
        $('#iframe').contents().find()
    }

    iframe('target1').doSomething1();
    iframe('target2').doSomething2();
    iframe('target3').doSomething3();
    iframe('target4').doSomething4();
    iframe('target5').doSomething5();
    iframe('target6').doSomething6();
    iframe('target7').doSomething7();
    iframe('target8').doSomething8();
    iframe('target9').doSomething9();

});

显然，该示例不起作用。我正在尝试做的事情是否可行？

Answer 1

当然 - 您只需要一个函数。您是其中的一部分，但您需要指定和使用参数。

示例：

function iframe(target) {
    return $('#iframe').contents().find(target);
}

$(window).load(function(){
  iframe('target1').doSomething1();
  iframe('target2').doSomething2();
  iframe('target3').doSomething3();
  iframe('target4').doSomething4();
  iframe('target5').doSomething5();
  iframe('target6').doSomething6();
  iframe('target7').doSomething7();
  iframe('target8').doSomething8();
  iframe('target9').doSomething9();

});

请注意，该函数可以（而且可能应该）在 .load 处理程序之外定义。此外，您很可能可以进一步简化它，但如果不知道 doSomething1、doSomething2 等实际上做了什么，就很难说清楚。

Answer 2

这就是函数的用途。你实际上比你意识到的要近得多，你只需要你的函数接受一个参数和 return 结果：

function iframe(selector){
   return $('#iframe').contents().find(selector);
}

Answer 3

保持简单和愚蠢。

因为问问题的人说他是函数新手，所以我建议这个简单易懂的解决方案。那么在JQuery进阶之后，他就会知道如何让自己变得更短更快。否则，他将在不了解它们的情况下使用高级解决方案。再加上如果他习惯于使用他并不完全知道它实际上做了什么的代码。

 $(window).load(function(){
    iFrame('#id1');
    iFreme('#id2');
    ...
    });

function iFrame(x)
{

if(x=='#id1')
{
      $('#iframe').contents().find($(x)).doSomething();

}
else if (x=='#id2')
{
      $('#iframe').contents().find($(x)).doSomethingElse();

}
...

}

Answer 4

我实际上赞成以下观点：

$(window).load(function(){
    var $contents = $('#iframe').contents();
    $contents.find('target1').doSomething1();
    $contents.find('target2').doSomething2();
    $contents.find('target3').doSomething3();
    $contents.find('target4').doSomething4();
    $contents.find('target5').doSomething5();
});

原因是在 contents() 上的查找是比 $('#iframe') 搜索范围更小的搜索。或者你也可以做

$(window).load(function(){
    var $targets = $('#iframe').contents().find('target1, target2, target3, target4, target5');
    $targets.filter('target1').doSomething1();
    $targets.filter('target2').doSomething2();
    $targets.filter('target3').doSomething3();
    $targets.filter('target4').doSomething4();
    $targets.filter('target5').doSomething5();
});

这样做的额外好处是执行一次查找，然后过滤结果数组以查找要操作的对象，而不是对要执行的每个目标的内容 dom 进行查找。

Answer 5

$(window).load(function(){
    var i = 1,
        $contents = $('#iframe').contents();

    for (; i < 10; i++) {
        $contents.find('target' + i)['doSomething' + i]();
    }
});

通过命名和回忆重复的片段来简化 jQuery 代码

Simplify jQuery code by naming and recalling a repeated snippet

javascript

parameters

jquery

function