根据统计,全世界大约有 80~90%的网站直接或间接地使用了 jQuery,鉴于它如此流行,所以每一位前端工程师都应该了解和学习它。那如何才能快速理解 jQuery 呢?读源代码又太繁琐,所以这里利用原生 JS 来实现 jQuery 中的 addClass 这个 API,通过实现此过程来体会 jQuery 的设计思想,力求简单易懂。

封装函数

function addClass(classes) {} //可将所有输入的标签的class添加一个类

实现这个函数

函数addClass()是输入一个类名,给选中的所有标签添加一个类,所以要用到classList.add(),具体实现如下:

function addClass(node, classes) {
  var allTag = document.querySelectorAll(node);
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes);
  }
}

命名空间

在全局变量中创建一个对象,用来储存封装后的函数,这就是命名空间(名字前面统一加一个前缀)

window.jQuery = {};
jQuery.addClass = addClass;

jQuery.addClass("div", "red");

整理之后

window.jQuery = {};
jQuery.addClass = function (node, classes) {
  var allTag = document.querySelectorAll(node);
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes);
  }
};

jQuery.addClass("div", "red");

将 node 放到前面

node.addClass(classes);

方法一:扩展 Node 接口,直接在 Node.prototype 上加函数

Node.prototype.addClass = function(){
   ...
}

方法二:新的接口 BetterNode

window.jQuery = function (node) {
  return {
    element: node,
    addClass: function (classes) {
      var allTag = document.querySelectorAll(node);
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].classList.add(classes);
      }
    },
  };
};

let node2 = jQuery("div");
node2.addClass("red");

第二种叫做「无侵入」。

进一步完善

给个缩写并且使其可以是节点或者选择器

window.jQuery = function (nodeOrSelector) {
  let nodes = {};
  if (typeof nodeOrSelector === "string") {
    let temp = document.querySelectorAll(nodeOrSelector);
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i];
    }
    nodes.length = temp.length;
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1,
    };
  }
  nodes.addClass = function (classes) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes);
    }
  };
  return nodes;
};
window.$ = jQuery;

var $div = $("div");
$div.addClass("red"); // 可将所有 div 的 class 添加一个 red

封装 ajax

按照 jQuery 的设计思路封装一个 ajax 函数

window.jQuery.ajax = function (url, method, body, success, fail) {
  let request = XMLHttpResquest();
  request.open(method, url);
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        success.call(undefined, request.responseText);
      } else if (request.status >= 400) {
        fail.call(undefined, request);
      }
    }
  };
  request.send(body);
};

升级改进一下满足 promise 规则

window.jQuery.ajax = function ({ url, method, body, headers }) {
  return new Promise(function (resolve, reject) {
    let request = XMLHttpResquest();
    request.open(method, url);
    for (let key in headers) {
      let value = headers[key];
      request.setRequestHeader(key, value);
    }
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 300) {
          success.call(undefined, request.responseText);
        } else if (request.status >= 400) {
          fail.call(undefined, request);
        }
      }
    };
    request.send(body);
  });
};

如果觉得文章对你有些许帮助,欢迎在我的 GitHub 博客点赞和关注,感激不尽!


JavaScript      JavaScript jQuery

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!