0
点赞
收藏
分享

微信扫一扫

手写jQuery的增删改查

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

链式风格下的增删改查

  • 代码
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);
},

  • 代码
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))  操作
  }
},

  • 代码(部分)
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
举报

相关推荐

0 条评论