管理 jQuery 插件

2022-01-11 00:00:00 jquery jquery-plugins javascript organization

通常，在使用 jQuery 时，需要包含多个插件.这很快就会变得杂乱无章，尤其是当某些插件需要额外的组件(图像和 CSS 文件)时.

Often, when working with jQuery, the need arises to include multiple plugins. This can quickly become messy work, especially when some plugins require additional components (images and CSS files).

有哪些推荐"方法:

  • a. 以易于维护的方式管理所需的文件/组件(.js、.css 和图像)，和；
  • b. 将这些插件包更新到最新版本
  • a. Manage the required files/components (.js, .css and images) in a way that is easy to maintain, and;
  • b. Keep these plugin packages updated to the latest versions

我不一定要寻找一种工具来执行此操作(尽管我认为可以执行此管理的工具会很有用)，但更多的是一种思维方式.

I'm not necessarily looking for a tool to do this (although one that could perform this management would be useful, I suppose), but more of a way of thinking.

推荐答案

更新:这几天有 Bower、组件和Browserify 它会自动为我们处理以下所有事情.

Update: These days there is Bower, Component and Browserify which take care of all of the following for us automatically.

我很惊讶还没有人报道我所做的事情.下面是我管理脚本和资源的方式.

I'm surprised no one has covered what I do yet. So here's how I manage scripts and resources.

我使用 SVN 进行设置的每个项目.我包含的几乎所有脚本都有一个 SVN 镜像(这些天 github 有 svn)，这意味着我可以使用 SVN 外部并将该项目的任何分支或版本或我想要的任何内容直接获取到项目 scripts文件夹.由于我们使用的是 SVN，因此很容易跟踪、管理和更新这些脚本.

I have each project I work on setup with SVN. Nearly all of the scripts I include have a SVN mirror (github has svn these days) this means that I can then use SVN externals and fetch whatever branch or version or whatever I want of that project directly into the projects scripts folder. As we are using SVN, it is easy to track, manage and update these scripts.

如果一个项目不在SVN上，那么我只需将它添加到我制作的普通SVN项目中，例如项目A和项目B，都使用jquery-project-not-in-svn，所以我们将 jquery-project-not-in-svn 粘贴到我们公共项目的 SVN 存储库中，然后在项目 A 和 B 上使用 SVN 外部来引用它 - 如前所述.

If a project is not on SVN, then I just add it to a common SVN project I have made, so for instance Project A and Project B, both use jquery-project-not-in-svn, so we stick jquery-project-not-in-svn into our common project's SVN repository, and then use SVN externals on Projects A and B to reference it - as explained before.

现在涵盖了管理、获取和更新.

Now that covers managing, fetching and updating.

以下是我介绍脚本包含和请求的方式.

Here is how I cover script inclusions and requests.

由于每个项目现在都有自己的脚本目录，其中包含它需要的所有脚本(由 SVN 外部管理)，我们现在必须担心缩小它们以减少服务器上的负载.每个项目的根目录中都有一个 Makefile，其中包含命令 update.该命令将执行以下操作:

As each project now has it's own scripts directory that contains all the scripts it needs (which is managed by SVN externals), we now have to worry about minifying them to reduce load on our server. Each project has a Makefile in it's root, which contains the command update. This command will perform the following:

  • 执行 SVN 更新(这将适当地更新所有 SVN 外部)
  • 完成后，它将所有 js 文件打包并缩小为 scripts/all.js 和 scripts/all.min.js

我无法分享确切的 Makefile，但我可以分享一个处理 CSS 和 Javascript 的打包/合并和缩小的公共文件.链接在这里:http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb854生成文件

I can't share the exact Makefile but I can share one which is public that handles packing/merging and minification of CSS and Javascript. Here is the link: http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile

通过做这些事情，我们实现了:

By doing these things, we have achieved:

  • 管理多个项目的外部脚本资源
  • 自动更新适当的脚本资源
  • 将项目所有用到的脚本资源打包到一个文件中
  • 缩小该文件，以便只执行一个 JS 请求和一个 CSS 请求.

祝你好运，如果您想了解更多信息，请随时发表评论.

So good luckmate, feel free to post a comment if you would like to learn more.

相关文章