菜单
菜单
文章目录
  1. 模块概况
    1. 工具方法
      1. *表单
    2. 选择器
    3. 队列操作
      1. 过滤/Filtering
      2. 遍历/Traversing
      3. 树遍历/Tree Traversal
    4. 属性/Attributes
    5. CSS
    6. 尺寸/Dimensions
    7. DOM 操作/Manipulation
      1. Inside
      2. Outside
      3. Around
      4. replace
    8. Offset
    9. 事件
      1. 浏览器事件/Browser Events
      2. 文档加载/Document Loading
      3. 事件处理器
      4. *表单事件/Form Events
      5. *键盘事件/Keyboard Events
      6. *鼠标事件/Mouse Events
      7. *触摸事件/Touch Events
      8. *手势事件/Gesture Events
    10. 效果/Effects
      1. 基础
      2. *淡入淡出/Fading
      3. *滑动/Sliding
    11. Ajax
    12. *设备检测/Detect

模块化的 MeeJs 架构畅想(一)—— 分析 jQuery 的内置方法

这篇文章主要是对 jQuery 内置方法的拆分与归类,以便于日后的模块化开发。

重点是各功能以独立模块的形式存在,按需加载,充分利用 ES6 Module 的能力。

除了分析 jQuery 的内置方法之外还归纳了一些开发中常用的一些功能模块,比如设备识别、手势事件等。

模块概况

工具方法

  • .extend()
  • .fn()
  • .noop()
  • .type()

*表单

  • .serialize()
  • .serializeArray()

选择器

  • .selector()

队列操作

过滤/Filtering

  • .eq()
  • .is()
  • .not()
  • .has()
  • .slice()
  • .filter()
  • .first()
  • .last()

遍历/Traversing

  • .each()
  • .map()
  • .contents()
  • .add()
  • .addBack()
  • .end()

树遍历/Tree Traversal

  • .find()
  • .next()
  • .nextAll()
  • .prev()
  • .prevAll()
  • .children()
  • .siblings()
  • .parent()
  • .closest()

属性/Attributes

  • .val()
  • .data()
  • .removeData()
  • .attr()
  • .removeAttr()
  • .prop()
  • .removeProp()
  • .addClass()
  • .removeClass()
  • .toggleClass()

以上所列基本上就是该模块需要实现的独立方法,但部分方法又可以归类为其下的子模块,比如,.attr() 与 .removeAttr() 可以成为一个子模块。

CSS

  • .css()

一个独立的模块,主要用于处理 DOM 样式,不过它与传统的 .css() 不同之处在于,它会尝试给大部分属性添加浏览器前缀,当然这个处理过程可以通过参数关闭。除此之外也会去处理一些浏览器上的一些特殊属性的获取。

尺寸/Dimensions

  • .height()
  • .width()
  • .innerHeight()
  • .innerWidth()
  • .outerHeight()
  • .outerWidth()

用于获取元素的宽高信息

DOM 操作/Manipulation

  • .clone()
  • .remove()
  • .empty()

Inside

  • .html()
  • .text()
  • .append()
  • .appendTo()
  • .prepend()
  • .prependTo()

Outside

  • .before()
  • .after()
  • .insertBefore()
  • .insertAfter()

Around

  • .wrap()
  • .wrapInner()
  • .wrapAll()
  • .unwrap()

replace

  • .replaceWith()
  • .replaceAll()

Offset

  • .offset()
  • .offsetParent()
  • .position()
  • .scrollLeft()
  • .scrollTop()

事件

浏览器事件/Browser Events

  • .scroll()
  • .resize()
  • .error()

文档加载/Document Loading

  • .load()
  • .unload()
  • .ready()

事件处理器

  • .on()
  • .one()
  • .off()
  • .emit()
  • .delegate()
  • .undelegate()

*表单事件/Form Events

  • .focus()
  • .blur()
  • .change()
  • .select()
  • .submit()

*键盘事件/Keyboard Events

  • .keydown()
  • .keyup()
  • .keypress()

*鼠标事件/Mouse Events

  • .click()
  • .dblclick()
  • .mousedown()
  • .mouseup()
  • .mousemove()
  • .mouseout()
  • .mouseover()

*触摸事件/Touch Events

  • .tap()
  • .singleTap()
  • .doubleTap()
  • .longTap()
  • .swipe()
  • .swipeLeft()
  • .swipeRight()
  • .swipeUp()
  • .swipeDown()

*手势事件/Gesture Events

  • .pinch()
  • .rotate()

效果/Effects

  • .animate()
  • .transition()
  • .delay()
  • .pause()
  • .play()
  • .finish()

基础

  • .hide()
  • .show()
  • .toggle()

控制 display 属性

*淡入淡出/Fading

  • .fadeIn()
  • .fadeOut()
  • .fadeTo()
  • .fadeToggle()

改变 opacity 值

*滑动/Sliding

  • .slideUp()
  • .slideDown()
  • .slideToggle()

改变元素高度

Ajax

这一部分其实可以直接对 Fetch API 进行封装。Fetch API 其实挺完善的,但其中部分 API 的实现并不是(风格上)最佳的,因此可以尝试进行封装,比如封装 Headers 的 append -> add, delete -> remove。可以设置 API 的默认参数。

Fetch API
这个API很“迷人”

*设备检测/Detect

  • .os
  • .browser