javascript - jQuery 如何拥有 $ 对象构造函数和与 $ 关联的方法？

Question

jQuery 如何执行 $("#foo").addClass("bar") 和 $.ajax()？

我正在创建一个微型 javascript 框架并想创建一个对象的新实例，例如 $("#hello")。这个对象有关联的方法，例如addClass、css等，就像jQuery一样。所以我可以做类似的事情

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

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

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

Answer 1

$ = function(arg) { console.log("$ function called with " + arg); }
$.ajax = function(arg) {console.log("$.ajax called with " + arg);}
$('foo');
$.ajax('bar');

http://jsfiddle.net/ac7nx/

我不认为这里有任何魔法。 $ 只是全局函数的名称。请记住，在 javascript 中，函数是一流的对象，可以拥有自己的属性，包括子函数，这就是 $.ajax。

既然你提到了构造函数，我应该注意到这里没有使用 OO 对象，只有常规函数(没有 new 关键字)，所以构造函数不参与其中。如果您使用的是 new 关键字，那您可能会感到困惑。如果您希望 $('#foo') 返回一个新对象，那么在 $ 函数的代码中您应该使用 new 创建一个新对象> 并返回它，这是 jQuery 所做的，但是 $ 函数本身不是构造函数，不应使用 new 调用。或者在类似 $('#someID') 的情况下，在该函数内，jQuery 从 DOM 获取一个元素对象，然后返回该对象，但仍然是 $只是一个常规函数，其返回值是一个对象，而不是构造函数。