1 jQuery 获取元素

jQuery 基本设计思想和主要用法，就是”就是选择某个网页元素，然后对其进行某种操作”，设计模式是闭包隐藏细节
jQuery(选择器)用于获取对应的元素，但它不返回这些元素，而是 api 对象
下面是一个简单的 jQuery 示例：

window.jQuery = function (selectorOrArrayOrTemplate) {
  let elements;
  if (typeof selectorOrArrayOrTemplate === "string") {
    // 传进来的是选择器
    elements = document.querySelectorAll(selectorOrArrayOrTemplate);
  } else if (selectorOrArrayOrTemplate instanceof Array) {
    // 传进来的是数组
    elements = selectorOrArrayOrTemplate;
  }
  //elements就是要操作的元素或者节点

  let api = {
    // 下面这些函数可以操作 elements
    find(selector) {
      let array = [];
      for (let i = 0; i < elements.length; i++) {
        const elements2 = Array.from(elements[i].querySelectorAll(selector));
        array.push(...elements2);
      }
      array.oldApi = this; // this 就是 旧 api
      return jQuery(array);
      //目的是返回新的api，新的elements值
    },
    appendTo(selector) {},
    addClass(className) {},
    end(className) {},
  };

  return api;
};
复制代码

2 链式调用

链式调用就是调用完函数，返回结果本身，然后用点语法调用下一个函数
另外还提供 end 方法，可以把结果集返回到 jQuery()调用返回的对象上，具体方法是：
传入一个 new api 对象为{oldapi:selectorOrArrayOrTemplate.oldapi},
在 end 方法里调用 this.oldapi ，这里指向的是selectorOrArrayOrTemplate.oldapi，也就是旧 api

let api = jquery(".text").find(".text1").addClass("red").end().addClass("blue");
let api2 = jquery(".text")
  .each((div) => {
    console.log(div);
  })
  .parent()
  .print();
复制代码

return {oldapi: selectorOrArrayOrTemplate.oldapi,
        find(selector) {
            let array = []
            for (let i = 0; i < elements.length; i++) {
                let elements2 = Array.from(elements[i].querySelectorAll(selector))
                array = array.concat(elements2)
            }

            array.oldapi = this
            return jquery(array)
            //目的是返回新的api，新的elements值
        },
        end() {
            return this.oldapi
            //返回到旧的的api

        }}
复制代码

3 getter, setter设计模式

jQuery的设计思想之三就是使用同一个函数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定，这也是函数的重载。

$("h1").html(); //html()没有参数，表示取出h1的值
$("h1").html("Hello"); //html()有参数Hello，表示对h1进行赋值
复制代码

4 函数重载

函数重载就是一个函数可以传入不同类型的参数或者不同个数的参数，通过 if 语句和 arguments.length 判断

window.jQuery = function(selectorOrArrayOrTemplate){
  let elements
  if(typeof selectorOrArrayOrTemplate === 'string'){
    if(selectorOrArrayOrTemplate.trim().indexOf('<') === 0){
      // 传进来的字符串是HTML标签，例如$('<div><span>哈哈哈哈<span></div>')，
      // 所以我们需要创建对应的HTML标签，然后返回
      elements=[createElement(selectorOrArrayOrTemplate)]
    }else{
      // 查找 div 例如 $('.red')
      elements = document.querySelectorAll(selectorOrArrayOrTemplate)
    }
  }else if(selectorOrArrayOrTemplate instanceof Array){
    // 传进来的是节点数组，那么就赋值给elements, 开始下面的处理
    elements = selectorOrArrayOrTemplate
  }

  function createElement(string){
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }
  
  // api可以操作elements, this就是api, api就是this
  let api = {
    addClass(className){},
    find(selector){},
    each(){}  
  }
  
  return api
复制代码