jquery模块化编程_如何在jQuery中删除不必要的模块

jQuery无疑是最受欢迎JavaScript库，（几乎）这个星球上的每个网站都在使用它。 这会影响jQuery包括库中的所有功能，以涵盖每个实例和可能性。

但是，当我们在一个简单的网站上工作时，我们可能仅使用其中一些功能。 因此，如果我们只能运行该必需的功能，而不运行所有其他未使用的功能，则效率会更高。 我们能够排除项目中不必要的一些jQuery模块。 因此，让我们看看如何做到这一点。

首先第一件事

首先，我们需要安装完成这项工作所需的一些工具。 这些工具是Git ， Grunt和Node.js。 如果您在macOS上运行，则安装所有这些工具的最简单方法是通过名为Homebrew的macOS软件包管理器。

安装自制软件

因此，让我们打开终端并运行以下命令来安装Homebrew。 如前所述，Homebrew将使我们更轻松地安装其他提到的工具。

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

安装Git

Homebrew安装完成后，运行以下命令以安装Git。

brew install git

安装Node.js

运行以下行以安装Node.js

brew install node

安装Grunt

最后，我们需要安装Grunt。 运行此命令。

npm install -g grunt-cli

如果您使用的是Windows，则有一个名为Chocolatey的类似程序包管理器，可用于以类似方式安装上述程序包。

构建jQuery

当前，jQuery允许排除以下模块。

模组	命令	描述
阿贾克斯	-ajax	这指定了包括jQuery.ajax()的jQuery AJAX API 。 jQuery.get()和jQuery.get() .load()函数
CSS	-css	这指定从jQuery的功能CSS类别包括.addClass() .css()和.hasClass()
不推荐使用	-deprecated	这指定了不推荐使用的模块或功能。
活动别名	-event-alias	这指定的事件的功能等.click() .focus()和.hover()
外型尺寸	-dimensions	这指定设置CSS尺寸的功能 。 此类函数包括.height() .innerHeight()和.innerWidth() 。
特效	-effects	这说明了设置动画效果的函数，例如.slideToggle() .animate()和.fadeIn()
抵消	-offset	这指定the functions that retrieve45 coordinates and position 。 这样的功能包括.offset()和.position() 。

在能够自定义jQuery之前，我们需要通过在Terminal中运行此命令从Github存储库中克隆它。

git clone git://github.com/jquery/jquery.git

然后，您应该在用户文件夹下找到一个名为jquery的新文件夹。 使用此命令导航到该目录。

cd jquery

接下来，我们需要安装Node依赖模块来运行我们的项目。

npm install

然后，我们只需运行Grunt命令即可构建jQuery（并按Enter）

grunt

如果操作成功，它将返回以下报告。

从报告中可以看到，我们的jQuery保存在dist/文件夹中。 至此，我们的jQuery已设置了所有功能，因此大小非常大，为265kb 。 缩小版本为83kb。

卸下模块

假设我们要从jQuery中删除效果模块； 我们可以运行此命令。

grunt custom:-effects

如果我们回顾一下文件大小，现在它已减小到246kb 。

要排除多个模块，请用逗号分隔每个模块，例如：

grunt custom:-effects,-ajax,-deprecated

这肯定会进一步减少jQuery文件。 在我们这里，它减少到只有207kb

最终思想

jQuery可以帮助我们轻松地操作DOM，但是大小增加200 kb，它可能会影响您的网站性能。 因此，通过消除一些不必要的jQuery模块，您的jQuery脚本无疑将运行得更快，更高效。 我们希望这个小技巧对您的下一个项目有用。

翻译自: https://www.hongkiat.com/blog/jquery-remove-modules/