jquery设计模式为什么要学习jquery？有很多人很疑惑jquery已经过时了，还需不需要学习jquery；我认为你

为什么要学习jquery？

有很多人很疑惑jquery已经过时了，还需不需要学习jquery；我认为你可以学习jquery,也可以不学;

你如果不学习jquery的话，其实你也可以直接学习vue、react，也能够学会，只不过理解起来比较困难，但是终究也能学会；
你也可以学习jquery，因为虽然jquery已经过时，用起来还非常简单，但是它蕴含了很多的编程套路;jquery是前端最长寿的库，全球80%的网站在使用；我们可以通过学习jquery、学习jquery的设计模式来学习编程思想，对自己的编程生涯非常有帮助，因此我推荐学习jquery；
为什么有些人代码水平老是提不高了，就是因为不会造轮子，不会设计优雅的 API，更不会实现优雅的 API，只会调用其他库或框架提供的功能，我相信通过学习jquery可以帮助你；

jquery源码封装原理

启动项目

<body>
开始探索jquery封装思想了！
<script src="./jquery.js"></script>
<script src="./main.js"></script>
</body>

main.js为我们调用的js文件；jquery.js为封装的jquery文件；
jquery.js文件初始化内容如下:window.jQuery是我们提供的全局函数，是个特殊的函数；

window.jQuery = function(){
console.log('开始探索jquery封装思想了！')
}

mian.js文件调用代码如下：由于window可以省络，所以可以以下写法；

jQuery()

封装jquery新增class名字api

jquery.js代码如下

window.jQuery = function(selector){
  const element = document.querySelectorAll(selector);
  return {
    addClass(className){
      element.forEach(item => {
        item.classList.add(className);
        return this;
      })
    }
  }
}

此处jQuery函数返回对象而不是元素，使得juqery的调用可以是链式方式调用，而使用了闭包，可以使得所选择的元素生命一直存在，因为element一直被返回的对象所使用；
main.js调用代码如下

jQuery('.text')
  .addClass('red')
  .addClass('green')

jquery返回的对象就是jquery所构造出来的对象，我们简称jquery对象，这个jquery对象不是我们传统意义上通过构造函数构造出来的对象；

封装find方法

jquery.js代码如下

window.jQuery = function(selector){
  let element;
  if(typeof selector === 'string') {
    element = document.querySelectorAll(selector);
  } else if(selector instanceof Array) {
    element = selector;
  }
  return {
    find(className){
      let newArr = [];
      element.forEach(item => {
        const itemArr = Array.from(item.querySelectorAll(className));
        newArr = newArr.concat(itemArr)
      })
      return jQuery(newArr);
    },
    addClass(className){
      element.forEach(item => {
        item.classList.add(className);
      })
      return this;
    }
  }
}

特别注意find返回的对象不是默认的jquery对象，而是使用返回的数组元素新构建的jquery对象；

jquery如何操作元素及其他用法

jquery如何操作元素及其他用法阮一峰老师写过一篇文章写得非常好，大家可以去学习；

jquery设计模式