jQuery如何使用$ object构造函数和与$相关的方法？ [英] How does jQuery have the $ object constructor and the methods associated with the $?

问题描述

jQuery如何做 $（＃foo）。addClass（bar）和 $ .ajax（）？

How is it that jQuery can do $("#foo").addClass("bar") and $.ajax()?

我正在创建一个微型javascript框架，并希望创建一个对象的新实例，例如 $ （ #hello）。对于这个对象，有一些相关的方法，比如 addClass ， css 等，就像使用jQuery一样。所以我可以做类似

I'm creating a micro javascript framework and want to create a new instance of an object, such as $("#hello"). With this object there are associated methods, such as addClass, css, etc, just like with jQuery. So I could do something like

$("#foo").addClass("remove").css("color", "red");

我成功创建了这个。但是，当我想从这个对象调用一个方法，比如 $ .ajax 时，构造函数被覆盖，我可以调用$ .ajax，但不能调用$（ #foo）。

I have been successful in creating this. However, when I want to call a method from this object, such as $.ajax, the constructor function is overwritten, and I can call $.ajax, but not $("#foo").

基本上，jQuery如何做到这两点？

Basically, how can jQuery do both?

推荐答案

好的， $ 函数不仅是一个函数，而且是一个对象，就像所有函数一样。所以它可以有方法。这就是 ajax 的全部，是 $ 函数的一种方法。所以我们可以这样做：

OK, the $ function is not only a function but an object, like all functions. So it can have methods. That's all that ajax is, a method of the $ function. So we can start off by doing this:

$ = function(obj) {
  // some code 
};
$.ajax = function (arg1, arg2) {
  // some ajax-y code
};

到目前为止一切顺利。现在，我们在 $ 函数中放入了什么？好吧，它必须返回一个对象，该对象必须在其上定义一些很好的方法。所以我们需要一个构造函数（给我们新的对象）和一个原型（为这些对象提供漂亮的方法）。

So far so good. Now, what on earth do we put in the $ function? Well it has to return an object and that object has to have some nice methods defined on it. So we'll need a constructor function (to give us new objects) and a prototype (to provide the nifty methods for those objects).

$ = function(obj) {
  var myConstructor = function (obj) {
    this.wrappedObj = obj;
  };

  myConstructor.prototype = {
    niftyMethod: function () {
      // do something with this.wrappedObj
      return this; // so we can chain method calls
    },
    anotherNiftyMethod: function (options) {
      // do something with this.wrappedObj and options
      return this; 
    }
  };

  return new myConstructor(obj);
};

所以我们拥有它。我们可以这样做：

So there we have it. We can do this:

var mySnazzObject = $("whatever");
mySnazzObject.niftyMethod().anotherNiftyMethod(true);        

我们可以这样做：

$.ajax("overthere.html", data);

显然jQuery确实比这更重要了，它以一些非常令人印象深刻的方式做到了，但这是一般的想法。

Obviously jQuery does a heck of a lot more than that, and it does it in some really impressive ways, but that's the general idea.

更新：AS @Raynos很友好地观察而没有提供建设性的答案，我的原始代码会创建原型无限。因此，我们使用匿名自动执行函数分别声明构造函数和原型：

UPDATE: AS @Raynos was kind enough to observe without supplying a constructive answer, my original code would create the prototype ad infinitum. So we make use of an anonymous autoexecuting function to declare the constructor and prototype separately:

(function () {
  var myConstructor = function (obj) {
    this.wrappedObj = obj;
  };

  myConstructor.prototype = {
    niftyMethod: function () {
      // do something with this.wrappedObj
      return this; // so we can chain method calls
    },
    anotherNiftyMethod: function (options) {
      // do something with this.wrappedObj and options
      return this; 
    }
  };

  var $ = function(obj) {
    return new myConstructor(obj);        
  };

  $.ajax = function (arg1, arg2) {
    // some ajax-y code
  };

  window.$ = $;  
}());

这篇关于jQuery如何使用$ object构造函数和与$相关的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！