code

JQuery에 권장되는 JavaScript HTML 템플릿 라이브러리?

codestyles 2020. 9. 8. 07:59
반응형

JQuery에 권장되는 JavaScript HTML 템플릿 라이브러리? [닫은]


어떤 HTML 템플릿 라이브러리가 JQuery와 잘 어울리는 지에 대한 제안이 있습니까? 인터넷 검색에는 많은 라이브러리가 있지만 시간의 테스트를 견딜 수있는 잘 알려진 라이브러리가 있는지 확실하지 않습니다.


솔직히 말해서 클라이언트 측 템플릿은 요즘 매우 뜨겁지 만 꽤 정글입니다.

가장 인기있는 것은 다음과 같습니다.

  • pure : 자신의 "구문"이 아닌 js 만 사용합니다.
  • 콧수염 : 꽤 안정적이고 좋네요.
  • jqote2 : jsperfs 에 따라 매우 빠름
  • jquery 템플릿 (사용되지 않음) :

거기에 많은 프로젝트 스타일은 가장 다른,하지만 당신은 그들이 당신을 맞는 것을보고 테스트해야합니다.

개인적으로 새로운 구문과 논리 집합 ( 논리와 템플릿 혼합, hello ?? ) 을 추가하는 데 어려움을 겪고 순수 js가되었습니다. 모든 템플릿은 자체 html 파일 (./usersTable.row.html)에 저장됩니다. 콘텐츠를 ajaxing 할 때만 템플릿을 사용하고 "논리"js 파일이 거의 없습니다. 하나는 테이블 용, 하나는 div 용, 하나는 목록 용입니다. 그리고 select의 옵션에도 하나도 없습니다 (다른 방법을 사용하는 곳).

더 복잡한 작업을 시도 할 때마다 코드가 덜 명확하고 "오래된"방식으로 수행하는 것보다 안정화하는 데 더 많은 시간이 소요된다는 사실을 알게되었습니다. 템플릿의 논리는 제 생각에는 전혀 말도 안되며 자체 구문을 추가하면 추적하기가 매우 어려운 버그만 추가됩니다.


jTemplates

JavaScript 용 템플릿 엔진입니다.

jQuery 플러그인 ...

풍모:

  • 자바 스크립트에서 100 %
  • 프리 컴파일 레이터
  • JSON 지원
  • Ajax 작업
  • 템플릿 내에서 JavaScript 코드 사용 허용
  • 계단식 템플릿 작성 허용
  • 템플릿에서 매개 변수 정의 허용
  • 라이브 리프레시! -서버에서 콘텐츠 자동 업데이트 ...

이 주제에 대한 합리적인 토론 문서가 여기 하는 주형 도구의 범위를 커버. 그러나 jQuery에만 국한되지 않습니다.


Microsoft에서 만든 jQuery Templates 플러그인 은 공식 jQuery 플러그인으로 허용됩니다.

그러나 이제 더 이상 사용되지 않습니다.


json2html 을 확인하고 , HTML 스 니펫을 작성하지 않고 대신 JSON 변환에 의존하여 JSON 객체 배열을 구조화되지 않은 목록으로 변환합니다. 매우 빠르고 DOM 생성을 사용합니다.


A couple years ago i built IBDOM: http://ibdom.sf.net/ | As of december 2009, it supports jQuery binding if you get it straight from the trunk.

$("#foo").injectWith(collectionOfJavaScriptObjects);

or

$("#foo").injectWith(simpleJavaScriptObject);

Also, you can now put all the "data:propName" markers in class="data:propName other classnames" attributes, so you don't have to litter your application's content with those markers.

I've yet to update a bunch of the documentation on there to reflect my recent enhancements, but the i've had various versions of this framework in production since 2007.

To skeptics of this question:

Back when Microsoft invented with IE5 what we now know as XmlHttpRequest and the "ajax" pattern, part of the promise behind this was to purely exchange data between a web browser and the server. That data was to be encapsulated in XML, because in 1999/2000, XML was simply just so very hot. Beyond retrieving an xml document over the network with a call-back mechanism, MS's MSXML ActiveX component also supported a pre-draft implementation of what we now know as XSL-T and XPath.

Combining retrieving HTTP/XML, XPath, and XSL-T, afforded developers tremendous creativity to build rich "documents" which behaved as "applications", purely sending, and more importantly, retrieving data from the server.

Why is this a useful pattern? It depends on how complex your user interface is, and how much you care about its maintainability.

When building a visually very rich semantically marked-up interface with advanced CSS, the last thing you want to do is chunk-out pieces of markup into "mini-controller/views", just so you can .innerHTML a document fragment into the main document, and here's why.

One key tenet of keeping an advanced html/css user interface manageable, is to preserve its validation at least during its active phase of development. If your markup validates, you can focus on your CSS bugs. Now, if fragments of markup end-up getting injected during various stages of user-interaction, it all becomes very unwieldy to manage, and the whole thing gets brittle.

The idea was to have all of your markup UI constructs in a single document, retrieve ONLY DATA over the network, and use a solid framework which will at the very least simply inject your data into your markup constructs, and at the most replicate markup constructs which you flagged as repeatable.

This was possible with XSL-T and XPath in IE5+, but virtually no other browsers. Some F/OSS browser frameworks have been dabbling with XPath but it's not quite something we can rely on just yet.

So what's the next best thing to achieve such pattern? IBDOM. Get data from your server, inject it in your document. effortlessly.


You should get a look on Javascript-Templates, this is a small template engine used within the famous jQuery File Upload plugin, and developed by the same author, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Follow the usage guide made by Sebastian, just remove this line

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Replace it with this one

$('#result').html(tmpl('tmpl-demo', data));

Don't forget to add the div result tag in you HTML file too

<div id="result"></div>

Enjoy

참고URL : https://stackoverflow.com/questions/449780/recommended-javascript-html-template-library-for-jquery

반응형