2

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

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(

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

所以问题：这段代码有多糟糕？

4

2 回答 2

4

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

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

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

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

于 2011-05-16T09:57:39.603 回答
2

根据您网站的大小（和流量级别），可能存在带宽问题。即onclick="add_table(this)"在下载中添加 24 个字节的数据。这可以放在一个缓存的 JavaScript 页面中，该页面只下载一次，而不是每次请求。如果您有很多页面，其中包含额外的代码并且您有大量流量，则可能会产生明显的带宽差异。

于 2011-05-16T10:04:08.357 回答