JavaScript如何像jQuery一样将变量作为对象和函数调用

Question

我正在尝试创建一个移动库，希望能够像jquery一样以函数和对象的形式调用该对象。

例如：

var test = function(elm) {

    this.ajax = function(opt) { ... }
    if ( elm ) {
       var elms = document.querySelectorAll(elm);
    }
}

我希望能够像这样调用它：

test("#id");

并且像这样：

test.ajax(opts);

LE： 感谢大家快速的回复！

（LE是指“楼主”，即原帖作者）

- cigraphics

---

使用jQuery-Mobile代替。 - Yang

你的使用情况描述不够详细。你是想让 test 函数像 jQuery/$ 对象一样，这样 test('#id') 返回一个对象实例，并且该实例有一个可用的函数“方法” .ajax() 吗？ - ErikE

jQuery在DOM加载后创建一个新对象（$）并将方法附加到它上面。然后通过返回this来使用方法链接。我建议你去看一下这个。 - Sethen

虽然这对我来说不是很困难的问题，但是因为你提出了一个关于纯JavaScript并试图学习事物如何工作而不是使用现有解决方案而不知道“底层”的问题，所以我给你加1分。继续保持 ;) - duri

Answer 1

在JavaScript中，函数实际上只是带有代码的对象。

因此，与其使用普通对象：

var test = {};
test.ajax = function() { /* ajax */ };

...使用一个函数：

var test = function() { /* test */ };
test.ajax = function() { /* ajax */ };

在这两种情况下，您都可以访问test.ajax。使用函数的额外好处是可以调用test。

- pimvdb

---

这似乎并没有真正回答问题。 - ErikE

@ErikE 我认为这正是OP所寻找的答案。 - duri

@ErikE：不，根据OP的情况，ajax并没有被添加到test本身。 ajax应该是一个“静态”函数，与实例无关。 OP不想要new test().ajax之类的东西，而是test.ajax——因此它是函数在函数上而不是在实例上。 - pimvdb

我明白你的意思。我肯定是在考虑“new”的问题。对于造成的困惑，我很抱歉。 - ErikE

@ErikE：没问题，很高兴你理解 :) - pimvdb

Answer 2

或者可能是这样：

Object.prototype.Test = function( method ) {
    var method = method || null;
    var elms   = null;

    /* Methods */
    this.ajax = function(opt){
        console.log('You called ajax method with options:');
        console.log(opt);
    }
    /* Logic */
    if (method in this) this[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    else {
        try {
            elms = document.querySelectorAll(method);
        }
        catch(e) {
            console.log(e.message);
        }
    }

}
window.onload = function() {
    Test('ajax', {'url':'testurl.com'});
    Test('#aid');  
}

- Aivar

---

我不建议设置 Object.prototype.Test 来创建全局的 Test 变量。只需使用 var Test = ... 即可。 - pimvdb

在许多情况下，最好使用var Test = new function（method）...这种方式。 这样他甚至可以像Test.ajax（选项）一样使用调用； 但这只是一条路线的方向 :-) - Aivar