前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery_H5之家

> 脚本语言 > >

前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery 2017-03-23 15:09　出处：清屏网　人气：　

配图与本文无关

早几年学习前端，大家都非常热衷于研究jQuery源码。我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹，“原来JavaScript居然可以这样用！”

虽然随着前端的发展，另外几种前端框架的崛起，jQuery慢慢变得不再是必须。因此大家对于jQuery的热情低了很多。但是许多从jQuery中学到的技巧用在实际开发中仍然非常好用。简单的了解它也有助于我们更加深入的理解JavaScript。

这篇文章的主要目的就是跟大家分享一下，jquery对象是如何封装的。算是对于大家进一步学习jQuery源码的一个抛砖引玉。

使用jQuery对象时，我们这样写：

// 声明一个jQuery对象 $('.target') // 获取元素的css属性 $('.target').css('width') // 获取元素的位置信息 $('.target').offset()

在使用之初可能会有许多疑问，比如$是怎么回事？为什么不用new就可以直接声明一个对象等等。后来了解之后，才知道原来这正是jQuery对象创建的巧妙之处。

先直接用代码展示出来，再用图跟大家解释是怎么回事。

; (function(ROOT) { // 构造函数 var jQuery = function(selector) { jQuery.fn.init(selector) } jQuery.fn = jQuery.prototype = { constructor: jQuery, version: '1.0.0', init: function(selector) { // 在jquery中这里有一个复杂的判断，但是这里我做了简化 var elem, selector; elem = document.querySelector(selector); this[0] = elem; ; }, // 在原型上添加一堆方法 toArray: function() {}, get: function() {}, each: function() {}, ready: function() {}, first: function() {}, slice: function() {} // ... ... } jQuery.fn.init.prototype = jQuery.fn; // 实现jQuery的两种扩展方式 jQuery.extend = jQuery.fn.extend = function(options) { // 在jquery源码中会根据参数不同进行很多判断，我们这里就直接走一种方式，所以就不用判断了 var target = this; var copy; for(name in options) { copy = options[name]; target[name] = copy; } return target; } // jQuery中利用上面实现的扩展机制，添加了许多方法，其中 // 直接添加在构造函数上，被称为工具方法 jQuery.extend({ isFunction: function() {}, type: function() {}, parseHTML: function() {}, parseJSON: function() {}, ajax: function() {} // ... }) // 添加到原型上 jQuery.fn.extend({ queue: function() {}, promise: function() {}, attr: function() {}, prop: function() {}, addClass: function() {}, removeClass: function() {}, val: function() {}, css: function() {} // ... }) // $符号的由来，实际上它就是jQuery，一个简化的写法，在这里我们还可以替换成其他可用字符 ROOT.jQuery = ROOT.$ = jQuery; })(window);

在上面的代码中，我封装了一个简化版的jQuery对象。它向大家简单展示了jQuery的整体框架情况。如果了解了整体框架，那么大家去读jQuery源码，就会变得非常轻松。

我们在代码中可以看到，jQuery自身对于原型的处理使用了一些巧妙的语法，比如 jQuery.fn = jQuery.prototype ， jQuery.fn.init.prototype = jQuery.fn; 等，这几句正式jQuery对象的关键所在，下面我用图给大家展示一下这中间的逻辑是怎么回事。