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

Question

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

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 更具可读性 - 我看到哪些函数绑定(bind)到 html 中已有的哪些元素，并且不需要在 js 中搜索它。

当然它没有封装在里面

jQuery(document).ready( 

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

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

Answer 1

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

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

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

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