0

例如，这里是 jQuery1.8 的截图。 在此处输入图像描述

为什么我可以从 jQuery 源代码的角度做这样的事情？是addClassjquery的方法吗？但我看到的是来自jQuery.fn.extend。

$("xid").addClass("xxx");

我对 JavaScript 比较陌生，写了一些非常简单的代码，比如直接在.html中添加一个方法。

 <html>
    <script>
        function m() {
            alert("simple");
        }
    </script>
 </html>

尤其是ExtJs、jQuery等JavaScript框架中的复杂语法，我无法理解，虽然我已经搜索了一些相关文档，但我仍然没有一个清晰的理解。也许我需要花时间认真阅读一本专门的 JavaScript 书籍，但此刻我想知道答案。

谢谢。

4

2 回答 2

2

这个问题有几个层次。第一个是对象字面量。Javascript 允许您使用对象字面量语法来声明对象（您可能听说过 JSON，它只是在字符串中存储/​​传输的语法）。语法如下：

var obj = { key1 : "value1", key2 : "value2" };

一种更具结构化/可读性的编写方式是：

var obj = {
  key1 : "value1",
  key2 : "value2"
};

上面的代码和做的完全一样：

var obj = new Object();
obj.key1 = "value1";
obj.key2 = "value2";

所以你在这条线上看到的是：

addClass : function () {

只是对象字面量声明的一部分。基本上代码是这样做的：

var tmp = new Object();
// ...
tmp.addClass = function () { /* ... */ };
// ...
jQuery.fn.extend(tmp).

除了它直接在调用中声明对象字面量，extend()因此没有必要使用临时变量。

第二件事是javascript中的函数并不特殊。我的意思是，函数的处理方式与其他所有内容相同：字符串、数字、数组和对象。事实上，在javascript中，字符串、数字、数组和函数都是对象。因此，您可以将函数分配给变量：

var n = function () {alert("Hello World");}

所以根本没有什么神奇的事情发生。它只是在对象文字语法中创建一个匿名对象，其中包含作为参数传递给extend方法的函数集合。

这就是语法的解释。也就是说，javascript 本身发生了什么。

我们知道我们正在查看 jQuery 代码。因此，这为我们提供了更多关于正在发生的事情的线索。首先要做的事情：jQuery.fn只是一个指向jQuery.prototype. 而jQuery它本身就是一个构造函数。在 javascript 中，构造函数是可用于创建对象的常规函数​​。当您使用构造函数创建对象时，该对象继承自构造函数的原型。

并且 jQuery 修改了它的原型并添加了一个extend方法，允许您将其他方法和属性添加到 jQuery 的原型中。它正在做什么。前面提到的对象字面量中包含的所有函数都将由extend要添加到 jQuery 本身的方法处理，以便在创建新的 jQuery 对象时它们将继承它们。

根据您的评论，您似乎需要学习很多关于 javascript 的内容。我可以建议阅读 Rhino 的书：“JavaScript: The Definitive Guide”。一旦您了解更多并且对 javascript 更加熟悉，我还建议您阅读“Javascript: The Good Parts”。

我会尽力在这里回答您的评论。解释一切需要一整本书。

首先，关于线路：

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

如前所述，jQuery.fn它只是一个指向jQuery.prototype. 所以它所做的基本上是这样的：

jQuery.prototype.extend = function () { /* ... */ };
jQuery.extend = jQuery.prototype.extend;

两者有什么区别？您需要记住的第一件事是它jQuery是一个构造函数。由构造函数创建的对象继承了它的原型（javascript 没有类，但将“原型”一词转换为“类”，您开始了解对象的工作原理）。因此，extend 的第一个声明将其定义为所有jQuery对象实例的方法：

// note: The following is not the recommended way to write jQuery code
//       but it does illustrate the point about inheritance:

var foo = new jQuery();
foo.extend(); // this works because foo inherits jQuery's extend method

现在，还记得我说过在 javascript 中函数也是对象吗？第二个声明将jQuery函数视为对象并直接向其添加函数。这主要是语法糖。这样你就可以写：

jQuery.extend();

而不是更长的：

jQuery.prototype.extend();

或令人费解的东西，例如：

new jQuery().extend.call(jQuery);

取决于extend是如何写的。

所以，jQuery.extend()只是jQuery构造函数本身的一个方法。它不会被 jQuery 构造函数创建的对象继承。将其视为类方法。

于 2012-10-31T07:24:41.833 回答
0

是的，addClass 是 jQuery 方法。代码截图是扩展jquery的方法，所以可以这样调用：$().method。$ 等于 jQuery。看一下jquery源码，如果你对js很了解的话，里面没有什么复杂的。

于 2012-10-31T07:03:09.430 回答