这是多么糟糕 - 使用外部处理程序定义的内联 js 调用 VS 完全外部 js

我在项目中遇到以下代码：

html:

<input type="button" id="addmore" value="Add more" onclick="add_table(this)"/>

js:

function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

首先我认为这段代码是错误的，我必须将其重写为外部代码，即

jQuery('#addmore)'.click(function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");

但后来我又看了一遍，发现这个html更具可读性——我看到哪些函数绑定到html中已有的哪些元素，而且我不需要在js中搜索它。

当然它没有封装在里面

jQuery(document).ready( 

所以在某些情况下它不起作用

那么问题来了：这段代码有多糟糕？

这是可重用性和个人品味的问题。对于非常简单的事情（例如您的示例），内联代码更具可读性，但当然您依赖于add_table()作为全局函数 - 如果您有数百个具有不同点击处理程序的元素，则最终可能会导致数百个函数/变量污染全局命名空间。那很糟糕！ :)

在可重用性方面，我发现最好在抽象功能的不同组件中进行编码，并且可以在需要时调用 - 所有这些都在定义的（非全局）命名空间内。

jQuery('#addmore)'.click(function add_table(elem) {
    var current_id = jQuery("table.t1:last").attr("id");
}

上面的代码给出了一个很好的关注点分离- 这意味着语义信息 (HTML) 忽略了行为信息 (Javascript)，这再次有助于创建更清晰、更易于管理的代码。