• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:Richard Hurt 6次浏览

我喜欢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,因为它可以更容易地调试脚本(也可以重用),但是如果您愿意,可以使用匿名函数。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)