javascript - 理解在两个上下文中传递的对象

Question

我不知道你是否有过这样的感觉，就像你从愚蠢的树上跳下来，撞到了下落过程中的每一个 Twig ，但 JavaScript 对我这个经验丰富的 PHP 程序员有这种影响，但就是不明白有时使用 JS。

所以我使用 jQuery.extend({ .. }) 编写了这个函数，如下所示:

loadSection: function(obj){
    if(typeof obj=='undefined')obj=event.target; //but this doesn't work
    if(typeof obj=='string')obj=document.getElementById(obj);
    var params=null;
    var instr={};
    var k=0;
    while(true){
    ..etc..

我希望能够以两种方式调用它:

$.loadSection($('#employee-data-173'));
//or $loadSection('employee-data-173') for convenience

或者:

$('#employee-data-173').loadSection();

显然(无论如何对你来说!)我没有理解第二种情况下传递的内容的概念。这还不算这样的情况:

$('.someElement').click(loadSection);

Answer 1

您想在三个完全不同的用例中使用相同的函数。在每种情况下，不同的参数都会自动传递给函数。因此，首先声明并准备它来处理所有可能类型的参数:

function loadSection(index, obj, args) {
    var element, params = null;
    if (obj && obj.nodeType) { // for usecase 2
        element = obj; if (typeof args == 'object') params = args;
    } else {
        if (typeof obj == 'object') params = obj;
        if (typeof index == 'string') { // usecase 1 with selector-string
            element = document.getElementById(index);
        else if (index.jquery) { // usecase 1 with jQuery object
            if (index.length == 1) element = index[0]; // if only one element inside jQuery
            // if more than one element there call this function recursively on each
            else index.each(loadSection);
        }
        else if (index.target) element = index.target; // for usecase 3
     }

    /* your stuff */
}

在你的用例1中，你必须将函数添加到全局jQuery对象并通过$.loadSection(argument)调用它，其中参数可能是一个id-选择器字符串或 jQuery 对象 $("selector")。有两种方法具有相同的结果:

$.loadSection = loadSection;
$.extend({loadSection: loadSection});

在用例2中，您希望将函数作为 jQuery 对象的方法来调用。因此你必须将它添加到 jQuery.prototype 中，如下所示:

$.fn.loadSection = function( args ) { // $.fn is synonym for jQuery.prototype
    return this.each(loadSection, args);
};

如果您现在调用$("selector").loadSection()，则该函数将为每个与“selector”匹配的元素执行一次。参数 index 和 obj 会自动传递给 loadSection。

在用例 3 中，该函数用作事件的回调函数。由于它是为这种情况准备的，因此事件对象会自动传递给它。所以就这样做:

$('.someElement').click(loadSection);

您可以在同一段代码中混合使用所有情况。

编辑“函数应该/可以返回什么？”

它可能会返回你想要的任何内容。仅行为取决于用例。

在usecase 1中，您可以执行以下操作:var result = $.loadSection("selector")，结果会获取返回值。

在 usecase 2 中，对 jQuery 对象中的所有元素进行迭代。除非您明确返回 false，否则 loadSection 的返回值将被忽略。然后迭代停止。因此，如果您执行 if (index == 2) return false; ，即使 jQuery 对象中有 7 个元素，该函数最多也会执行 3 次。该函数作为一个整体总是返回 jQuery 对象，因此您可以进行链接:

$("selector").loadSection().css({color: 'blue'}).animate(...). ...

在 usecase 3 中，该函数仅被执行，但返回值在任何地方都不会被识别，因此您无法捕获它。

编辑2“如何将附加参数传递给函数？”

1) 现在 loadSection 已准备好接受额外的参数(见上文)。 2) $.fn.loadSection 的设置被修改为采用 args(见上文)。 3) args 必须是一个对象或数组，例如 {prop: 'color', id: 23} (否则将被忽略)，但可以省略。

在usecase 1中传递args作为第二个参数

var result = $.loadSection("selector", args); // you find args inside in ""var params"

在usecase 2中，args是唯一可能的参数。 jQuery 现在在迭代中进行迭代:对于 args 中的每个项目，该函数在每个元素上调用一次!inner 迭代可通过 return false 停止，但不再对所有元素进行迭代。

$("selector").loadSection({prop: 'color', id: 23}) // if $() contains 3 elems, function run six times

在 usecase 3 中，不可能传递参数，因为您只能通过名称指向函数。