JQuery에 추천하는 자바스크립트 HTML 템플릿 라이브러리?
어떤 HTML 템플릿 라이브러리가 JQuery와 잘 어울릴까요?구글 검색을 하면 꽤 많은 도서관이 나타나지만, 시간의 흐름을 견딜 수 있는 잘 알려진 도서관이 있는지는 잘 모르겠습니다.
솔직히 말해서, 고객측 템플릿 작성은 요즘 매우 뜨겁지만, 꽤나 밀림입니다.
가장 인기있는 것은 다음과 같습니다.
- 순수: 그의 "구문"이 아니라 js만 사용합니다.
- 콧수염: 꽤 안정적이고 좋다고 들었습니다.
- jqote2: jsperfs에 따르면 매우 빠릅니다.
- jquery 템플릿( deprec):
그 외에도 많은 것들이 있지만, 무엇이 당신에게 적합한지, 그리고 당신의 프로젝트 스타일이 가장 좋은지 테스트해야 합니다.
저는 개인적으로 새로운 구문과 논리 집합(논리와 템플릿 혼합, 안녕??)을 추가하는 데 어려움을 겪고 순수 js가 되었습니다.모든 템플릿이 고유 html 파일(./usersTable.row.html)에 저장됩니다.저는 컨텐츠를 아약스할 때만 템플릿을 사용하고, 테이블용, 디브용, 목록용 등 "논리" js 파일은 거의 없습니다.(다른 방법을 사용하는 경우) select의 옵션에 대해서는 하나도 선택하지 않습니다.
좀 더 복잡한 작업을 시도할 때마다 코드가 덜 명확하다는 것을 알게 되었고 "옛 방식"으로 작업하는 것보다 안정화하는 데 더 많은 시간이 걸렸습니다.템플릿에 있는 논리는 완전히 말도 안 되는 것이며, 자체 구문을 추가하면 추적하기 매우 어려운 버그만 추가됩니다.
자바스크립트용 템플릿 엔진
jQuery에 연결된 플러그인...
특징:
- 자바스크립트에서 100%
- 프리컴파일레이터
- 지원 JSON
- 아약스와 협력
- 템플릿 내에서 자바스크립트 코드 사용 허용
- 계단식 템플릿 작성 허용
- 템플릿에서 매개 변수 정의 허용
- Live Refresh! - 서버에서 컨텐츠 자동 업데이트...
여기에는 다양한 템플릿 도구를 다루는 이 주제에 대한 합리적인 토론 문서가 있습니다.jQuery에 대해서는 구체적이지 않습니다.
마이크로소프트사에서 만든 jQuery Templates 플러그인으로 정식 jQuery 플러그인으로 승인되었습니다.
하지만 지금은 더 이상 사용하지 않는다는 것을 주목하세요.
json2html을 확인해 보겠습니다. HTML 스니펫을 작성하는 것을 포기하고 대신 JSON 변환에 의존하여 JSON 객체 배열을 비정형 목록으로 변환합니다.매우 빠르고 DOM 생성을 사용합니다.
몇 년 전에 IBDOM을 만들었습니다. http://ibdom.sf.net/ | 2009년 12월 현재 트렁크에서 바로 받으면 jQuery 바인딩을 지원합니다.
$("#foo").injectWith(collectionOfJavaScriptObjects);
아니면
$("#foo").injectWith(simpleJavaScriptObject);
이제 모든 "data:propName" 마커를 class="data:propName other classname" 속성에 넣을 수 있으므로 해당 마커에 응용 프로그램의 내용을 낭비할 필요가 없습니다.
저는 최근 향상된 기능을 반영하기 위해 아직 거기에 있는 많은 문서들을 업데이트하지 않았지만, 2007년부터 이 프레임워크의 다양한 버전을 생산하고 있습니다.
이 질문에 대한 회의론자들에게:
Microsoft가 IE5를 통해 현재 XmlHttpRequest 및 "ajax" 패턴을 개발했을 때, 이러한 약속의 일부는 웹 브라우저와 서버 간에 데이터를 순수하게 교환하는 것이었습니다.그 데이터는 XML로 캡슐화될 예정이었는데, 1999/2000년에는 XML이 너무 뜨거웠기 때문입니다.콜백 메커니즘을 사용하여 네트워크를 통해 xml 문서를 검색하는 것 외에도 MS의 MSXML ActiveX 구성 요소는 현재 XSL-T 및 XPath라고 알려진 것의 사전 초안 구현을 지원했습니다.
HTTP/XML 검색, XPath 및 XSL-T를 결합하면 개발자들은 "애플리케이션"과 같이 동작하는 풍부한 "문서"를 구축할 수 있는 엄청난 창의력을 얻을 수 있었으며, 이는 순수하게 서버에서 데이터를 전송하고, 더 중요하게는 서버에서 데이터를 검색하는 것이었습니다.
이것이 왜 유용한 패턴입니까?사용자 인터페이스가 얼마나 복잡한지, 유지보수성에 얼마나 신경을 쓰는지에 따라 달라집니다.
고급 CSS로 시각적으로 매우 풍부한 의미론적 마크업 인터페이스를 구축할 때 마지막으로 하고 싶은 일은 마크업 조각을 "미니 컨트롤러/뷰"로 청크아웃하는 것입니다. 따라서 .inner.HTML로 문서 조각을 메인 문서로 만들고, 그 이유는 다음과 같습니다.
고급 html/css 사용자 인터페이스를 관리 가능하게 유지하는 핵심 원칙 중 하나는 최소한 개발 단계에서 유효성을 유지하는 것입니다.마크업이 유효하다면 CSS 버그에 집중할 수 있습니다.이제, 사용자 상호 작용의 여러 단계에서 마크업의 파편이 주입되면, 모든 것이 관리하기 매우 어려워지고, 전체가 부서지기 쉬워집니다.
아이디어는 모든 마크업 UI 구성요소를 하나의 문서로 구성하고 네트워크를 통해 데이터만 검색하며 최소한 단순하게 마크업 구성요소에 데이터를 주입하는 견고한 프레임워크를 사용하는 것이었습니다. 그리고 반복 가능한 것으로 표시되는 마크업 구성요소를 최대한 복제하는 것이었습니다.
이것은 IE5+의 XSL-T와 XPath에서는 가능했지만 사실상 다른 브라우저는 없었습니다.일부 F/OSS 브라우저 프레임워크는 XPath를 사용하고 있지만 아직은 신뢰할 수 있는 부분이 아닙니다.
그렇다면 그러한 패턴을 달성하기 위한 차선책은 무엇일까요?IBDOM.서버에서 데이터를 가져와 문서에 주입합니다.거뜬히
Javascript-Templates를 살펴보셔야 합니다. 이것은 유명한 jQuery File Upload 플러그인 내에서 사용되는 작은 템플릿 엔진이며, 같은 저자인 Sebastian Tschan(@blueimp)이 개발했습니다.
https://github.com/blueimp/JavaScript-Templates
세바스찬이 만든 사용 가이드를 따라 이 줄만 제거하면 됩니다.
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
이거로 대체
$('#result').html(tmpl('tmpl-demo', data));
HTML 파일에 div 결과 태그를 추가하는 것도 잊지 마세요.
<div id="result"></div>
즐거운 시간 되세요.
언급URL : https://stackoverflow.com/questions/449780/recommended-javascript-html-template-library-for-jquery
'programing' 카테고리의 다른 글
| mysqdump: 오류가 발생했습니다: 1449: (0) | 2023.09.26 |
|---|---|
| jquery.animate()가 있는 CSS 회전 교차 브라우저 (0) | 2023.09.26 |
| PHP의 preg_match_all()과 유사한 자바스크립트의 regex와 다중 발생을 일치시키는 방법은 무엇입니까? (0) | 2023.09.26 |
| Spring Boot에서 '@DateTimeFormat' 패턴을 글로벌하게 구성하는 방법은? (0) | 2023.09.26 |
| 워드 프레스 페이지에서 "http"를 "https"로 모두 변경 (0) | 2023.09.26 |