Question

我喜欢jQuery，但遇到了大型网站和多个网页的问题。我的问题是每个页面都有独特的要求，我需要知道告诉jQuery哪些页面激活某些东西的最佳方法。例如，某些表单需要Validator plug-in而有些表格不需要，有些表格需要DataTables plug-in而有些表格不需要等等。

现在我想我可以在我的应用程序JavaScript文件中构建复杂的逻辑（switch语句），根据它们所在的页面触发不同的操作，但这看起来很臭。什么是最佳实践？

更新：在这个问题上有很多好主意但不是我想要的。让我以更一般的方式重新解释这个问题。

目前我正在使用Rails及其Prototype助手来构建我的AJAX组件，但我想转移到UJS。我如何告诉jQuery哪些链接/按钮可以制作AJAX以及哪些可以避免？并且，鉴于我可以区分应该具有AJAX的那个，如何为每个链接提供自己的参数（方法，更新等），就像我可以使用帮助器一样？

我的意思是除了构建一个针对每个链接/按钮的特定jQuery选择器的大页面。：）

Answer 1

jQuery插件通常在DOM元素上激活，例如：

$("#element").myPlugin();

如果页面上不存在该元素，则插件通常会通过不激活插件来安全地运行。

如果您的插件不符合此结构，我建议您这样做：

if($("#element").length) $("#element").myPlugin();

Answer 2

一个好的做法是在一个文件中包含所有页面所需的代码，并为需要特定功能的页面提供特定的javascript文件。听起来好像这就是你正在做的事情，所以我们有一个很好的基础来构建。

您可以通过多种方式构建哪些页面需要哪些文件，但请记住，在正常情况下，浏览器会缓存javascript文件，使这些文件只需下载一次。

根据这个评论

是的，但是如果你有多个怎么办？具有相同DOM元素的页面？对于例如，我的validator（）插件已设置像$（'form'）。validate（），但是有时我不希望它采取行动页面上的所有表单，只有一些他们在这种情况下我该怎么做？

我建议提出一个约定，通过该约定来标记需要某些jQuery插件“附加”到页面上的常见元素。例如，如果您在许多不同页面上有<form>元素需要validator()插件，但在任何一个特定页面上都有多个<form>元素（并非全部<form>元素应该有validator()插件），然后我建议使用CSS类来区分需要插件的<form>元素。

<!-- HTML -->

<!-- need to apply plugin to this -->    
<form class="validator"> ... </form>

<!-- but not to this -->
<form> ... </form>

<script type="text/javascript">
// jQuery Code (in a separate file)

$(function() {
    $('form.validator').validator();
});
</script>

这样，该插件将仅应用于与选择器匹配的<form>个元素。

修改

我不确定rails中的帮助程序是如何工作的，但您可以使用bind()方法的data参数将数据传递给jQuery中的事件处理程序，以用于任何非直接部分的数据<a>元素本身（例如href之类的属性）。如果某些链接需要AJAX，那么标记具有CSS类的链接并将URL存储在元素的href中可能是有意义的。然后在您的jQuery代码中，可以在任何具有通过AJAX发出请求的链接的页面上使用，您可以执行类似
的操作
<a class="ajax-link" href="/get/someData.php">Data retrieved through AJAX</a> <a href="/normalLink.php">Standard link with no AJAX</a> <script type="text/javascript"> $('a.ajax-link').bind('click',ajaxRequest); function ajaxRequest(e) { e.preventDefault(); $.get(e.target.href, function(data) { $('#loadDiv').html(data); }); } </script>

当用户禁用JavaScript时，链接将按照普通链接工作，但在启用JavaScript时会对数据发出AJAX请求。我在这里使用了一个命名函数ajaxRequest，因为它可以更容易地调试脚本（也许还可以重用），但如果你愿意，可以使用匿名函数。

Answer 3

找到了不错的自定义解决方案

http://topsecretproject.finitestatemachine.com/2010/04/how-to-organizing-javascript-in-ruby-on-rails/

Answer 4

我经常做的一件事是在每个页面的id标记中添加body，其中id是页面的名称（<body id="contact">）。这使得javascript和css选择都很容易。

例如：

<!-- HTML -->

<!-- need to apply plugin to these forms -->    
<form> ... </form> on the about.php page

<!-- but not to this -->
<form> ... </form> on the index.php page

<script type="text/javascript">
// jQuery Code (in a separate file)

$(function() {
    $('body#about form').validator();
});
</script>

Answer 5

您可以将键值对传递给主JavaScript模块，以通知应导入哪些插件。 This technique is used by scriptaculous

<script type="text/javascript" src="scriptaculous.js?load=effects,dragdrop">

另一种方法是在服务器端定义每个表单/页面需要哪些媒体文件，因此可以使用指向要使用的脚本的链接自动呈现html。 Django has a good implementation of this technique：

class CalendarWidget(forms.TextInput):
    class Media:
        css = {
            'all': ('pretty.css',)
        }
        js = ('animations.js', 'actions.js')

跨多个页面组织不引人注目的JavaScript的最佳方法是什么？

5 个答案: