之前也看过jquery库源码，网上也有很多对于jquery框架的分析教程，但是最近又想花点时间重新学习。jquery问世以来受到了广大的前端开发者的青睐，对于很多前端开发者来说，走上前端的道路不是从写原生javascript开始而是基本上都是从写jquery开始的，甚至对于后端开发者来说，对于他们来说jquery也能轻松上手。那么jquery为什么能这么受欢迎呢，我个人见解，
首先，jquery封装了许多操作dom的方法和一些工具方法，对于各浏览器兼容性做到了完美的兼容，对于jquery 2.0之前可以兼容到IE6浏览器。开发者不需要在为了浏览器的兼容性写上几十行的代码，使用jquery只需一行代码。对于那个PC端盛行的年代，jquery完美的解决了广大前端开发者的苦恼。
其次，jquery的框架设计，无new构建方式，以及友好的链式调用，使jquery用起来非常的简洁。
下面介绍jquery的无new构建：
通常我们创建js类使用原型和构造函数的形式：
function jQuery (){
......
}
jQuery.prototype = {
constructor: jQuery,
init: function (){
},
get: function (){
}
......
}
var $ = new jQuery()
$.get();
这里我们将属性定义在构造函数中，将方法定义在原型上。我们要调用原型上的get方法，首先要先实例化构造函数new jQuery，然后调用原型上的方法，显然jquery不是这样操作的。我们在平常写jquery的时候是链式调用的根本没有用到new关键字。那么我们先来看看jquery源码中的写法：
var rootjQuery;
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
},
jQuery.fn = jQuery.prototype = { constructor: jQuery,
init: function( selector, context, rootjQuery ) {
......
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn;
rootjQuery = jQuery(document);
以上为jquery实现无new构造的核心代码，下面我们来分析一下这段源码。首先第一段定义了jQuery的构造函数，这个构造函数返回了一个对象new jQuery.fn.init( selector, context, rootjQuery )，这个对象对应的类是jquery.prototype.init，那么init原型上并没有方法，如果这时我们直接调动jQuery上的原型方法会直接报错。这里通过将jQuery的原型，重新赋值给jQuery.fn.init的prototype上，这样jQuery的构造函数就是jquery.fn.init，jQuery原型上的方法就可以直接调用。那么链式调动是怎样实现的呢，只需要在每个调用的函数加上return this，将jquery.fun.init对象返回即可。
之前看这段代码感觉比较混乱，但是现在看起来只需要借助原型上的init方法这点巧妙的改动就可以实现jquery这种无new构建。
目前前端框架盛行，很多新入行的前端同学都是从前端框架学起，这些MVVM框架，不需要开发者了解dom原理，通过数据驱动，改变虚拟dom，虚拟dom和文档，实际dom进行比较差异，从而实现页面的dom更新。对于入行来说无论是从写原生js，还是jquery，还是前端框架开始来说都是可以的，但是对于入行以后来说一定要学习jquery这种dom操作库，然后在学习原生的实现方法，这样才能真正的了解dom原理。以后无论采用哪种技术栈，再出现问题时，你才不会一脸迷茫不知所措。最后前端框架在写单页应用，并且dom操作过多的页面时，这种数据绑定的实现方法确实具有很大优势，但是她并不一定适合所有的应用场景，对于一些大公司来说，一些底层的老的业务，由于迁移成本较大，且为了友好的用户体验，还需要兼容低版本的浏览器，还是要使用jquery、zepto等操作dom的库。
原文地址：https://www.cnblogs.com/leejay6567/p/9313384.html