前言
在开发前端项目过程中，使用 jQuery 库可以实现很多功能。本文将为大家介绍一个 npm 包：jquery.docout，它可以帮助我们更好地理解 jQuery 的使用方法以及实现。
安装
首先，我们需要安装 jQuery。在命令行输入：
npm install jquery
安装完成后，再安装 jquery.docout，输入：
npm install jquery.docout
使用
概述
jquery.docout 可以将 jQuery 函数链的调用情况打印成一张图表，从而更好地理解 jQuery 的使用方法。下面是具体的使用方法。
函数链调用
在 jQuery 中，可以进行函数链调用，即在一个 jQuery 对象上连续调用多个函数。例如：
$('#example').addClass('red').show(1000).fadeOut(1000);上述代码中，$('#example')获取到 id=example 的元素，.addClass('red')给该元素添加 red 类名，.show(1000)使该元素以 1000ms 的动画方式展示，.fadeOut(1000)以 1000ms 的动画方式让该元素消失。
我们可以使用 jquery.docout 看一下上述函数链调用的执行顺序：
$('#example').addClass('red').show(1000).fadeOut(1000).docout();该代码会在命令行输出下图：
$('#example').addClass('red').show(1000).fadeOut(1000)
├ $('#example').addClass('red')
│ └ $('#example')
├ $('#example').show(1000)
│ └ $('#example')
└ $('#example').fadeOut(1000)
└ $('#example')上图中，每一行都表示一次函数调用，箭头指向调用该函数的对象。我们可以看到，函数链调用是从上至下依次执行的，每个函数都是在前一个函数的返回值上进行调用。
参数说明
在函数链调用过程中，参数是一个比较复杂的部分，参数数量、类型、顺序都会影响函数的执行结果。我们可以使用 jquery.docout 查看每个函数的参数。
例如，下面的代码是实现点击 button 元素切换 div 的显示状态：
$('#button').click(function() {
$('#example').animate({
height: 'toggle'
}, 1000);
});其中，.click函数的参数是一个回调函数，$('#example').animate函数的参数是一个对象。我们使用 jquery.docout 查看它们的参数：
$('#example').animate({ height: 'toggle' }, 1000).docout()命令行输出的图表如下：
$('#example').animate({ height: 'toggle' }, 1000)
├ $('#example')
└ { height: 'toggle' }, 1000上图中，第一行表示 .animate 函数调用的对象，第二行表示 .animate 函数的两个参数。
总结
jquery.docout 可以帮助我们更好地理解 jQuery 函数链调用和参数使用方法。通过了解这些我们可以更加高效地使用 jQuery，写出更好的代码。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ------------
------- ------------------------------------------------------------------
------- ----------------------------------------------------------------------------
-------
------
------- ------------------ ------- ------------
---- ------------ -------------- ------ ------ ------ ----------------- ------------
--------
-- --------------
----------------------------- -
-----------------------
------- --------
-- ------
---
-- -------
-----------------------
------- --------
-- ---------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc281e8991b448e63f3