Question

jQuery是怎样工作的

Answer 1

它使用CSS选择器样式语法获取文档对象模型(DOM)中的元素到已包装的对象集合中，然后使用jQuery方法操纵这些元素来达到不同的效果。尽管jQuery的使用是非常方便和直观的，我们还是需要弄懂它背后的机制来更好的掌握它。 jQuery中的基本概念 在我们深入研究jQuery库前，需要了解一些jQuery中的一些基本概念。 $/jQuery对象和$()/jQuery()方法 $/jQuery对象是一个全局对象，通过它来访问所有的jQuery方法。 它也是一个方法对象，所以使用它最通常的方法是通过$/jQuery()方法。$/jQuery()方法可以用来选择DOM中的一组元素。它也是一个包装函数，一个$/jQuery()方法的简单例子： $(“#ABC”); or jQuery(“#ABC”); 传给$/jQuery()方法的参数是选择器( selector)。选择器是一个有CSS选择器样式语法的表达式。在上面的例子中，我要选择id等于 #ABC 的元素 包装集合(Wrapped set) 包装集合是一个类似数组的结构，里面包含了所有已选择的DOM元素。上面的$("#ABC")返回了一个包装集合。你可以像遍历数组那样访问包装集合或者通过索引访问。更重要的是，你可以在所有被选择的元素上应用jQuery方法。 jQuery $()/jQuery()方法在后台是怎么工作的 因为大多数jQuery方法调用都是以$()/jQuery()开头的，所以我们有必要弄懂在这后面发生了什么。在深入讨论前，我们先看看$()/jQuery()对象是在哪定义的。$/jQuery对象是jQuery方法的访问点，是在jQuery中定义的一个全局方法变量。这是在jQuery源码中定义它的那一行： // Expose jQuery to the global object window.jQuery = window.$ = jQuery; window对象代表浏览器中打开的窗口，把$/jQuery放到window下，它就得定义为一个全局对象并且可以在当前打开的窗口中访问 但是，上面一行源码最的"jQuery"是什么？它被声明在jQuery库开始的地方。 var jQuery = (function() { … 这所有的魔法都发生在jQuery对象的声明表达式中，如果你直接往里面看，可能会迷茫，所以让我来简化它吧。 简化版jQuery库源代码警告：简化版本仅仅为了研究目的，它不并具有jQuery提供的所有功能，不要把它用在真实环境中。 var jQuery = (function () { // Define a local copy of “k” var k = function (selector, context) { // The k object is actually just the init constructor 'enhanced' var kobj = new k.fn.init(selector, context); return kobj; }; //Define k’s fn prototype, specially contains init method k.fn = k.prototype = { init: function (selector, context) { if (!selector) { return this; } } }; // Give the init function the “k” prototype for later instantiation k.fn.init.prototype = k.fn; // Return “k” to the global object return k; })(); 从上面的额源码你可以看到jQuery函数变量被定义为一个匿名方法的执行结果。 小贴士：怎样定义匿名函数 在Javascript中你可以定义一个匿名函数并马上调用它 例如， (function () { alert(“hello world”); })(); 通过把函数表达式 function() { alert(“hello word”); } 放进括号中 (function() { alert(“hello world”); }) 你可以在外面再加个括号马上调用它 在这个匿名函数内部定义了一个函数，它有这样的形式： function (selector, context) 第一个参数是selector，第二个参数是context。在原始的jQuery源码中，函数k实际上被命名为jQuery，这会和外面大多数jQuery函数变量混淆。 在函数k内一个匿名函数类定义为k的prototype，Prototype是JavaScript函数类的一个特殊的，被用来指向另一个函数对象。所以，所有那个函数类的实例都可以访问在prototype函数类中定义的函数。在这里，init函数可以被函数类k的所有实例访问。init方法有如下的形式： function (selector, context) k的prototype里已经初始化成员方法，与此同时，init函数的prototype又被赋值为k的prototype。这是一个循环引用，正常编程实践中应该避免。但是，jQuery就是采用这种方式使init函数的返回值可以访问k中定义的方法。 小贴士：在JavaScript中函数是实体类 Javascript是函数式编程语言，但是函数并不是传统中那样纯粹的函数。函数可以动态定义，可以拥有属性和方法，并且可以作为参数传递给另一个函数。