在多个页面上组织不引人注目的javascript的最佳方法是什么?

一个好的实践是在一个文件中拥有所有页面所需的代码,并为需要特定功能的页面提供特定的JavaScript文件。听起来好像这就是你在做的,所以我们有一个很好的基础。

有很多种方法可以构建哪些页面需要哪些文件,但请记住,在正常情况下,浏览器会缓存JavaScript文件,这样这些文件只需要下载一次。

鉴于此评论

是的,但是如果你有多个呢 具有相同DOM元素的页面?为了 例如,设置了我的validator()插件 向上类似于$('form').validate(),但 有时我不想让它发挥作用 页面上的所有表单,只有一些 他们当中。在这种情况下我该怎么办?

我建议制定一个约定,通过这个约定,可以为需要“附加”某些jquery插件的页面中常见的元素添加标签。例如,如果您有 <form> 元素位于需要 validator() 插件,但有多个插件 <形式& gt; 任何一个特定页面上的元素(而不是全部 <表格> 元素应具有 验证程序() 插件),然后我建议使用CSS类来区分 <表格> 确实需要插件的元素。

<!-- 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>

这样,插件将只应用于那些 <形式& gt; 与选择器匹配的元素。

编辑:

我不确定Rails中的帮助程序是如何工作的,但是您可以使用 data 的参数 bind() 用于任何不直接属于 <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 因为它可以使调试脚本变得更容易(也许还可以重用),但是如果愿意,您可以使用匿名函数。

jquery插件通常是在dom元素上激活的,例如:

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

如果页面上不存在该元素,插件通常不会激活插件,从而安全运行。

如果您的插件不遵循此结构,我建议您执行以下操作:

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

找到了很好的自定义解决方案

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

我一直在做的一件事就是 id 到 body 每个页面的标记,其中 身份证件 是页面的名称( <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>

您可以将键值对传递给您的主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')