我在项目中遇到以下代码:
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(
所以在某些情况下它不起作用
那么问题来了:这段代码有多糟糕?
最佳答案
这是一个可重用性和个人品味的问题。对于非常简单的事情(例如您的示例),内联代码更具可读性,但当然您依赖于 add_table()
作为全局函数 - 如果您有数百个具有不同点击处理程序的元素,您最终可能会数百个函数/变量污染了全局命名空间。那很糟糕! :)
就可重用性而言,我发现最好在抽象功能的不同组件中进行编码,并且可以在需要时调用 - 所有这些都在定义的(非全局)命名空间内。
jQuery('#addmore)'.click(function add_table(elem) {
var current_id = jQuery("table.t1:last").attr("id");
}
上面的代码给出了一个很好的separation of concerns - 这意味着语义信息 (HTML) 忽略了行为信息 (Javascript),这再次有助于创建更清晰、更易于管理的代码。
关于javascript - 这是多么糟糕 - 使用外部处理程序定义的内联 js 调用 VS 完全外部 js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6015611/