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的库。

posted @ 2018-07-15 13:47  leejay-blog  阅读(344)  评论(0编辑  收藏  举报