Question

这是关于jQuery语法/代码组织的最佳实践的一般性问题。

考虑以下代码片段，在jQuery AJAX函数中使用：

if(obj.status == "error"){
 $("#alert").html(obj.message);
}

我也看到这个写成：

function alert_box(str)
{
  var html_str = '';
  $("#alert").html(html_str);
}

if(obj.status == "error"){
alert_box(obj.message);
}

从功能上讲，这完全相同。我的问题：是否存在区分两者的语义或实际原因？加载时间/性能问题怎么样？

Answer 1

这似乎是“为什么一般使用功能”的问题？函数背后的想法是，您可以重复使用代码块，而无需再次写出相同的代码。如果你想在整个脚本的几个地方做同样的事情，那么这个功能是有意义的。如果你只这样做一次，它可能不那么实用。然后，函数还可以帮助您隐藏不关心它们的详细信息 - 这样您就可以在该操作的详细信息位于该函数定义的某个位置时汇总操作。

在这种特定情况下，无论如何都会破坏该功能。您没有使用传入的参数str，而是使用空格变量html_str来替换元素的html内容。此外，这里不需要使用html而不是text，这是更好的表现。

function alert_box(str) {
  $("#alert").text(str);
}

即使这只是一个单行，但这仍然是实用的，因为它可以让你在整个脚本的几个地方使用alert_box，如果你决定改变{{{ 1}}。例如，即使更改元素的alert_box，也需要在几个地方进行更改。

值得注意的是，此函数每次运行时都会在DOM中搜索“#alert”。像这样缓存该引用是最佳的：

id

一些很好学习的东西：

KISS

DRY

SOLID aka OOP

jQuery最佳实践 - 使用选择器与函数（变量）

1 个答案: