HTML과 UI 관련 자바 스크립트 코드를 덜 결합하는 방법은 무엇입니까?

Question

일반적으로 UI 구성 요소를 초기화하는 코드가 있습니다. 예를 들어 UI에 document.ready 또는 bind 이벤트로 일부 UI를 설정해야합니다.

내 이해에서, 우리는 HTML 파일에 이러한 코드를 넣으면 안됩니다. 하지만 내 관심사는 별도의 js 파일에이 init 코드를 넣으면, 그것을 선택하기 위해 UI 클래스/ID를 하드 코딩해야하므로 html 파일과 여전히 많이 결합되어있는 것 같습니다. html과 UI 관련 자바 스크립트를 디커플링하기위한 일반적인 연습/아키텍처는 무엇입니까? 간단한 예제를 제공하면 좋을 것입니다.

view.js 또는

function init() { 
    $("#some_view").click(sth); 
    $("#some_view").text(sth); 
} 

Answer 1

, 당신은 함수의 HTML 요소의 ID를 전달할 수 있습니다. 으로 :

HTML 파일에서

function init(id) { 
    $(id).click(sth); 
    $(id).text(sth); 
} 

, 초기화 ("#의 some_view")로 스크립트 태그 내부의 함수를 호출;

Answer 2

비록 신이 알고있는 동안 나는이 물건을 생각해 왔지만, 나는 그것이 곧바로 앞으로의 대답 일 수 있다고 생각하지 않는다. 이유는 다음과 같습니다

id, class, rel or any other attribute을 정의 할 필요없이 DOM 요소를 트래버스 할 수 있지만 속도가 빠르면 html 구조와의 종속성을 배제 할 수 없습니다.

id은 모든 단점보다 이점이 있습니다. id 속성을 통해 DOM 요소를 선택하는 것은 요소를 grabing하는 가장 빠른 방법입니다.

브라우저 캐싱을 허용하므로 js와 html 파일을 구분해야합니다. 개발자의 관점에서조차도 모든 것을 정리하는 것이 좋습니다.

그러나 간단하고 더 좋고 권장되는 방법을 사용하면 id과 같은 속성을 변경해야하는 연쇄 효과를 줄일 수 있습니다.

// have selectors defined once and use that object later. 
var someView = $("#some_view"); 

// use someView everywhere (within scope) 

someView.click(sth); 
someView.text(sth); 

에 $('#some_view') 객체를 할당하는 동안 DOM 탐색이 이미 한 번 완료되었습니다로이 실제로 빠릅니다. 다음 번에 사용하면 통과가 필요하지 않습니다. id을 #some_view에서 #something_else으로 변경해야하는 경우에도 한 곳에서 완료해야합니다.