Question

我想知道，将javascript函数放在html标签中是否更好，例如

<form method="post" action="/web/comment" 
onsubmit="jQuery.ajax({
   type:'POST', 
   dataType:'html', 
   data:jQuery(this).serialize(), 
   success:function(data, textStatus) {
        jQuery('#comment').html(data);
   }, 
   url:'/web/comment'
 }); 
 return false;">

或者在外部文件中，例如script.js？

Answer 1

考虑可读性（对于人类而言） - 在您的示例中，代码肯定会在单独的文件中（如您所建议的）或在html文件的script块中更易读。

例如

<script type="text/javascript">
    function submitComments(commentsForm) {
        jQuery.ajax({
            type:'POST', 
            dataType:'html', 
            data:jQuery(commentsForm).serialize(), 
            success:function(data, textStatus) { jQuery('#comment').html(data); }, 
            url:'/web/comment'
        });
    }
</script>

和

<form method="post" action="/web/comment" onsubmit="submitComments(this); return false;">

关于jQuery的一些指示

请点击jQuery's event binding syntax，而不是直接设置onsubmit属性。这使您可以在一个地方很好地封装事件处理代码及其管道，这通常使您的代码更易于人们理解。
通常只在代码中使用简写$而不是jQuery（除非已将$定义为其他内容）。

Answer 2

将所有javascript代码放在单独的文件中总是更好..

阅读Separation of concerns。

以下是我喜欢此主题的链接：http://wardley.org/computers/web/separation.html

Answer 3

将它们放在外部文件中会使您的标记更易于阅读和维护。它还使您能够跨页面重用脚本而无需复制代码。

Answer 4

最佳做法是在HTML中只包含具有自己ID的表单，然后附加这样的事件。

HTML：

<form id="Form1" method="post" action="/web/comment">

JavaScript的：

window.onload = function() {
    var oForm = document.getElementById("Form1");
    oForm.onsubmit = function() {
        //code here....
        return false;
    }
};

由于您已经在使用jQuery，因此可以更加简单：

jQuery(document).ready(function() {
    jQuery("#Form1").bind("submit", function() {
        jQuery.ajax({
            type:'POST', 
            dataType:'html', 
            data:jQuery(this).serialize(), 
            success:function(data, textStatus) {
                jQuery('#comment').html(data);
            }, 
            url:'/web/comment'
        }); 
        return false;
    });
});

Answer 5

在单独的文件中排除javascript代码将使浏览器能够缓存它;）好处：页面加载速度更快：）

Answer 6

我认为将它移动到单独的文件中的代码太小，最好在脚本区域中将其分开。有些想法（http://api.jquery.com/submit/）：

<form method="post" action="/web/comment" id="target">
<script type="text/javascript">
$('#target').submit(
jQuery.ajax({
   type:'POST', 
   dataType:'html', 
   data:jQuery(this).serialize(), 
   success:function(data, textStatus) {jQuery('#comment').html(data);}, 
   url:'/web/comment'
 }); 
 return false;
);
</script>
</form>

在文件或html标签中使用javascript函数更好吗？

6 个答案: