Question

我不知道你是否曾经感觉自己已经从愚蠢的树上跳下来并且在下来的路上遇到了每一个分支，但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 */
}

在 usecase 1 中，您必须将函数添加到全局jQuery对象并通过$.loadSection(argument)调用它，其中参数可以是id-selector-string或jQuery-object $("selector")。结果有两种方式：

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

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

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

如果现在调用$("selector").loadSection()，则对于＆＃34;选择器＆＃34;匹配的每个元素执行一次该函数。参数index和obj会自动传递给loadSection。

在用例3 中，该函数用作事件的回调函数。自从为这种情况做好准备以来，事件对象就会自动传递给它。所以就这样做：

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

您可以使用在同一段代码中混合的所有案例。

编辑＆＃34;该函数应该返回什么？＆＃34;

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

在usecase 1中，您可以执行：var result = $.loadSection("selector")，结果将获得返回值。

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

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

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

编辑2 ＆＃34;如何将额外的参数传递给函数？＆＃34;

1）现在，loadSection准备采取额外的args（见上文）。 2）修改$ .fn.loadSection的设置以获取args（参见上文）。 3）args 必须是一个对象或数组，例如{prop：＆＃39; color＆＃39;，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中，不可能传递args，因为你只按名称指向该函数。

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

1 个答案: