Javascript 有多糟糕-使用外部处理程序定义的内联js调用与完全外部js调用

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

html:

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

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）的影响，这同样有助于创建更干净、更易于管理的代码。

根据站点的大小（和流量级别），可能存在带宽问题。i、 e.

onclick=“add_table（this）”

为下载添加24字节的数据。这可以放在缓存的JavaScript页面中，该页面只下载一次，而不是针对每个请求。如果你有很多页面，其中有额外的代码，你有很多流量，这可能会造成明显的带宽差异

jQuery(document).ready( 

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