Get Started

• 链式风格
• 别名
• 链式风格下的增删改查

链式风格

也叫jQuery风格，window.jQuery()是我们提供的全局函数。

特殊函数jQuery

jQuery（选择器）用于获得对应的元素，但却不返回这些元素。相反，它返回一个对象，称为jQuery构造出来的对象，这个对象可以操作对应元素。
jQuery使构造函数吗？

• 是
  因为jQuery函数确实构造出了一个对象。
• 不是
  因为不需要写new jQuery()就能构造一个对象。
• 结论
  jQuery是一个不需要加new的构造函数。
  jQuery不是常规意义上的构造函数。
  jQuery对象代指jQuery函数构造出来的对象（口头约定），不是说“jQuery这个对象”。

术语

举例

• Object是个函数
  Object对象表示Object构造出来的对象
• Array是个函数
  Array对象/数组对象表示Array构造出来的对象
• Function是个函数
  Function对象/函数对象表示Function构造出来的对象

别名

• window.$ = window.jQuery
  起一个别名，用$代替jQuery
  命名风格
  const div = $('div#test')这样的代码会令人误解为div是一个DOM，实际上div是jQuery构造的api对象
  所以，代码中所有$开头的变量，都是jQuery对象（这是约定，除非特殊说明）
  DOM对象的变量前加上el，意思是element，或者干脆div前面什么都不加。
  注意：jQuery的原型
• api.__proto__ = jQuery.prototype
  把共有属性（函数）全部放到$.prototype
  $.fn = $.prototype然后让 api._proto_ 指向 $fn

链式风格下的增删改查

查

查.png

• 代码

find(selector) {
  let array = [];
  // for (let i = 0; i < this.elements.length; i++) {
  //   // concat将括号里的数组与this相连成为伪数组
  //   array = array.concat(
  //     Array.from(this.elements[i].querySelectorAll(selector))
  //   );
  // }
  this.each((n) => {
    array.push(...n.querySelectorAll(selector));
  });
  array.oldApi = this; // this作为刚传进来的对象保存在oldApi里，return的是处理后的对象
  return jQuery(array);
},
parent() {
  const array = [];
  this.each((node) => {
    if (array.indexOf(node.parentNode) === -1) {
      // array存在父元素就不push
      array.push(node.parentNode);
    }
  });
  return jQuery(array);
},
children() {
  const array = [];
  this.each((node) => {
    array.push(...node.children); // ...展开操作符
  });
  return jQuery(array);
},

增

增.png

• 代码

appendTo(node) {
  if (node instanceof Element) {
    this.each((el) => node.appendChild(el)) // 遍历 elements，对每个 el 进行 node.appendChild 操作
    console.log(node)
  } else if (node.jquery === true) {
    this.each((el) => node.get(0).appendChild(el)) // 遍历 elements，对每个 el 进行 node.get(0).appendChild(el))  操作
  }
},

删

删.png

改

改.png

• 代码（部分）

addClass(className) {
  this.each((n) => n.classList.add(className))
  return this // 等价与return api，这里的this返回的是函数本身
},

• jQuery用到了哪些设计模式
  不用new的构造函数，这个模式没有专门的名字
  $(支持多种参数)，这个模式叫做重载
  用闭包隐藏细节，没有专门的名字
  $div.text()即可读也可写，getter/setter
  $.fn 是$.protitype的别名，这叫别名
  jQuery针对不同浏览器使用不同代码，这叫适配器
• 例：没有innerText就用textContent