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

  • Z时代
  • 2024-01-10
  • 分类：问答

我喜欢jQuery，但遇到了大型网站和多个页面的问题。我的问题是，每个页面都有独特的需求，我需要知道告诉jQuery哪些页面激活某些事情的最佳方式。例如，某些形式的需要Validator plug-in有的不，有的表使用DataTables plug-in有的没有，等在多个页面上组织不引人注目的JavaScript的最佳方式是什么？

现在，我想我可以建立复杂的逻辑（switch语句）到我的应用程序的JavaScript文件不同的火行动取决于他们在哪个页面上，但看起来很臭。这里的最佳实践是什么？

更新：在这个问题上有很多好主意，但不是我所期待的。让我以更一般的方式重述这个问题。

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

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

回答：

一个好的做法是，由所有的页面需要在一个文件中的代码，并有特定的JavaScript文件用于需要特定功能的页面。这听起来好像你正在做什么，所以我们有一个很好的基础来建立。

有很多方法可以在哪些页面中构建需要什么文件，但请记住，在正常情况下，JavaScript文件由浏览器缓存，以便这些文件只需要下载一次。

在此评论

是的，但如果你有多个 页面使用了相同的DOM元素是什么光？例如，对于 示例，我的验证器（）插件设置为 就像$（'form'）.validate（），但有时我不希望它在 上采取行动 页面上的所有表单，只有一些 。我在这种情况下做什么？

我建议拿出一个约定由标记各种需要一定的jQuery插件“附加”到他们的网页中的元素。例如，如果在多个不同页面上有一个需要validator()插件的<form>元素，但在任何一个特定页面上有多个<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>元件。

编辑：

我不知道在轨的助手是如何工作的，但你可以使用bind()方法的data参数直接没有任何数据在jQuery的数据传递给事件处理程序部分是<a>元素本身（例如属性如href）。如果某些链接需要AJAX，那么使用CSS类标记这些链接并将该URL存储在元素的href中可能很有意义。然后，在可以在具有链接，通过AJAX发出请求的任何页面中使用jQuery代码，你可以不喜欢

<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();

回答：

我总是做的一件事是将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>

回答：

你可以通过键值对你的主要的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')

回答：

找到好的自定义解决方案

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

以上是 在多个页面上组织不引人注目的JavaScript的最佳方式是什么？ 的全部内容， 来源链接： utcz.com/qa/260148.html

回到顶部