链式风格

先看一个元素的操作

  1. window.jQuery = function (selector) {
  2.   const elements = document.querySelectorAll(selector);
  3.   // api 可以操作elements
  4.   const api = {
  5.     // 闭包： 函数访问外部的变量
  6.     addClass(className) {
  7.       for (let i = 0; i < elements.length; i++) {
  8.         elements[i].classList.add(className);
  9.       }
  10.       return this;
  11.     },
  12.   };
  13.   return api
  14. };
  16. const api = jQuery('.test') //不返回元素们，返回 api 对象
  17. api.addClass('red').addClass('blue')// api 调用 addClass 之后，返回值还是api；所以可以连续调用

优化代码

  1. window.jQuery = function (selector) {
  2.   const elements = document.querySelectorAll(selector);
  3.   // api 可以操作elements
  4.   return {
  5.     // 闭包： 函数访问外部的变量
  6.     addClass(className) {
  7.       for (let i = 0; i < elements.length; i++) {
  8.         elements[i].classList.add(className);
  9.       }
  10.       return this;
  11.     },
  12.   };
  13. };
  15. jQuery('.test').addClass('red').addClass('blue')// 优化后