jQuery框架学习

　　以前也看过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的库。