jQuery | 穿越

简介

熟悉前端开发的程序员一定听说过 jQuery，它是一个 JavaScript 库，简化了 DOM 操作、事件处理、动画效果等等操作。但是，你是否想过 jQuery 是如何实现这些操作的呢？本次介绍将带你穿越 jQuery，探索其中的秘密！

前置知识

• JavaScript 基础语法
• DOM 操作基础
• 事件处理基础

核心功能

jQuery 的核心功能可以分为以下几个方面：

• DOM 操作：通过选择器选取元素，执行增、删、改、查等操作。
• 事件处理：绑定、解绑事件监听器。
• Ajax：通过 $.ajax 发送请求，处理响应数据。
• 动画效果：执行动画操作，如淡入淡出、滑动等。

模块设计

jQuery 的模块设计采用了模块化的思想，将每个功能作为一个独立的模块进行设计，同时提供了一个核心模块 jQuery，统一管理所有模块的加载和执行。下面是 jQuery 的主要模块及其作用：

• Sizzle：选择器模块，用于解析选择器表达式，返回对应的 DOM 元素。
• Callbacks：回调函数模块，用于统一管理回调函数的执行。
• Deferred：延迟对象模块，用于处理异步操作，返回 Promise 对象。
• support：浏览器支持模块，用于判断浏览器是否支持某个特性。
• data：数据缓存模块，用于缓存 DOM 元素的数据和事件监听器。
• manipulcation：DOM 操作模块，用于执行增、删、改、查等操作。
• css：样式操作模块，用于获取和设置元素的样式属性。
• event：事件处理模块，用于绑定、解绑事件监听器。
• ajax：Ajax 模块，用于发送 Ajax 请求，处理响应数据。
• animation：动画效果模块，用于执行动画操作。

核心实现

jQuery 的核心实现可以分为以下几个方面：

选择器模块

选择器模块是 jQuery 最为重要的模块之一，它能够解析选择器表达式，并返回对应的 DOM 元素。下面是一个简化版的选择器模块实现：

(function(window) {
  var document = window.document;

  function Sizzle(selector, context, results) {
    results = results || [];

    if (typeof selector !== "string") {
      return results;
    }

    context = context || document;

    var elems = context.querySelectorAll(selector);

    for (var i = 0, len = elems.length; i < len; i++) {
      results.push(elems[i]);
    }

    return results;
  }

  window.Sizzle = Sizzle;
})(window);

DOM 操作模块

DOM 操作模块是 jQuery 另一个重要的模块，它能够执行增、删、改、查等操作。下面是一个简化版的 DOM 操作模块实现：

(function(window) {
  var document = window.document;

  function manipulateDOM(element, action, content) {
    if (action === "append") {
      element.appendChild(content);
    } else if (action === "prepend") {
      element.insertBefore(content, element.firstChild);
    } else if (action === "replace") {
      element.parentNode.replaceChild(content, element);
    } else if (action === "remove") {
      element.parentNode.removeChild(element);
    }
  }

  function DOM(element) {
    this.element = element;
  }

  DOM.prototype = {
    html: function(value) {
      if (value === undefined) {
        return this.element.innerHTML;
      }

      this.element.innerHTML = value;

      return this;
    },
    text: function(value) {
      if (value === undefined) {
        return this.element.textContent;
      }

      this.element.textContent = value;

      return this;
    },
    append: function(content) {
      manipulateDOM(this.element, "append", content);

      return this;
    },
    prepend: function(content) {
      manipulateDOM(this.element, "prepend", content);

      return this;
    },
    replaceWith: function(content) {
      manipulateDOM(this.element, "replace", content);

      return this;
    },
    remove: function() {
      manipulateDOM(this.element, "remove");

      return this;
    },
  };

  function jQuery(selector) {
    var elems = Sizzle(selector);

    for (var i = 0, len = elems.length; i < len; i++) {
      this[i] = new DOM(elems[i]);
    }

    this.length = len;
  }

  window.jQuery = jQuery;
})(window);

事件处理模块

事件处理模块用于绑定、解绑事件。下面是一个简化版的事件处理模块实现：

(function(window) {
  var document = window.document;

  function triggerEvent(element, event) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true);
    element.dispatchEvent(evt);
  }

  function addEventListener(element, event, callback) {
    element.addEventListener(event, callback, false);
  }

  function removeEventListener(element, event, callback) {
    element.removeEventListener(event, callback, false);
  }

  function DOMEvent(element) {
    this.element = element;
  }

  DOMEvent.prototype = {
    on: function(event, callback) {
      addEventListener(this.element, event, callback);

      return this;
    },
    off: function(event, callback) {
      removeEventListener(this.element, event, callback);

      return this;
    },
    trigger: function(event) {
      triggerEvent(this.element, event);

      return this;
    },
  };

  jQuery.fn.extend({
    on: function(event, callback) {
      return this.each(function() {
        new DOMEvent(this).on(event, callback);
      });
    },
    off: function(event, callback) {
      return this.each(function() {
        new DOMEvent(this).off(event, callback);
      });
    },
    trigger: function(event) {
      return this.each(function() {
        new DOMEvent(this).trigger(event);
      });
    },
  });
})(window);

Ajax 模块

Ajax 模块用于发送 Ajax 请求、处理响应数据。下面是一个简化版的 Ajax 模块实现：

(function(window) {
  function ajax(options) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
          options.success(xhr.responseText);
        } else {
          options.error(xhr.status);
        }
      }
    }

    xhr.open(options.method, options.url, true);

    xhr.send(options.data);
  }

  jQuery.ajax = function(options) {
    options = options || {};

    var method = options.method || "GET",
        url = options.url || "",
        data = options.data || "",
        success = options.success || function() {},
        error = options.error || function() {};

    ajax({
      method: method,
      url: url,
      data: data,
      success: success,
      error: error,
    });
  };
})(window);

结语

通过这次介绍，相信你已经了解了 jQuery 的核心功能、模块设计和核心实现。同时也可以看到，jQuery 的源代码并不是那么神秘，通过深入剖析可以更好地理解其原理，进而提升自己的前端技能。