jQuery最佳實踐 - 使用選擇器與函數（變量）

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內容的空變量html_str。此外，這裏不需要使用html而不是text，這是更好的性能。

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

即使這只是一個襯墊，這可能仍然是可行的，因爲這將讓你在幾個地方使用alert_box整個腳本，並沒有後來改變那些地方，如果你決定要改變什麼alert_box呢。例如，甚至像更改元素的id這樣的東西都需要在幾個地方進行更改。

同樣值得注意的是，該函數每次運行時都會在DOM中搜索「#alert」。這將是最優化的緩存像這樣的參考：

$alert = $("#alert"); 

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

有幾件事情是偉大的研究：

KISS

DRY

SOLID aka OOP