【前言】最近在给公司新招的新人培训，突然意识到自己很多问题也还是一知半解，日常写业务问题不大，但是给别人讲明白的时候总是讲不清楚。so,决定好好的总结一下，整理自己的知识架构。公司日常业务侧重于解决浏览器兼容问题，所以还有很多借鉴于jQuery写法的代码，所以去看了一下jQuery的源码
JQuery的封装策略
在阅读源码之前，我一直以为jQuery构造函数是这个框架的核心方法。读了源码之后，才恍然大悟。原来jQuery这个方法类似于"工厂函数"，通过调用这个方法生成真正的jQuery实例对象，那么，它究竟是如何实现的呢？且待我们细细品读：
这是自己制作的jQuery的初始化和原型指向的简易流程图：
-
jQuery是通过暴露到全局window对象上给用户使用的
window.jQuery = window.$ = jQuery;
将jQuery挂载到window对象上。
-
jQuery本身类似于一个“工厂函数”，通过"()"的时候，就是在通过
jQuery.fn.init方法创建Jquery实例。
-
jQuery中很多方法是添加到该函数的原型对象中的，为了简化代码的开发，这里使用了原型替换，改变了原型指向到一个对象上 **jQuery.fn ,**源码中所有添加到原型上的方法其实都是添加到jQuery.fn这个对象上的。
关于jQuery的API使用我这里就不赘述了，网上有很多优秀的文章，我这里贴一个自己学习的链接，仅供大家参考juejin.cn/post/684490…
JQuery的两大特点
1、JQuery的链式调用
链式调用时JQuery的一大特色，可以大大简化实际开发中对DOM的操作，让代码编写可以更加优雅
jQuery中实现链式编程的核心，就是每一个方法中都返回了该对象本身
这里贴了一段**addClass（）**方法中源码的实现方式：
addClass: function( value ) { var classes, elem, cur, curValue, clazz, j, finalValue, i = 0; if ( typeof value === "function" ) { return this.each( function( j ) { jQuery( this ).addClass( value.call( this, j, getClass( this ) ) ); } ); } classes = classesToArray( value ); if ( classes.length ) { while ( ( elem = this[ i++ ] ) ) { curValue = getClass( elem ); cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " ); if ( cur ) { j = 0; while ( ( clazz = classes[ j++ ] ) ) { if ( cur.indexOf( " " + clazz + " " ) < 0 ) { cur += clazz + " "; } } // Only assign if different to avoid unneeded rendering. finalValue = stripAndCollapse( cur ); if ( curValue !== finalValue ) { elem.setAttribute( "class", finalValue ); } } } } return this; }
2、JQuery的隐式迭代
什么叫隐式迭代？就是遍历内部DOM元素（伪数组形式）的过程
jQuery.fn.init方法在创建jQuery实例对象的时候，最终返回的是数组形式，数组中的元素是符合选择器的DOM元素，在对元素进行操作的时候，内部其实是对所有符合的元素进行遍历循环，执行相应的操作。这样做简化了用户的遍历操作。
结束语
本篇文章只是简单的从jQuery的设计模式和主要特点进行的简要的分析，后续还将继续深入其中方法的解读，如文中有不足之处，还望指教！
