jQuery 모범 사례 - 선택기와 함수 사용 (변수)

Question

이것은 jQuery 구문/코드 구성의 모범 사례에 대한 일반적인 질문입니다.

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

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

기능적으로,이 정확하게 동일합니다

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

나는 또한이로 작성 보았다 :

는 jQuery를 AJAX 기능에 사용 된 다음 코드를 살펴 보자. 내 질문 : 둘 사이를 구별하는 의미 또는 실질적인 이유가 있습니까? 로드 시간/성능 문제는 어떻습니까?

Answer 1

이것은 "일반적으로 기능을 사용하는 이유"에 대한 질문 인 것 같습니다. 함수 뒤에있는 아이디어는 동일한 코드를 다시 작성하지 않고도 코드 블록을 재사용 할 수있게 만드는 것입니다. 스크립트에서 여러 곳에서 똑같은 일을하고 싶다면이 함수가 의미가 있습니다. 한 번만 그렇게하면 실용적이지 않을 수 있습니다. 그런 다음 함수는 사용자가 신경 쓰지 않는 세부 정보를 숨기는 데 도움을줍니다. 따라서 해당 작업의 세부 정보가 해당 함수 정의의 어딘가에있는 동안 작업을 요약 할 수 있습니다.

이 특별한 경우, 그 기능은 어쨌든 고장났습니다. 인수 str이 전달 된 대신 요소의 html 내용을 바꿀 빈 변수 html_str이 있습니다. 또한 더 나은 성능 인 text보다는 html을 사용할 필요가 없습니다. 이것은 단지 하나의 라이너가 비록 당신이 alert_box가 무엇을 변경하기로 결정한 경우 나중에 그 장소를 변경해야 스크립트를 통해 여러 장소에서 alert_box을 사용하게하지 않기 때문에

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

이 여전히 실용적 일 수 있습니다 . 요소의 id을 변경하는 것과 같은 것조차도 여러 위치에서 변경해야합니다.

이 함수가 실행할 때마다 DOM에서 "#alert"를 검색한다는 점도 주목할 가치가 있습니다. 공부 중대하다

$alert = $("#alert"); 

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

몇 가지 : 그것은이 같은 해당 참조를 캐시 최적의 것

KISS

DRY

SOLID aka OOP