HTML로 사용자 정의 또는 재사용 가능한 구성 요소를 만들 수 있습니까?사용자 정의 또는 재사용 가능한 HTML 구성 요소
내 페이지에는 HTML, JS, jQuery 코드를 사용하여 구현 된 계정 검색 기능이 있습니다. 그리고 내 페이지는 다른 장소에서의 계정 검색으로 구성됩니다. (기능은 동일 함). div를 사용할 때마다 div의 ID 만 변경됩니다.
그래서 HTML 형식의 구성 요소를 만들 수 있습니까?
다시 말하지만, 코드를 별도의 파일에 작성하고 다른 위치에 포함 시키면 각 영역마다 ID 변경이 이루어지지 않습니다. ID는 서버를 호출하고 데이터를 가져 와서 필드 등을 업데이트 할 때 중요합니다.
다음 프레임 워크는 문제를 해결하는 데 도움이됩니다.
HTML은 프로그래밍 언어가 아니며 마크 업 언어입니다. 대부분 template engine을 찾고 있습니다. haml
자바 스크립트 템플릿을 살펴보십시오. 한 예를 들면 mustache.js을 참조하십시오.
<script type="text/template" id="template">
{{#elements}}
<div id="{{id}}">
{{content}}
</div>
{{/elements}}
</script>
var view = {
"elements":
[
{
id: "one",
content: "Lorem ipsum dolor"
},
{
id: "two",
content: "Sit amet consectetur"
}
]
}
var template = document.getElementById("template").innerHTML;
var output = Mustache.render(template, view);
console.log(output);
로그 :
<div id="one">
Lorem ipsum dolor
</div>
<div id="two">
Sit amet consectetur
</div>
당신은 객체를 통해 루프 기능을 평가하고 텍스트로 삽입 할 수 있습니다.
+1 나는 이전처럼 자바 스크립트 템플릿을 보지 못했지만 freemarker와 같은 좀 더 복잡한 서버 사이드 솔루션 만 보았습니다. 아주 멋지다. –
좋은 템플릿 엔진이 좋지만 간단한 마크 업을 사용하여 HTML 컨트롤에서 로직을 분리 할 수 있습니다.
부트 스트랩은 클래스를 사용하여이를 수행하며 데이터 속성은보다 정밀한 제어를 위해 잘 작동합니다.
코드를 약간 정리해야합니다. 필요한 모든 코드를 모으고 모든 ID를 모든 ID로 분리하십시오. 일반적으로 ID를 사용하는 하나 또는 두 개의 지점 만 있기 때문에 이것은 어려운 일이 아닙니다. 변수를 사용하여 나머지 작업을 수행하기 때문입니다.
모든 코드를 하나의 함수로 묶습니다. 이것은 이전에 이드에게 하드 코딩 된 하나였습니다. 코드에서 사용 된 모든 ID를 클래스 또는 더 나은 변수로 이동합니다. 위젯 클래스의 이러한 클래스 및/또는 하위 클래스를 반영하도록 CSS를 변경하십시오 (더 빨리). 이 시점에서 함수를 호출하고 요소를 전달하여 작동하게해야합니다. makeSearchFromElement()라고 부르 자.
function makeSearchFromElement(elm){
elm.onchange=function(e){ alert("searching for " + elm.value); };
}
이렇게하면 쉽게 정의 할 수 있습니다. "widget-search"클래스를 예제로 사용 해보자. 패키지에 검색 기능이 필요한 html 요소에 클래스를 추가하십시오.
[].slice
.call(document.getElementsByClassName("widget-search"))
.map(makeSearchFromElement);
당신이 돈이 ':
<input class='search widget-search validation' id=search123 type=search />
지금, 당신이해야 할 HTML에 선언 된 모든 위젯을 찾아 사이트 전체 JS 파일에 어딘가에 위젯 메이커로 보낼 것입니다 body 태그의 맨 아래에 삽입하면 ready() 또는 onload() 이벤트에서 마지막 비트를 배치하려고합니다.
각 입력을 추가하는 데 필요한 한 줄의 CSS 또는 JS가 아니라 HTML에 클래스를 추가하기 만하면 데모 "검색"기능을 갖기 위해 필요한 모든 작업 만 수행하면됩니다. 이 도구를 사용하면 사이트의 각 부분을 한 곳에서 패치하거나 업그레이드 할 수 있으며 와이어를 통해 배송 될 사용자 정의 코드의 양을 줄여 손으로 페이지를 바인딩하는 것보다 빠르게 페이지를로드 할 수 있습니다.
이 부분은 blog post입니다. Handlebar.js를 사용하여 "재사용 가능한 구성 요소를 만드는 방법"을 상세히 설명합니다. 확실히 읽을만한 가치가 있습니다.
아래 코드는 앱에 datetimepicker를 추가하기에 충분합니다.
내가 (콧수염의 상단에 기록) 핸들을 사용하는 것을 선호 :
{{datetime "d1" "Start Date"}}
angularJS를 사용하는 경우 구성 요소와 별도의 html 파일을 만들어 페이지로 요소로 호출하여 재사용 가능한 html 파일을 만들 수 있습니다.
app.directive("elementName", function() {
return {
restrict: 'E',
templateUrl: "/Path/To/Html.file"
};
});
그런 다음 모든 HTML 페이지에서 방금 다음과 같이이 구성 요소를 사용하려면 : 사실 어쩌면 당신은 별도의 js 파일을 사용할 수
<element-name></element-name>
을 구현 단지에 아마 (수신 할 필요가 생성자 또는 클래스가 아닌 경우 특정 html 태그를 찾으십시오) 필요할 때 필요한 정보를 사용하십시오.
귀하의 질문이 무엇인지 명확하지 않습니다. 좀 더 구체적으로 알려주시겠습니까? 템플리트를 말하는거야? 고유 한 마크 업 태그를 만드시겠습니까? – Swordfish0321
어쩌면 너는 mustacheJS 또는 핸들 바와 같은 것을 찾고 있습니까? 또한 재사용 가능한 HHTML 구성 요소의 측면에서 angularJS는이 작업을 정말 좋은 방법으로 수행합니다. 그러나 큰 학습 곡선이므로이 프로젝트에 필요한 것 이상일 수 있습니다. –
일종의 사용자 지정 그림자 DOM이 있으면 좋겠지 만 AFAIK 옵션은 아닙니다. – zzzzBov