웹 디자이너를 위해 엔터프라이즈 급 JavaScript "프레임 워크"를 구현하는 방법은 무엇입니까?

Question

나는 우리의 JavaScript "전략"인 현재 혼란을 개선하는 임무가 주어졌다. 우리는 온라인 쇼핑 회사이고 나의 상사는 나에게 이것을 올바르게 할 시간을 주었다. 그는이 모듈을 유지하고 구성 요소의 재사용 가능성을 높이는 데 매우 열중합니다.

우리의 HTML은 JSP로 렌더링되고 있으며, 우리는 그것에 대해 걱정할 필요 웹 디자이너 않고, 예를 들어, 제품에 대한 정보를 작성하는 사용자 정의 태그를 많이 있습니다.

지금, 우리는 자바 스크립트와 비슷한 일을하고 싶다. 웹 디자이너는 말처럼, 사용자 정의 태그의 집합을 부여해야 상단에 드래그 바, 닫기 버튼이있는 <div>에서 HTML을 바꿈됩니다

<foo:draggable> 
... some HTML here ... 
</foo:draggable> 

.

내 아이디어는 고유 한 namespaced CSS 클래스 이름 (예 : foo_draggable)으로 div를 표시 한 다음 모든 내 기능을 단일 JS 파일에 저장하는 것입니다. JS 파일은 DOM에 CSS 클래스 foo_draggable이있는 요소가 있는지 확인하고 필요한 경우 필요한 이벤트 처리기를 첨부합니다.

는 그러나, 나는이 문제를 확장하고, 그들이 자주 사용하지 않을 때 실행 선택 쿼리를 많이 가지고 좋은 생각인지 궁금 걱정입니다.

첫 번째 대안은 명시 적으로 각 드래그 항목을 시작하는 것입니다하지만 사방에 <script> 태그를 넣어 의미 할 것입니다. 두 번째 접근법은 모든 UI 기능을 하나의 파일에 넣지 않고 필요한 파일을 다운로드하는 것입니다.하지만 이는 더 많은 HTTP 요청과 느린 페이지로드 속도를 의미합니다.

아무도이 경험이 있습니까?

Answer 1

두 개의 클래스 이름은 어떻게됩니까?

<div class='foo fooDragable'></div> 
<div class='foo fooSortable'></div> 

'foo'클래스를 자바 스크립트 수정이 필요한 모든 요소에 추가합니다. 자바 스크립트는 foo에 대해 dom을 한 번만 확인해야합니다.

var $foo = $('.foo'); 

이후이 배열 내에서 전체 dom보다 작아야합니다.

var $dragAble = $foo.filter('.fooDragable'); 

Answer 2

JSF을 고려 했습니까? 아직 JSF를 사용하지 않는다면 큰 변화라고 생각합니다. 그러나 즉시 사용 가능한 JSF 컴포넌트 libaries의 많은 등 예를 RichFaces, IceFaces, PrimeFaces, 것은 거의 자신을 구성 요소/태그를 생성하는 시간의 낭비, ajaxical 소스가 있습니다.

또는 위대한jQuery JS 프레임 워크를 사용하려면 모든 자바 스크립트를 바꿀 수 있습니다.

Answer 3

당신이 얼마나 많은 별도의 구성 요소에 따라 선택기를 실행하는 추가 오버 헤드가 큰 문제가되지 않을 수 있습니다. 페이지가로드되면 모든 구성 요소를 한 번만 초기화 할 수 있습니다. 페이지에없는 항목은 초기화되지 않으며 더 이상 오버 헤드가 발생하지 않습니다. 대부분의 JavaScript 프레임 워크에서 클래스 이름 (또는 태그 이름)을 선택하는 것은 꽤 빠릅니다. 브라우저에서 기본적으로 지원하지 않는 복잡한 선택기 일 뿐이므로 속도가 느립니다.

일반적으로 많이 사용되는 구성 요소가 있고 자주 사용되지 않는 구성 요소 집합이있는 경우 자주 사용하지 않는 구성 요소 집합이있는 경우이를 분리 할 가치가 있습니다. 일반적으로 사용되는 구성 요소를 단일 JavaScript 파일 (축소 및 압축 및 적극적인 캐싱과 함께 제공)에 보관하고 필요 여부에 관계없이 모든 페이지에로드합니다. 캐싱을 사용하면 다운로드가 한 번만 수행되며 작은 HTTP 요청이 하나만있을 수 있습니다. 덜 일반적 인 구성 요소의 경우 별도의 파일 (이상적으로 구성 요소 당 하나씩)에 보관하고이를 사용하는 페이지에 스크립트 태그를 추가하십시오.

JSP가 어떻게 작동하는지 완전히 알지 못하지만 자동으로이를 수행 할 수 있습니다. 태그가 문서에 포함되어있는 경우 문서 헤더에 foo_widget.js의 스크립트 태그를 추가하거나 그.