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