jQuery样式的函数,可以像对象一样访问

Question

我正在为Web服务创建一个AJAX API,我希望能够调用类似jQuery的访问器.jQuery似乎能够将'jQuery'作为函数执行,但也可以使用它来直接访问作为函数EG结果的对象:

jQuery();
jQuery.each({});

这是我似乎无法实现的诀窍:

myAPI('foo'); //output: 'foo'
myAPI('foo').changeBar(); //output: 'foo' 1
myAPI.changeBar(); //Error: not a function

我已经看到了类似问题的答案,这些答案很有帮助,但并没有真正回答我的问题.

#8734115 - 真的很有趣,但你无法访问由f.prototype设置的方法.

#2953314 - 使用多个操作来创建对象而不是单个函数.

这是我的代码:

(function(window) {

        var h = function(foo) {
                // The h object is actually just the init constructor 'enhanced'
                return new h.fn.init(foo);
        };
        /**
         * Methods defined at protoype.
         */
        h.fn = h.prototype = {
            constructor: h,
            init: function(foo) {
                console.log(foo);
                return this;
            },
            splice : function () {},
            length : 0,
            bar : 0,
            changeBar : function() {
                this.bar++;
                return this.bar;
            }
        };
        h.fn.init.prototype = h.fn;

    //Publish 
    window.myAPI =h;

}( window));

我敢肯定我错过了一些简单的东西:(

Answer 1

jQuery正在做什么jQuery用作函数和伪命名空间.也就是说,您可以调用 jQuery:var divs = jQuery("div"); 并且可以在其上使用属性,例如:jQuery.each(...);.

这是可能的,因为在JavaScript中,函数是第一类对象,因此您可以向它们添加任意属性:

function foo() {
    alert("Foo!");
}
foo.bar = function() {
    alert("Bar!");
};

foo();     // "Foo!"
foo.bar(); // "Bar!"

这就是它的全部内容.

在调用中bar,this将是foo函数(因为this完全取决于函数的调用方式,而不是函数的定义).jQuery不会this用来引用它自己(通常它用于this引用DOM元素,有时用于引用其他东西,比如数组元素;当引用它自己时,因为它是单一的东西,它只是用它jQuery).

现在,您可能希望确保您的函数具有正确的名称(而我bar上面指定的函数是匿名的  - 该属性具有名称,但函数没有).在这种情况下,您可能会进入模块模式:

var foo = (function() {
    function foo() {
        alert("Foo!");
    }

    function foo_bar() {
        alert("Bar!");
    }

    foo.bar = foo_bar;

    return foo;
})();

foo();     // "Foo!"
foo.bar(); // "Bar!"

该模式还具有以下优点:您可以在范围函数(包含其他所有内容的大型匿名函数)中保存私有数据和函数,只有您的代码才能使用.

var foo = (function() {
    function foo() {
        reallyPrivate("Foo!");
    }

    function foo_bar() {
        reallyPrivate("Bar!");
    }

    function reallyPrivate(msg) {
        alert(msg);
    }

    foo.bar = foo_bar;

    return foo;
})();

foo();               // "Foo!"
foo.bar();           // "Bar!"
reallyPrivate("Hi"); // Error, `reallyPrivate` is undefined outside of the scoping function

在您的代码中,您将事物分配给prototype函数的属性.只有在将函数作为构造函数(例如,via new)调用时才会发挥作用.当你这样做时,创建的对象new接收函数的prototype属性作为其底层原型.但这是一个完全不同的东西,与jQuery所做的无关,它既是一个函数又是一个伪命名空间.