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

转载于:https://www.cnblogs.com/leejay6567/p/9313384.html

jQuery框架学习相关推荐

jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第十天：实战jQueryUI常用功能
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第八天：ASP.NET jQuery实施方案
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第五天：事件与事件对象
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第三天：如何管理jQuery包装集
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第九天：jQuery工具函数介绍与使用
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

jQuery框架学习

jQuery框架学习相关推荐

最新文章

热门文章