5

好的！首先，这个问题来自一个在 jQuery 世界中挖掘得太深（并且可能迷路）的人。

在我的研究中，我发现 jquery 的主要模式是这样的（如果需要更正的话）：

(function (window, undefined) {

   jQuery = function (arg) {
      // The jQuery object is actually just the init constructor 'enhanced'
      return new jQuery.fn.init(arg);
   },
   jQuery.fn = jQuery.prototype = {
      constructor: jQuery,
      init: function (selector, context, rootjQuery) {
         // get the selected DOM el.
         // and returns an array
      },
      method: function () {
         doSomeThing();
         return this;
      },
      method2: function () {
         doSomeThing();
         return this;,
         method3: function () {
            doSomeThing();
            return this;
         };

         jQuery.fn.init.prototype = jQuery.fn;

         jQuery.extend = jQuery.fn.extend = function () {

            //defines the extend method 
         };
         // extends the jQuery function and adds some static methods 
         jQuery.extend({
            method: function () {}

         })

      })

何时$发起jQuery.prototype.init发起并返回一个元素数组。但我不明白它是如何添加 jQuery 方法的，比如.cssor.hide等​​。到这个数组。

我得到了静态方法。但是无法使用所有这些方法获得它如何返回和元素数组。

4

2 回答 2

8

我也不喜欢那种模式。他们有一个init函数，它是所有 jQuery 实例的构造函数 -jQuery函数本身只是该对象创建的包装器new：

function jQuery(…) { return new init(…); }

然后，他们将这些实例的方法添加到init.prototype对象中。此对象作为接口公开在jQuery.fn. 此外，他们将prototypejQuery 函数的属性设置为该对象 - 对于那些不使用该fn属性的人。现在你有

jQuery.prototype = jQuery.fn = […]init.prototype

但他们也做了两件[奇怪的]事情：

  • 覆盖constructor原型对象的属性，将其设置为jQuery函数
  • 暴露init函数jQuery.fn- 它自己的原型。这可能允许扩展 $.fn.init 函数，但非常混乱

我认为他们需要/想要做这一切以防万一，但他们的代码是一团糟——从该对象文字开始，然后分配 init 原型的东西。

于 2012-08-27T14:20:13.243 回答
3

如果您将 API 视为方法的外部集合，而将 jQuery 函数视为包装器，则更容易理解。

它基本上是这样构造的：

function a() { return new b();}
a.prototype.method = function() { return this; }
function b() {}
b.prototype = a.prototype;

除了aisjQuery和bis jQuery.prototype.init。

我确信 Resig 有他的理由将 api 构造函数放在 init 原型中，但我看不到它们。除了 Bergi 提到的之外，还有一些奇怪的地方：

1) 模式需要从jQuery.fn.init.prototypeto的参考副本jQuery.prototype，这允许一个奇怪的无限循环：

var $body = new $.fn.init.prototype.init.prototype.init.prototype.init('body');

2) 每个 jQuery 集合实际上都是 的一个实例jQuery.fn.init，但是由于它们引用了相同的原型对象，它欺骗我们“认为”该集合是 的一个实例jQuery。你可以像这样做同样的巫术：

function a(){}
function b(){}
a.prototype = b.prototype;
console.log( new b instanceof a); // true
console.log( new a instanceof b); // true

旁注：我个人使用了以下构造函数模式，结果相似，没有奇怪之处：

var a = function(arg) {
    if (!(this instanceof a)) {
        return new a(arg);
    }
};
a.prototype.method = function(){ return this; };
于 2012-11-05T18:31:00.097 回答